/* ============================================================
   FOOTER V2 — theo mockup khách duyệt 2026-08-04 (bản sạch)
   Nền đỏ đậm gradient, 5 khối 1 hàng, social = icon trắng trần
   ============================================================ */

#footer.fv2 {
    background: #d7261e; /* đỏ brand — theo yêu cầu 2026-08-04 */
    color: #fff;
    padding: 44px 0 0;
    margin-top: 0; /* bỏ khe trắng phía trên — footer nối liền nội dung */
}

.fv2-main {
    display: grid;
    grid-template-columns: 1.5fr .85fr 1fr 1.15fr .95fr;
    gap: 40px;
    padding-bottom: 30px;
}

/* Thương hiệu — thẻ trắng chứa logo TREO liền mép trên footer (theo mẫu):
   góc trên vuông dính mép, chỉ bo 2 góc dưới */
.fv2-logo {
    display: inline-flex !important; width: auto !important; min-width: 0 !important;
    text-decoration: none; margin-bottom: 14px;
    background: #fff;
    border-radius: 0 0 16px 16px;            /* y mẫu: góc trên VUÔNG nối liền nền trắng phía trên, chỉ bo 2 góc dưới */
    padding: 10px 12px 8px;                  /* trắng bó sát mép logo */
    /* Thẻ đặt THẲNG HÀNG đúng mép trên footer */
    margin-top: -44px;
    position: relative; z-index: 2;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
    border-bottom: 4px solid #FFD34D;        /* viền nhấn vàng gold ở đáy */
}
.fv2-logo img {
    width: 128px; height: auto; display: block;
    background: none; border-radius: 0; padding: 0; box-shadow: none;
}
.fv2-tagline { font-size: 13.5px; line-height: 1.7; color: #fff !important; margin: 0; }

/* Cột */
.fv2-col h3 {
    font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
    color: #fff; margin: 0 0 14px;
}
/* Tiêu đề cột thương hiệu: VIẾT HOA toàn bộ như các cột khác (yêu cầu 2026-08-04) */
.fv2-col h3.fv2-h3--brand { text-transform: uppercase; }
.fv2-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fv2-col ul a {
    color: rgba(255, 255, 255, .82) !important; font-size: 14px; text-decoration: none;
    transition: color .18s ease, padding-left .2s ease;
}
.fv2-col ul a:hover { color: #FFD34D !important; padding-left: 4px; }

/* Liên hệ */
.fv2-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .82); line-height: 1.55; }
.fv2-contact li i { width: 16px; margin-top: 3px; color: #FFD34D !important; font-size: 13px; flex: 0 0 16px; }
.fv2-contact li a { color: rgba(255, 255, 255, .9) !important; text-decoration: none; }
.fv2-contact li a:hover { color: #FFD34D !important; }

/* ── Mạng xã hội: icon TRẮNG TRẦN như mẫu — không vòng tròn ── */
/* Yêu cầu 5/08: icon chuẩn logo hãng — đĩa tròn MÀU THƯƠNG HIỆU + glyph trắng */
.fv2-socials { display: flex; align-items: center; gap: 16px; }
.fv2-socials a,
.fv2-socials > span {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff !important; border: 0 !important;
    box-shadow: none !important;                 /* 5/08: khách bỏ viền quanh icon */
    padding: 0; width: 42px !important; height: 42px !important; border-radius: 50%;
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}
/* Nền đĩa theo màu chính thức từng nền tảng */
.fv2-socials a:has(.fa-facebook-f) { background: #1877F2 !important; }
.fv2-socials a:has(.fa-users)      { background: #1877F2 !important; }
.fv2-socials a:has(.fa-tiktok)     { background: #010101 !important; }
.fv2-socials a:has(.fv2-zalo)      { background: #0068FF !important; }
/* Glyph chiếm trọn đĩa + grid center => luôn chính giữa tuyệt đối */
.fv2-socials a i,
.fv2-socials > span i,
.fv2-socials a b,
.fv2-socials > span b {
    display: grid !important; place-items: center;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    font-size: 19px;
    line-height: 1;
    text-align: center;
}
/* Glyph trắng như logo chuẩn */
.fv2-socials .fa-facebook-f,
.fv2-socials .fa-users,
.fv2-socials .fa-tiktok { color: #fff !important; }
.fv2-zalo {
    color: #fff !important;
    font-size: 12px; font-weight: 800; letter-spacing: .2px;
    font-style: italic;
}
.fv2-socials a:hover { transform: translateY(-3px); }
.fv2-socials > span { opacity: .55; cursor: default; }

/* Dòng pháp lý */
.fv2-bottom {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding: 14px 0 16px; text-align: center;
    font-size: 12.5px; color: rgba(255, 255, 255, .65);
}

/* Responsive */
@media (max-width: 1023px) {
    .fv2-main { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
    .fv2-brand { grid-column: 1 / -1; text-align: center; }
    .fv2-brand .fv2-logo { margin-inline: auto; }
}
@media (max-width: 639px) {
    #footer.fv2 { padding-top: 32px; }
    .fv2-logo { margin-top: -32px; }
    /* 6/08: chia cột theo mẫu khách gửi (kiểu IELTS Fighter) —
       khối thương hiệu full dòng căn trái, các cột link xếp 2 cột song song */
    .fv2-main { grid-template-columns: 1fr 1fr; gap: 26px 18px; text-align: left; }
    .fv2-brand { grid-column: 1 / -1; text-align: left; }
    .fv2-brand .fv2-logo { margin-inline: 0; }
    .fv2-col ul { justify-items: start; }
    .fv2-contact li { justify-content: flex-start; text-align: left; }
    .fv2-socials { justify-content: flex-start; gap: 12px; }
    /* Badge BCT theo lề trái của cột, tự co cho vừa cột hẹp */
    .fv2-bct { margin-inline: 0; max-width: 100%; box-sizing: border-box; }
    .fv2-bct img { width: 100%; max-width: 140px; }
    /* 6/08: tên công ty gọn 1 hàng trên mobile */
    #footer.fv2 .fv2-company { font-size: 12.5px !important; letter-spacing: 0; white-space: nowrap; }
}
/* Máy màn hẹp (<360px): hạ thêm cỡ chữ để tên công ty vẫn 1 hàng */
@media (max-width: 359px) {
    #footer.fv2 .fv2-company { font-size: 10.5px !important; }
}

/* 6/08: mobile — icon mạng xã hội + badge Bộ Công Thương nhỏ lại một chút
   (đặt CUỐI file để thắng các rule base theo thứ tự cascade) */
@media (max-width: 639px) {
    #footer.fv2 .fv2-socials a,
    #footer.fv2 .fv2-socials > span { width: 34px !important; height: 34px !important; }
    #footer.fv2 .fv2-socials .fv2-brandlogo { width: 34px; height: 34px; }
    /* Khung ôm SÁT logo, không kéo rộng theo cột */
    #footer.fv2 .fv2-bct { padding: 7px 10px; border-radius: 11px; margin-top: 14px; width: fit-content; }
    #footer.fv2 .fv2-bct img { width: 112px; max-width: 100%; }
    /* Logo trường trong thẻ trắng nhỏ lại một chút trên mobile */
    #footer.fv2 .fv2-logo { padding: 8px 10px 6px; }
    #footer.fv2 .fv2-logo img { width: 100px; }
}

/* Khối thông tin công ty dưới logo — theo mẫu */
.fv2-company {
    font-size: 15px; font-weight: 800; color: #fff !important;
    text-transform: uppercase; line-height: 1.5; margin: 2px 0 12px;
}
.fv2-cominfo { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fv2-cominfo li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.6; color: #fff; }
.fv2-cominfo li i { width: 15px; flex: 0 0 15px; margin-top: 4px; color: #FFD34D !important; font-size: 13px; }
.fv2-cominfo li a { color: #fff !important; text-decoration: none; }
.fv2-cominfo li a:hover { color: #FFD34D !important; }
.fv2-cominfo__gpkd { display: block !important; color: rgba(255, 255, 255, .92) !important; }

/* Logo SVG chuẩn hãng (FB/TikTok) — svg tự mang đĩa màu, anchor trong suốt */
.fv2-socials a:has(.fv2-brandlogo) { background: transparent !important; }
.fv2-brandlogo { display: block; width: 42px; height: 42px; border-radius: 50%; }

/* Logo Đã thông báo Bộ Công Thương — nền trong suốt + khung viền nổi (khách 6/08) */
.fv2-bct {
    display: inline-block; margin-top: 18px;
    width: fit-content;                          /* 6/08: khung ôm sát logo cả trên PC */
    background: transparent; padding: 8px 11px;
    border: 1.5px solid rgba(255, 255, 255, .65);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .18);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fv2-bct img { display: block; width: 140px; height: auto; }   /* 6/08: khách chốt nhỏ lại */
.fv2-bct:hover {
    transform: translateY(-2px);
    border-color: #FFD34D;
    box-shadow: 0 0 0 4px rgba(255, 211, 77, .2), 0 8px 20px rgba(0, 0, 0, .24);
}
/* 6/08 (bản cuối): footer mobile chia cột kiểu mẫu, badge theo lề trái cột — bỏ căn giữa cũ */