/* Minification failed. Returning unminified contents.
(3,21): run-time error CSS1039: Token not allowed after unary operator: '-web-container'
(5,21): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(9,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(22,35): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-100'
(28,23): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(35,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(46,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(52,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(58,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(60,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-900'
(61,28): run-time error CSS1039: Token not allowed after unary operator: '-web-ease'
(68,21): run-time error CSS1039: Token not allowed after unary operator: '-nav-mark-right'
(73,32): run-time error CSS1039: Token not allowed after unary operator: '-nav-mark'
(74,36): run-time error CSS1039: Token not allowed after unary operator: '-web-ease'
(78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,19): run-time error CSS1030: Expected identifier, found '.'
(86,49): run-time error CSS1031: Expected selector, found ')'
(86,49): run-time error CSS1025: Expected comma or open brace, found ')'
(93,23): run-time error CSS1030: Expected identifier, found '.'
(93,45): run-time error CSS1031: Expected selector, found ')'
(93,45): run-time error CSS1025: Expected comma or open brace, found ')'
(100,22): run-time error CSS1039: Token not allowed after unary operator: '-web-primary-50'
(101,17): run-time error CSS1039: Token not allowed after unary operator: '-web-primary'
(122,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(141,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(142,22): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(143,28): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-100'
(144,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(145,22): run-time error CSS1039: Token not allowed after unary operator: '-web-shadow-lg'
(183,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(184,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(190,26): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-50'
(191,21): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(202,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(203,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(205,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(206,22): run-time error CSS1039: Token not allowed after unary operator: '-web-shadow-xs'
(210,66): run-time error CSS1039: Token not allowed after unary operator: '-web-shadow-xs'
(215,66): run-time error CSS1039: Token not allowed after unary operator: '-web-shadow-xs'
(220,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-section'
(220,44): run-time error CSS1039: Token not allowed after unary operator: '-web-container-pad'
(221,22): run-time error CSS1039: Token not allowed after unary operator: '-web-white'
(227,21): run-time error CSS1039: Token not allowed after unary operator: '-web-footer-content'
(229,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(230,26): run-time error CSS1039: Token not allowed after unary operator: '-footer-pad'
(305,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(305,35): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(317,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(321,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(322,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(323,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(333,22): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-100'
(345,52): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(346,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(354,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(366,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(380,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(381,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(383,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(393,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(397,27): run-time error CSS1039: Token not allowed after unary operator: '-web-text-lg'
(397,72): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xl'
(400,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-900'
(409,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(410,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(412,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(418,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(422,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(423,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm-lh'
(425,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(429,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(435,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(440,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md'
(441,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-md-lh'
(443,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-700'
(448,28): run-time error CSS1039: Token not allowed after unary operator: '-web-ease'
(453,21): run-time error CSS1039: Token not allowed after unary operator: '-web-accent'
(476,37): run-time error CSS1039: Token not allowed after unary operator: '-web-ease'
(476,68): run-time error CSS1039: Token not allowed after unary operator: '-web-ease'
(476,95): run-time error CSS1039: Token not allowed after unary operator: '-web-ease'
(481,26): run-time error CSS1039: Token not allowed after unary operator: '-web-accent-50'
(482,29): run-time error CSS1039: Token not allowed after unary operator: '-web-accent'
(496,29): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-300'
(497,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-400'
(505,26): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-100'
(510,25): run-time error CSS1039: Token not allowed after unary operator: '-footer-pad'
(512,32): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-300'
(532,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(532,34): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(540,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(540,34): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(547,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(550,28): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-300'
(551,25): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-pill'
(553,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xs'
(554,23): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xs-lh'
(555,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(563,15): run-time error CSS1039: Token not allowed after unary operator: '-web-space-2'
(563,34): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(564,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xs'
(566,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(570,32): run-time error CSS1039: Token not allowed after unary operator: '-web-ease'
(575,21): run-time error CSS1039: Token not allowed after unary operator: '-web-accent'
(581,21): run-time error CSS1039: Token not allowed after unary operator: '-web-text-xs'
(583,17): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-600'
(588,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(595,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(614,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-12'
(627,32): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-300'
(628,29): run-time error CSS1039: Token not allowed after unary operator: '-web-radius-sm'
(636,19): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(643,23): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(643,47): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(645,39): run-time error CSS1039: Token not allowed after unary operator: '-web-gray-100'
(646,26): run-time error CSS1039: Token not allowed after unary operator: '-web-shadow-lg'
(647,39): run-time error CSS1039: Token not allowed after unary operator: '-web-header-h'
(667,36): run-time error CSS1039: Token not allowed after unary operator: '-nav-mark'
(705,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-3'
(712,25): run-time error CSS1039: Token not allowed after unary operator: '-web-text-sm'
(720,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-4'
(728,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
(732,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-6'
(750,19): run-time error CSS1039: Token not allowed after unary operator: '-web-space-8'
 */
.web-container {
    width: 100%;
    max-width: var(--web-container);
    margin: 0 auto;
    padding: 0 var(--web-container-pad);
}

.web-section {
    padding: var(--web-space-section) 0;
}

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--web-gray-100);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(21.1px);
}

main {
    padding-top: var(--web-header-h);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--web-space-8);
}

.logo img {
    height: 40px;
    width: auto;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--web-space-8);
}

.nav-item {
    display: inline-flex;
    align-items: center;
    gap: var(--web-space-2);
    padding: 10px 0;
    position: relative;
    --nav-mark: 0;
    white-space: nowrap;
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    font-weight: 600;
    color: var(--web-gray-900);
    transition: color var(--web-ease);
}

    .nav-item::after {
        content: "";
        position: absolute;
        left: 0;
        right: var(--nav-mark-right, 0);
        bottom: 4px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transform: scaleX(var(--nav-mark));
        transition: transform var(--web-ease);
    }

.nav-dropdown > .nav-item {
    --nav-mark-right: calc(-1 * (var(--web-space-2) + 20px));
}

.nav-item:focus-visible,
.nav-item.is-active,
.nav-item[aria-current="page"],
.nav-dropdown[data-open="true"] > .nav-item,
.nav-dropdown[data-active="true"] > .nav-item,
.nav-dropdown:has(.nav-chevron-btn:focus-visible) > .nav-item {
    color: var(--web-primary);
    --nav-mark: 1;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .nav-item:hover,
    .nav-dropdown:has(.nav-chevron-btn:hover) > .nav-item {
        color: var(--web-primary);
        --nav-mark: 1;
    }
}

.nav-dropdown .nav-menu a[aria-current="page"] {
    background: var(--web-primary-50);
    color: var(--web-primary);
}

@media (prefers-reduced-motion: reduce) {
    .nav-item::after {
        transition: none;
    }
}

.nav-chevron {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--web-space-2);
}

.nav-chevron-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
}

.nav-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 260px;
    padding: var(--web-space-2);
    background: var(--web-white);
    border: 1px solid var(--web-gray-100);
    border-radius: var(--web-radius-sm);
    box-shadow: var(--web-shadow-lg);
    display: none;
}

.nav-dropdown[data-open="true"] .nav-menu {
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .nav-dropdown:hover .nav-menu {
        display: block;
    }
    /* 🪤 13 chứ KHÔNG phải 12 — chênh 1px này là CÓ ĐO, không phải làm tròn cho
          chắc. Khe thật đúng 12px (đáy `.nav-dropdown` y=64 -> đỉnh panel y=76), nên
          cầu nối `top: -12px` khớp khít hai mép. Dò `elementFromPoint` từng 0.25px
          dọc đường đi của chuột thì ĐÚNG MỘT điểm hụt: y = 64.00 chẵn, nơi đáy
          dropdown và đỉnh cầu nối trùng nhau -> hit-test rơi ra `.header-fixed`.
          Ở DPR 1 toạ độ chuột LÀ số nguyên, nên chuột đi xuống chắc chắn lấy mẫu
          đúng 64 -> `:hover` tắt 1 frame -> menu nháy, và `mouseleave` còn kéo theo
          `aria-expanded` nhảy false/true.
          `-13px` cho cầu nối chồm lên 1px vào trong dropdown, hết điểm trùng mép.
          Đo lại: 0/69 điểm hụt trên dải 61→78.
          ⚠ Cái giá: trong lúc menu mở, 1px đáy của các `.nav-item` nằm dưới cầu nối
          bị nó nhận click. 1/44px của vùng bấm, và chỉ khi menu đang mở — rẻ hơn
          nhiều so với menu nháy mỗi lần rê xuống. */
    .nav-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -13px;
        height: 13px;
    }
}

.nav-menu a {
    display: block;
    padding: 10px 12px;
    font-size: var(--web-text-sm);
    color: var(--web-gray-700);
    border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .nav-menu a:hover {
        background: var(--web-gray-50);
        color: var(--web-gray-700);
    }
}

.nav-toggle {
    display: none;
}

.header-fixed .header-cta {
    flex: 0 0 auto;
    padding: 10px 16px;
    font-size: var(--web-text-sm);
    line-height: var(--web-text-md-lh);
    border-width: 0;
    border-radius: var(--web-radius-sm);
    box-shadow: var(--web-shadow-xs);
}

    .header-fixed .header-cta:focus-visible {
        box-shadow: 0 6px 14px -4px rgba(44, 71, 158, .35), var(--web-shadow-xs);
    }

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .header-fixed .header-cta:hover {
        box-shadow: 0 6px 14px -4px rgba(44, 71, 158, .35), var(--web-shadow-xs);
    }
}

.site-footer {
    padding: var(--web-space-section) var(--web-container-pad);
    background: var(--web-white);
    border-top: 1px solid rgba(0, 0, 0, .2);
}

.footer-container {
    width: 100%;
    max-width: var(--web-footer-content);
    margin: 0 auto;
    --footer-pad: clamp(0px, calc(15.625vw - 120px), 40px);
    padding-inline: var(--footer-pad);
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(min(380px, 100%), 534fr) minmax(0, 806fr);
    row-gap: 20px;
    column-gap: clamp(32px, calc(14.91vw - 120.7px), 100px);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.footer-logos {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 34px;
}
    /* 🔴 KHOA CA 2 CHIEU, DUNG DE `height: auto`.
      `height: auto` (ban dau toi viet the) lam thuoc tinh `height` tren the <img>
      bi vo hieu, anh chay theo TI LE NOI TAI cua file SVG. Voi logo chu GiHoTech
      (viewBox 217x42) thi vo hai, nhung neu ai do doi `src` sang mot file khac ti le
      — dung cai da xay ra trong chinh vong nay — anh phinh len im lang va de ca ra
      ngoai footer. Khoa cung ca 2 chieu thi sai `src` se lo ra bang HINH MEO, thay
      vi bang mot khoi de len header.
      ⚠ Chinh vi khoa cung nen `src` va cap width/height tren the PHAI DI DOI NHAU. */
    .footer-logos img {
        display: block;
        width: auto;
        height: 40px;
    }

        .footer-logos img:last-child {
            height: 42px;
        }

/* 🔴 LUOI LINK KHONG DUNG BREAKPOINT (uu tien cua L2 — xem
      tài liệu nội bộ va tien le ghi chú nội bộ của Designer muc 3.6).
      `auto-fit` + `minmax` cho 4 nhom tu rung xuong 2 roi 1 theo BE RONG THAT con
      lai, khong phai theo mot moc viewport doan mo.
   
      🔺 LICH SU SAN: 190 (B82) -> 240 (B83) -> 190 lai o B86.
      B83 nang len 240 vi noi dung doi: cot "Tin tuc" thay bang cot "Chinh sach", ma
      chuoi dai nhat cua footer nay la "Bảo vệ và xử lý dữ liệu cá nhân (Khách hàng)"
      (node 978:13498, do 344px) — duoi 240 no vo dong trong khi 3 cot kia con 1 dong.
      B86 ha lai ve 190 theo yeu cau nguoi dung: giu DUNG 4 COT xuong toi 1024.
   
      📌 190 KHONG phai so tron cho dep — no la so LON NHAT con giu duoc 4 cot o 1025:
      o do luoi link duoc 865px, can 4F + 3×32 <= 865 -> F <= 192.
   
      📌 DA DO CAI GIA TRUOC KHI HA. Be rong `max-content` cua 21 link: ha 240 -> 190
      lam so link vo dong tang 2 -> 6 / 21. Bon link moi vo:
         237  Bảo vệ và xử lý dữ liệu cá nhân
         223  Vận hành lưu trú & đặt phòng
         216  Tài chính, nhân sự & quản trị
         201  Chuỗi cung ứng & hậu cần
      ⚠ Ha tiep xuong 180 CUNG VAN 6 link vo — tuc 190 nam dung cho re nhat: doi duoc
      cot thu 4 ma khong vo them dong nao so voi 200. Muon bot vo dong thi phai rut
      NGAN CHU, khong phai nang san (nang san la mat cot thu 4).
   
      📌 San nay KHONG lien quan toi moc xep doc cua `.footer-top` (1024 tu B85) —
      luoi link khong nam trong hang 2 cot nua, do la thay doi cua B83.
      `min(190px, 100%)` la BAT BUOC, khong duoc de tran 190 tron: o mobile 335 tru
      dem thi o van giu 190 -> tran ngang. Cung bay da ghi o ghi chú nội bộ của Designer muc 3.6. */
.footer-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: var(--web-space-12) var(--web-space-8);
}

/* 🪤 KHONG khai `height: 100%` o day — da thu va no PHAN TAC DUNG.
      `align-items: stretch` (mac dinh) chi keo gian o luoi khi kich thuoc ngang truc
      la `auto`. Dat `height: 100%` la TU BO quyen duoc stretch, roi chinh 100% do
      khong phan giai duoc (o luoi chua co chieu cao xac dinh) nen roi ve `auto`.
      Do that: o ban do cao 190 trong khi cot thuong hieu 410 — tuc dong "cho no cao
      bang" lai la dong lam no khong cao bang. De `auto` thi stretch tu lo. */
.footer-map {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-4);
}

.footer-map-addr {
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    color: var(--web-gray-700);
}

    .footer-map-addr b {
        font-weight: 600;
    }

.footer-map-frame {
    flex: 1;
    overflow: hidden;
    background: var(--web-gray-100);
}

    .footer-map-frame iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
    }

.footer-contact-row {
    display: grid;
    grid-template-columns: max-content minmax(var(--web-space-6), 96px) max-content;
    row-gap: var(--web-space-8);
}

.footer-dept {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    row-gap: var(--web-space-4);
}

    .footer-dept > .footer-label {
        grid-column: 1 / -1;
    }

.footer-dept-phones {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--web-space-4);
}

.footer-dept-email {
    grid-column: 3;
}

.footer-phone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-phone-owner {
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    font-weight: 400;
    color: var(--web-gray-600);
}

.footer-link--strong {
    font-weight: 600;
}

.footer-legal-info {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-2);
}

.footer-legal-name {
    font-size: clamp(var(--web-text-lg), calc(0.7117vw + 9.46px), var(--web-text-xl));
    line-height: 1.5;
    font-weight: 700;
    color: var(--web-gray-900);
}

.footer-legal-en {
    display: block;
    font-weight: 600;
}

.footer-legal-line {
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    font-weight: 500;
    color: var(--web-gray-700);
}

.footer-block {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-4);
}

.footer-label {
    font-size: var(--web-text-sm);
    line-height: var(--web-text-sm-lh);
    font-weight: 500;
    color: var(--web-gray-600);
}

.footer-brand .footer-social-groups {
    gap: var(--web-space-8);
}

.footer-text-list {
    display: flex;
    flex-direction: column;
    gap: var(--web-space-3);
}

.footer-link,
.footer-address {
    font-size: var(--web-text-md);
    line-height: var(--web-text-md-lh);
    font-weight: 500;
    color: var(--web-gray-700);
}

.footer-link {
    display: block;
    transition: color var(--web-ease);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .footer-link:hover {
        color: var(--web-accent);
    }
}

.footer-social-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 96px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .footer-social a {
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        outline: 1px solid rgba(0, 0, 0, .25);
        outline-offset: -1px;
        transition: background var(--web-ease), outline-color var(--web-ease), transform var(--web-ease);
    }

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .footer-social a:hover {
        background: var(--web-accent-50);
        outline-color: var(--web-accent);
        transform: translateY(-2px);
    }
}

.footer-social img {
    width: 100%;
    height: 100%;
    display: block;
}

.footer-social a.is-missing {
    display: grid;
    place-items: center;
    border: 1px dashed var(--web-gray-300);
    color: var(--web-gray-400);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .footer-social a.is-missing:hover {
        background: var(--web-gray-100);
    }
}

.footer-divider {
    margin: 0 calc(var(--footer-pad) * -1);
    border: 0;
    border-top: 1px solid var(--web-gray-300);
}

/* 🔴 CHỪA CHỖ CHO CỤM NÚT LIÊN HỆ NỔI — số đo, không phải phòng xa.
      `.contact-fab` là `position: fixed` ở góc dưới-phải, nên khi Designer cuộn
      HẾT trang nó đáp xuống đúng hàng đáy footer. Đo ở 6 viewport (B83):
          1920 · 1536 · 1366   không chồng
          1600                 chồng 26px lên ô chọn ngôn ngữ
          1024                 chồng  4px
           375                 chồng 53px lên cụm link pháp lý
      Không chồng ở 1920 chỉ vì hàng đáy ngắn hơn màn — tức đây là lỗi PHỤ THUỘC
      BỀ RỘNG, loại chỉ hiện ở vài viewport nên rất dễ lọt (đúng kiểu R3).
      92px = dải ngang cụm nút thật (nút 52 + lề phải 12 + biên an toàn cho mascot).
      ⚠ Đây KHÔNG phải chỗ chồng lấn đã duyệt ở HANDOFF mục 14.7 (fab đè cột phụ
      trang Tin 33px). Chỗ đó ĐÃ ĐO ĐÃ DUYỆT, đừng "sửa" theo. */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--web-space-3) var(--web-space-8);
    padding-right: 92px;
}

.footer-bottom-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--web-space-3) var(--web-space-6);
    margin-left: auto;
}

.footer-lang {
    display: inline-flex;
    align-items: center;
    gap: var(--web-space-2);
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--web-gray-300);
    border-radius: var(--web-radius-pill);
    font: inherit;
    font-size: var(--web-text-xs);
    line-height: var(--web-text-xs-lh);
    color: var(--web-gray-600);
    cursor: default;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--web-space-2) var(--web-space-4);
    font-size: var(--web-text-xs);
    line-height: 1.5;
    color: var(--web-gray-600);
}

    .footer-legal a {
        transition: color var(--web-ease);
    }

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    .footer-legal a:hover {
        color: var(--web-accent);
        text-decoration: underline;
    }
}

.footer-copyright {
    font-size: var(--web-text-xs);
    line-height: 1.5;
    color: var(--web-gray-600);
}

@media (max-width: 1200px) {
    .header-nav {
        gap: var(--web-space-6);
    }
}

@media (max-width: 1023px) {
    .footer-top {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--web-space-12);
    }

    /* 🔴 TRA LAI `aspect-ratio` — BAT BUOC, khong phai tuy chon, va PHAI DI CUNG
          MOC voi rule ngay tren.
          Tren moc nay khung map lay chieu cao tu O ANH EM (cot thuong hieu) qua
          `stretch` + `flex: 1`. Duoi moc nay luoi ve 1 COT nen khong con o anh em nao;
          `flex: 1` trong mot cot chi co minh no ra ĐUNG 0 -> ban do BIEN MAT hoan toan,
          va bien mat IM LANG (khong loi console, `getComputedStyle` van tra ve hop le,
          chi co chieu cao = 0). Ti le 806/464 lay tu node `978:13460`.
          ⚠ Doi moc o rule tren ma quen rule nay la ban do bien mat o dung dai giua. */
    .footer-map-frame {
        flex: none;
        aspect-ratio: 806 / 464;
    }
}

@media (max-width: 992px) {
    .footer-social-groups {
        gap: var(--web-space-12);
    }
}

@media (max-width: 1100px) {
    .nav-toggle {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        order: 3;
        background: none;
        border: 1px solid var(--web-gray-300);
        border-radius: var(--web-radius-sm);
        font-size: 20px;
        cursor: pointer;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: var(--web-header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin: 0;
        padding: var(--web-space-4) 20px var(--web-space-6);
        background: #fff;
        border-bottom: 1px solid var(--web-gray-100);
        box-shadow: var(--web-shadow-lg);
        max-height: calc(100vh - var(--web-header-h));
        overflow-y: auto;
    }

    .header-fixed[data-nav-open="true"] .header-nav {
        display: flex;
    }

    .header-nav .nav-item {
        padding: 12px 0;
        width: 100%;
    }

        .header-nav .nav-item::after {
            left: -12px;
            right: auto;
            top: 12px;
            bottom: 12px;
            width: 2px;
            height: auto;
            transform: scaleY(var(--nav-mark));
        }

    .nav-dropdown {
        width: 100%;
        flex-wrap: wrap;
    }

        .nav-dropdown > .nav-item {
            width: auto;
            flex: 1 1 auto;
        }

    .nav-menu {
        position: static;
        display: block;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 12px;
        width: 100%;
    }

        .nav-menu::before {
            content: none;
        }

    .nav-chevron-btn {
        margin-left: auto;
        padding: 12px 0;
    }
}

@media (max-width: 768px) {
    .header-fixed {
        padding: 16px 0;
    }

    .header-container {
        gap: var(--web-space-3);
    }

    .header-fixed .header-cta {
        order: 2;
        margin-left: auto;
        padding: 10px 16px;
        font-size: var(--web-text-sm);
        line-height: 20px;
        border-radius: 12px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--web-space-4);
    }

    .footer-bottom-right {
        margin-left: 0;
    }

    .footer-top {
        gap: var(--web-space-8);
    }

    .footer-brand {
        gap: var(--web-space-6);
    }

    .footer-bottom {
        padding-right: 76px;
    }
}

@media (max-width: 576px) {
    .footer-contact-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer-dept-email {
        grid-column: 1;
    }

    .footer-social-groups {
        gap: var(--web-space-8);
    }
}