/* ===================================================
   1️⃣ RESET & BODY
=================================================== */

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:url("https://special.nhandan.vn/-da-lam-nen-nhung-cot-moc-vang-trong-lich-su-dau-tranh-giai-phong-dan-toc-va-bao-ve-To-quoc/assets/3gBgZcxtLW/cover-2560x1440.jpg") no-repeat center center fixed;
    background-size:cover;
}

.overlay{
    background:rgba(0,0,0,0.75);
    min-height:100vh;
    padding-bottom:40px;
}

/* ===================================================
   2️⃣ CONTAINER
=================================================== */

.container{
    background:rgba(255,255,255,0.95);
    max-width:1100px;
    margin:40px auto;
    padding:30px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* ===================================================
   3️⃣ HEADER ADMIN / DANHSACH
=================================================== */

/* ===== HEADER BỐ CỤC MỚI ===== */

.main-header{
    background:#1b5e20;
    color:white;
    padding:15px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
}

/* Bên trái */
.header-left{
    display:flex;
    align-items:center;
    gap:15px;
}

/* Logo */
.logo-army{
    height:45px;
}

/* Nav bên trái */
/* ===== NAV BUTTON STYLE ===== */

.nav-links a{
    color:white;
    text-decoration:none;
    padding:3px 14px;
    border-radius:6px;
    font-weight:500;
    font-size:14px;
    transition:0.3s ease;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(4px);
}

/* Hover hiệu ứng nổi */
.nav-links a:hover{
    background:rgba(255,255,255,0.25);
    transform:translateY(-3px);
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

/* Khi đang ở trang hiện tại */
.nav-links a.active{
    background:white;
    color:#1b5e20;
    font-weight:bold;
}


/* Title ở giữa tuyệt đối */
.header-center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-weight:bold;
    font-size:20px;
    letter-spacing:1px;
}

/* Nút đăng xuất */
.btn-admin{
    display:flex;
    align-items:center;
    gap:6px;
}

.btn-admin i{
    font-size:14px;
}

/* Hiệu ứng hover cho icon */
.btn-admin:hover i{
    transform:translateX(3px);
    transition:0.3s;
}

/* ===================================================
   4️⃣ HEADER TRANG CHỦ (QUỐC PHÒNG)
=================================================== */

.top-header{
    background:url('https://scontent-hkg1-1.xx.fbcdn.net/v/t39.30808-6/622985216_1401284228677999_5712549791893892940_n.jpg?_nc_cat=105&ccb=1-7&_nc_sid=13d280&_nc_ohc=5clq9lg1RvMQ7kNvwEFnJ7B&_nc_oc=AdmWTAYmU-ihAB7IR_QOgtAWsc75k3UDNllKUuJxByN4AGZ_iH4zDdXjqRyZ-hbHVJf6T4DKmZvwdGwcktVJ5ECt&_nc_zt=23&_nc_ht=scontent-hkg1-1.xx&_nc_gid=YwfNqCgkU0eoHlcvz5PCBw&_nc_ss=8&oh=00_Afv7uWUq1dexiQlzhYoqmLXmRvt7kNXBjeKGbbhnkDEvYA&oe=69A8A284') center/cover no-repeat;
    padding:40px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.header-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.logo-left{
    height:80px;
}

.header-text .line1{
    font-size:30px;
    font-weight:bold;
    color:#ffd700;
}

.header-text .line2{
    font-size:30px;
    font-weight:bold;
    color:#ffffff;
}

.header-right img{
    height:200px;
}

/* ===================================================
   5️⃣ NAVBAR ĐỎ
=================================================== */

.navbar{
    background:linear-gradient(90deg,#8b0000,#c40000);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding:8px 0;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

.navbar a{
    color:white;
    text-decoration:none;
    padding:10px 18px;
    font-weight:bold;
    font-size:14px;
    border-radius:6px;
    transition:0.3s;
}

.navbar a:hover{
    background:rgba(255,255,255,0.2);
}

/* ===================================================
   6️⃣ DASHBOARD CARD
=================================================== */

.dashboard{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}
.dashboard-title{
    text-align:center;
    font-size:28px;
    font-weight:bold;
    color:#000000;
    margin:40px 0 30px 0;
    letter-spacing:1px;
}

.card{
    background:linear-gradient(145deg,#3d6b3d,#2f4f2f);
    color:white;
    text-decoration:none;
    padding:40px 20px;
    border-radius:10px;
    text-align:center;
    transition:0.3s;
    box-shadow:0 8px 20px rgba(0,0,0,0.2);
}

.card:hover{
    transform:translateY(-8px);
    background:linear-gradient(145deg,#b22222,#8b0000);
}

.card i{
    font-size:45px;
    color:#ffd700;
}

.card span{
    display:block;
    font-size:18px;
    font-weight:bold;
}

/* ===================================================
   7️⃣ FORM & BUTTON
=================================================== */

form input, form select{
    width:100%;
    padding:10px;
    margin:10px 0;
    border-radius:6px;
    border:1px solid #ccc;
}

button{
    padding:10px 18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:bold;
}

.btn-success{background:#2e7d32;color:white;}
.btn-danger{background:#c62828;color:white;}
.btn-secondary{background:#555;color:white;}

.btn-danger:hover{background:#b71c1c;}

/* ===================================================
   8️⃣ TABLE
=================================================== */

table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

th,td{
    padding:10px;
    border:1px solid #ddd;
    text-align:center;
}

th{
    background:#2e7d32;
    color:white;
}

/* ===================================================
   9️⃣ FOOTER
=================================================== */

.footer-military{
    background:#1f3b2d;
    color:#ffffff;
    margin-top:50px;
    padding-top:40px;
}

.footer-container{
    width:90%;
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:40px;
    padding-bottom:40px;
}

.footer-bottom{
    background:#ffffff;
    color:#1b2d22;
    text-align:center;
    padding:12px;
    font-weight:bold;
}
.footer-col ul li a{
    color: white;
}
.footer-col p a{
    color: white;
}
/* ===== FOOTER ICON TITLE ===== */

.footer-col h3{
    display:flex;
    align-items:center;
    gap:8px;
    color:#ffd700;
    font-size:20px;
    margin-bottom:15px;
}

.footer-col h3 i{
    font-size: 20px;
}
/* ================= MOBILE ONLY FIX ================= */
@media (max-width: 768px) {

    /* Container gọn lại */
    .container {
        width: 95%;
        padding: 15px;
    }

    /* Header xếp dọc */
    .main-header {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .logo-army {
        height: 38px;
    }

    .header-center {
        font-size: 15px;
        line-height: 1.4;
    }

    /* Navbar xếp dọc */
    .navbar {
        flex-direction: column;
        align-items: center;
    }

    .navbar a {
        width: 100%;
        text-align: center;
    }

    /* Form full chiều ngang */
    form {
        width: 100%;
    }

    form input,
    form select {
        font-size: 14px;
    }

    button {
        width: 100%;
    }

    /* Bảng cuộn ngang thay vì vỡ */
    .table-wrapper {
        overflow-x: auto;
    }

    table {
        min-width: 700px;
        font-size: 13px;
    }

    th, td {
        padding: 6px;
    }

    /* Dashboard xếp 1 cột */
    .dashboard {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 18px 10px;
    }
}


/* Extra nhỏ hơn */
@media (max-width: 480px) {

    .header-center {
        font-size: 14px;
    }

    table {
        font-size: 12px;
    }

    th, td {
        padding: 5px;
    }

    .card i {
        font-size: 26px;
    }
}
/* ===== FIX KHOẢNG TRỐNG MOBILE ===== */
@media (max-width: 768px){

    body{
        min-height:100vh;
        display:flex;
        flex-direction:column;
    }

    .container{
        margin:15px auto;
        padding:15px;
        flex:1;
    }

    .footer-military{
        margin-top:20px;
    }

    /* Giảm khoảng cách section */
    h1, h2, h3{
        margin-bottom:10px;
    }

    form{
        margin:10px auto;
    }

    /* Nếu có dashboard */
    .dashboard{
        margin-top:15px;
    }
}
/* ================= LOGIN PAGE ================= */

.login-wrapper{
    min-height:calc(100vh - 150px);
    display:flex;
    justify-content:center;
    align-items:center;
    background:#e9e9e9;
    padding:20px;
}

.login-box{
    width:100%;
    max-width:420px;
    background:#ffffff;
    padding:30px;
    border-radius:6px;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.login-box label{
    font-weight:bold;
    margin-top:12px;
    display:block;
}

.login-box input{
    width:100%;
    padding:10px;
    margin-top:6px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:14px;
}

.btn-login{
    width:100%;
    padding:10px;
    margin-top:20px;
    background:#c62828;
    color:white;
    border:none;
    border-radius:4px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.btn-login:hover{
    background:#8b0000;
}

.btn-back{
    display:block;
    text-align:center;
    margin-top:12px;
    padding:8px;
    background:#555;
    color:white;
    text-decoration:none;
    border-radius:4px;
    font-size:14px;
}

.btn-back:hover{
    background:#333;
}

/* Thông báo lỗi */
.login-error{
    background:#fdecea;
    color:#c62828;
    padding:8px;
    border:1px solid #f5c2c2;
    border-radius:4px;
    text-align:center;
    margin-bottom:15px;
    font-size:14px;
}

/* Mobile */
@media(max-width:480px){
    .login-box{
        padding:20px;
    }
}
.news-card{
    background: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.news-card h3{
    color: #b71c1c;
}