/* V32 — Font tự lưu (self-host, CSP font-src 'self'): Inter (chữ thân + tiêu đề) và Lora (chữ thương hiệu), có bảng chữ tiếng Việt.
   Mỗi subset một file woff2 + unicode-range: trình duyệt chỉ tải file nào trang thực sự dùng. Dải latin-ext đã trừ các ký tự tiếng Việt (ă đ ĩ ũ ơ ư...) vì subset vietnamese đã có, để trang tiếng Việt không phải tải thêm 85 KB. Giấy phép OFL: fonts/LICENSE-*.txt */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-0101, U+0104-010F, U+0112-0127, U+012A-0167, U+016A-019F, U+01A2-01AE, U+01B1-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EFA-1EFF, U+2020, U+20A0-20AA, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("fonts/lora-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Lora";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("fonts/lora-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* màu thương hiệu (giữ nguyên của demo) */
    --red: #ef1b23;
    --red-dark: #c9141b;
    --red-text: #cc1119; /* đỏ dùng cho CHỮ nhỏ trên nền sáng: tương phản 5.7:1 (đỏ thương hiệu chỉ 4.3:1) */
    --blue: #0d3e7e;
    --blue-dark: #071f47;
    --ink: #152033;
    --muted: #5a6577; /* 5.9:1 trên trắng, 5.5:1 trên --soft */
    --line: #e7ebf1;
    --soft: #f6f8fb;
    --white: #fff;

    /* chữ */
    --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Lora", Georgia, "Times New Roman", serif;
    --fs-2xs: 12px;
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-md: 15px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-h3: clamp(22px, 1.4vw + 17px, 28px);
    --fs-h2: clamp(26px, 2.2vw + 16px, 40px);
    --fs-h1: clamp(30px, 3vw + 18px, 52px);
    --fs-display: clamp(34px, 4.6vw + 12px, 72px);
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi: 600;
    --fw-bold: 700;
    --fw-black: 800;
    --lh-heading: 1.25; /* đủ chỗ cho dấu chồng của tiếng Việt (ế, ặ, ữ...) */
    --lh-snug: 1.5;
    --lh-body: 1.65;
    --measure: 70ch; /* độ rộng dòng tối đa cho đoạn văn dài */

    /* khoảng cách (px) */
    --sp-4: 4px;
    --sp-8: 8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-48: 48px;
    --sp-64: 64px;

    /* bo góc, bóng */
    --r-sm: 12px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 24px;
    --r-pill: 999px;
    --radius: 24px;
    --shadow: 0 18px 50px rgba(12,31,71,.12);
    --shadow-sm: 0 8px 26px rgba(12,31,71,.08);
    --focus: 0 0 0 3px #fff, 0 0 0 5px var(--blue);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: min(1460px,calc(100% - 32px));
    margin: auto;
}

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.nav {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
    margin-right: 4px;
}

.brand img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50%;
}

.brandText strong {
    display: block;
    color: var(--red-text);
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    line-height: var(--lh-heading);
    letter-spacing: .1px;
    white-space: nowrap;
}

.brandText small {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-2xs);
    line-height: var(--lh-heading);
    color: #5f6b7d;
    white-space: nowrap;
}

.menu {
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    white-space: nowrap;
    flex: 1;
}

.menu a {
    padding: 31px 10px;
    position: relative;
    white-space: nowrap;
    line-height: 1;
}

.menu a:hover,
.menu a.active {
    color: var(--red-text);
}

.menu a.active:after {
    content: "";
    position: absolute;
    height: 3px;
    border-radius: 3px;
    left: 10px;
    right: 10px;
    bottom: 16px;
    background: var(--red);
}

/* Menu cấp 2: khối thả xuống dưới mục cha, mở khi rê chuột hoặc Tab tới (focus-within) */
.menu-cha {
    position: relative;
    display: flex;
    align-items: center;
}

.menu-cha > a {
    padding-right: 22px;
}

.menu-cha > a:before {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .7;
}

.menu-mo-con {
    display: none;
}

.menu-con {
    display: none;
    position: absolute;
    top: calc(100% - 12px);
    left: 0;
    z-index: 60;
    min-width: 230px;
    padding: var(--sp-8);
    flex-direction: column;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: var(--r-md);
    box-shadow: 0 18px 40px rgba(12, 31, 71, .14);
    white-space: nowrap;
}

.menu-cha:hover > .menu-con,
.menu-cha:focus-within > .menu-con {
    display: flex;
}

.menu .menu-con a {
    padding: 11px 14px;
    border-radius: var(--r-sm);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.menu .menu-con a:hover,
.menu .menu-con a.active {
    background: #f3f6fb;
    color: var(--red-text);
}

.menu .menu-con a.active:after {
    display: none;
}

.navActions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Nút kính lúp dẫn tới /tim-kiem (có ở cả desktop lẫn điện thoại) */
.timBtn {
    width: 44px;
    height: 44px;
    padding: 0;
}

.kinhLup {
    position: relative;
    display: block;
    flex: none;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    margin: -3px 3px 0 -3px;
    border: 2.5px solid currentColor;
    border-radius: 50%;
}

.kinhLup:after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 2.5px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(-45deg);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--r-pill);
    padding: 12px 18px;
    font-weight: var(--fw-black);
    cursor: pointer;
}

.btn.red {
    background: var(--red);
    color: #fff;
    box-shadow: 0 10px 22px rgba(239,27,35,.2);
}

.btn.blue {
    background: var(--blue);
    color: #fff;
}

.btn.white {
    background: #fff;
    color: var(--blue-dark);
}

.btn.soft {
    background: #f1f4f8;
    color: var(--blue);
}

.mobileBtn {
    display: none;
}

.hero {
    min-height: 635px;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    /* lớp phủ đậm ở bên trái (chữ trắng đạt AA), trong dần sang phải để lộ ảnh; banner admin đặt --hero-anh */
    background: linear-gradient(90deg,rgba(7,31,71,.95) 0,rgba(7,31,71,.92) 44%,rgba(7,31,71,.5) 66%,rgba(7,31,71,0) 100%), var(--hero-anh, url('img/hero.jpg')) 70% 40%/cover no-repeat;
}

.hero:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 140px;
    background: linear-gradient(transparent,rgba(0,0,0,.18));
}

.hero .content {
    position: relative;
    z-index: 2;
    padding: 90px 0 140px;
}

.hero-chu {
    max-width: 600px;
    text-align: left;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.eyebrow:before {
    content: "";
    width: 28px;
    height: 3px;
    background: var(--red);
    border-radius: 3px;
}

.pageHero h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-heading);
    letter-spacing: -.02em;
    margin: 18px 0;
}

.hero h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    letter-spacing: -.02em;
    margin: 18px 0;
}

.hero p {
    max-width: 560px;
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: #edf3ff;
}

/* màn hẹp: khối chữ chiếm gần hết bề ngang nên phủ đậm đều thay vì chuyển màu ngang */
@media (max-width: 1100px) {
    .hero {
        background: linear-gradient(180deg,rgba(7,31,71,.84),rgba(7,31,71,.92)), var(--hero-anh, url('img/hero.jpg')) center/cover no-repeat;
    }
    .hero .content {
        padding-bottom: 250px;
    }
}

@media (max-width: 767px) {
    .hero.co-anh-mobile {
        background: linear-gradient(180deg,rgba(7,31,71,.84),rgba(7,31,71,.92)), var(--hero-anh-mobile) center/cover no-repeat;
    }
}

.heroActions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.stats {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: min(1460px,calc(100% - 32px));
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.stat {
    background: rgba(255,255,255,.97);
    color: var(--ink);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    display: flex;
    gap: 14px;
    align-items: center;
    box-shadow: var(--shadow);
}

.stat .icon {
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: #fff0f1;
    color: var(--red-text);
    display: grid;
    place-items: center;
    font-size: var(--fs-xl);
}

.stat b {
    display: block;
    font-size: var(--fs-2xl);
}

.stat span {
    font-size: var(--fs-xs);
    color: var(--muted);
}

section {
    padding: 82px 0;
}

.sectionHead {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    margin-bottom: 32px;
}

.sectionHead h2 {
    font-size: var(--fs-h2);
    margin: 6px 0 0;
    letter-spacing: -.015em;
}

.sectionHead p {
    max-width: 600px;
    color: var(--muted);
    line-height: var(--lh-body);
}

.kicker {
    color: var(--red-text);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.cards4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.visualCard {
    min-height: 310px;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    color: #fff;
    box-shadow: var(--shadow);
    background: #ddd;
    transition: transform .25s, box-shadow .25s;
}

.visualCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(7,31,71,.22);
}

.visualCard img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.visualCard:hover img {
    transform: scale(1.05);
}

.visualCard:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(4,17,38,.9),rgba(4,17,38,.04) 70%);
}

.visualCard .body {
    position: absolute;
    z-index: 2;
    left: 20px;
    right: 20px;
    bottom: 18px;
}

.visualCard h3 {
    font-size: var(--fs-xl);
    margin: 0 0 8px;
}

.visualCard p {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: #e6edf8;
    margin: 0;
}

.softSection {
    background: var(--soft);
}

.twoCol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

.imagePanel {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff;
}

.imagePanel img {
    width: 100%;
    min-height: 390px;
    object-fit: cover;
}

/* Ảnh dải ngang (4 mặt tiền): xếp dưới chữ, ảnh giữ đúng tỉ lệ gốc, không kéo méo */
.twoCol.dang-doc {
    grid-template-columns: 1fr;
    gap: 32px;
}

.twoCol.dang-doc .copy {
    order: -1;
    max-width: 760px;
}

.imagePanel.anh-dai {
    padding: 10px;
    border: 1px solid var(--line);
}

.imagePanel.anh-dai img {
    display: block;
    min-height: 0;
    height: auto;
    aspect-ratio: 1014 / 176;
    border-radius: var(--r-md);
}

.copy h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    margin: 8px 0 18px;
}

.copy p {
    color: var(--muted);
    line-height: var(--lh-body);
}

.pillRow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.pill {
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    padding: 9px 12px;
    border-radius: var(--r-pill);
    background: #eef3fb;
    color: var(--blue);
}

.branchGrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
}

.branchCard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: .2s;
}

.branchCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.branchCard {
    display: flex;
    flex-direction: column;
}

/* Ảnh riêng của chi nhánh (inline style) hoặc khối gradient thương hiệu in tên ngắn, xoay 4 màu theo id */
.branchCard .photo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 170px;
    padding: 16px;
    overflow: hidden;
    color: #fff;
    background: var(--blue) center/cover no-repeat;
}

.branchCard .photo.mau-0 { background-image: linear-gradient(135deg,var(--blue-dark),var(--blue)); }
.branchCard .photo.mau-1 { background-image: linear-gradient(135deg,var(--red-dark),#e0343b 70%,#f0575c); }
.branchCard .photo.mau-2 { background-image: linear-gradient(135deg,#0a2f63,#2a6bb8); }
.branchCard .photo.mau-3 { background-image: linear-gradient(135deg,#7d0d13,var(--blue) 90%); }

.branchCard .photo[class*="mau-"]:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(255,255,255,.18) 1.4px,transparent 1.6px) 0 0/20px 20px;
    -webkit-mask-image: linear-gradient(120deg,transparent 30%,#000);
    mask-image: linear-gradient(120deg,transparent 30%,#000);
}

.branchCard .photo[class*="mau-"]:after {
    content: "";
    position: absolute;
    right: -46px;
    top: -46px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25);
    box-shadow: 0 0 0 20px rgba(255,255,255,.06);
}

.branchCard .photoTen {
    position: relative;
    z-index: 1;
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.branchCard .photoKv {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    letter-spacing: .4px;
    text-transform: uppercase;
    opacity: .92;
}

.branchCard .pill.khuVuc {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    padding: 6px 11px;
    background: rgba(255,255,255,.94);
}

.branchCard .body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px;
}

.branchCard .body .textLink {
    margin-top: auto;
    padding-top: 4px;
}

.branchCard .gioMo {
    color: var(--ink);
}

.branchCard h3 {
    font-size: var(--fs-lg);
    margin: 0 0 7px;
}

.branchCard p {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin: 0 0 10px;
}

.textLink {
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--red-text);
}

.mapMock {
    position: relative;
    min-height: 480px;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: radial-gradient(ellipse 160px 90px at 18% 72%,rgba(170,214,160,.7),transparent),radial-gradient(ellipse 220px 120px at 82% 24%,rgba(170,214,160,.55),transparent),radial-gradient(ellipse 260px 70px at 60% 85%,rgba(150,200,235,.75),transparent),linear-gradient(135deg,#dfeff9,#f0f5e9 45%,#eee9e2);
    box-shadow: var(--shadow);
}

/* Panel thay bản đồ khi chưa chi nhánh nào có toạ độ; Leaflet dựng xong thì ẩn */
.banDoCho {
    position: absolute;
    z-index: 1;
    top: 46%;
    left: 50%;
    width: min(380px,calc(100% - 40px));
    transform: translate(-50%,-50%);
    padding: 26px 22px 22px;
    text-align: center;
    background: rgba(255,255,255,.92);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
}

.banDoCho strong {
    display: block;
    font-size: var(--fs-xl);
    color: var(--blue);
}

.banDoCho p {
    margin: 6px 0 14px;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--muted);
}

.banDoGhim {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 14px;
    border-radius: 50% 50% 50% 0;
    background: var(--red);
    transform: rotate(-45deg);
    box-shadow: 0 6px 12px rgba(239,27,35,.35);
}

.banDoGhim:after {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
}

.chipKhuVuc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.chipKhuVuc .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border-radius: var(--r-pill);
    background: #eef3fb;
    color: var(--blue);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    transition: .2s;
}

.chipKhuVuc .chip b {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--red-text);
    color: #fff;
    font-size: var(--fs-xs);
    text-align: center;
}

.chipKhuVuc .chip:hover,
.chipKhuVuc .chip.dang-chon {
    background: var(--blue);
    color: #fff;
}

.chipKhuVuc .chip:focus-visible {
    outline: 3px solid var(--red-text);
    outline-offset: 2px;
}

#ban-do-chi-nhanh.co-leaflet .banDoCho {
    display: none;
}

.mapMock:before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(25deg,transparent 0 38px,rgba(255,255,255,.85) 39px 45px),repeating-linear-gradient(115deg,transparent 0 58px,rgba(255,255,255,.78) 59px 65px);
    opacity: .75;
}

.pin {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    background: var(--red);
    transform: rotate(-45deg);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.pin:after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    left: 9px;
    top: 9px;
}

.p1 {
    left: 22%;
    top: 22%;
}

.p2 {
    left: 42%;
    top: 32%;
}

.p3 {
    left: 60%;
    top: 20%;
}

.p4 {
    left: 68%;
    top: 53%;
}

.p5 {
    left: 35%;
    top: 62%;
}

.p6 {
    left: 50%;
    top: 48%;
}

.mapLabel {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;
    background: #fff;
    border-radius: var(--r-md);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}

.mapLabel b {
    display: block;
    color: var(--blue);
}

/* Màn hẹp chưa có bản đồ thật: khung "Bản đồ đang cập nhật" đã có chip đếm, nhãn góc sẽ đè lên nên ẩn đi */
@media (max-width: 768px) {
    #ban-do-chi-nhanh:not(.co-leaflet) .mapLabel {
        display: none;
    }
}

.pageHero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(210px, 22vw, 290px);
    padding: 78px 0 70px;
    background: linear-gradient(135deg,var(--blue-dark),var(--blue));
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.pageHero .container {
    position: relative;
    z-index: 1;
}

.pageHero h1 {
    font-size: var(--fs-h1);
    margin: 12px 0;
}

/* Hoạ tiết nền đầu trang con: chấm lưới, mảng đỏ bo tròn ở góc, vòng tròn mảnh, ảnh mờ dần ở nửa phải */
.heroNen {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.heroNen > span {
    position: absolute;
    display: block;
}

.heroLuoi {
    inset: 0;
    z-index: 2;
    background: radial-gradient(rgba(255,255,255,.2) 1.6px,transparent 1.8px) 0 0/26px 26px;
    -webkit-mask-image: linear-gradient(100deg,transparent 35%,#000 100%);
    mask-image: linear-gradient(100deg,transparent 35%,#000 100%);
}

.heroManhDo {
    z-index: 3;
    top: -150px;
    right: -80px;
    width: 340px;
    height: 340px;
    border-radius: 50% 50% 50% 120px;
    background: linear-gradient(135deg,var(--red),var(--red-dark));
    box-shadow: 0 30px 60px rgba(0,0,0,.25);
}

.heroManhDo:after {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -40px;
    width: 120px;
    height: 120px;
    border-radius: 36px;
    background: rgba(255,255,255,.1);
    transform: rotate(18deg);
}

.heroVong {
    z-index: 2;
    right: 12%;
    bottom: -250px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.18);
    box-shadow: 0 0 0 36px rgba(255,255,255,.04);
}

.heroAnh {
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48%;
    background-size: cover;
    background-position: 45% 50%;
    background-repeat: no-repeat;
    opacity: .5;
    transform: scale(1.12);
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 75%);
    mask-image: linear-gradient(90deg,transparent,#000 75%);
}

.heroAnh.anh-chung { background-image: url('img/hero.jpg'); }
.heroAnh.anh-chi-nhanh { background-image: url('img/branches-hero.jpg'); }
.heroAnh.anh-tuyen-dung { background-image: url('img/career.jpg'); }
.heroAnh.anh-tin-tuc { background-image: url('img/news-strip.jpg'); }
.heroAnh.anh-lien-he { background-image: url('img/staff.jpg'); }
.heroAnh.anh-academy { background-image: url('img/academy.jpg'); }
.heroAnh.anh-noi-bo { background-image: url('img/internal.jpg'); }

@media (max-width: 768px) {
    /* Màn hẹp chữ chiếm cả chiều ngang: mảng đỏ thu nhỏ, nép góc để không đè lên tiêu đề */
    .heroManhDo {
        top: -150px;
        right: -150px;
        width: 220px;
        height: 220px;
        opacity: .85;
    }

    .heroAnh {
        width: 100%;
        opacity: .22;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .heroVong {
        display: none;
    }
}

.pageHero p {
    max-width: 760px;
    line-height: var(--lh-body);
    color: #dbe7fb;
}

.breadcrumb {
    font-size: var(--fs-xs);
    color: #b8c9e7;
}

.timeline {
    position: relative;
    display: grid;
    gap: 28px;
    padding: 6px 0;
}

/* Trục dọc ở giữa; điện thoại dời sang trái */
.timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: linear-gradient(180deg,var(--red),var(--blue));
    opacity: .35;
}

.timelineItem {
    position: relative;
    display: grid;
    gap: 8px;
    width: calc(50% - 40px);
    padding: 22px 24px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
}

.timelineItem:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.timelineItem:nth-child(even) {
    margin-left: auto;
}

/* Chấm mốc nằm trên trục */
.timelineItem:before {
    content: "";
    position: absolute;
    top: 28px;
    right: -49px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red);
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--red);
}

.timelineItem:nth-child(even):before {
    right: auto;
    left: -49px;
}

.timelineItem strong {
    justify-self: start;
    padding: 5px 14px;
    border-radius: var(--r-pill);
    background: #fff0f1;
    color: var(--red-text);
    font-size: var(--fs-xl);
    line-height: 1.3;
}

.timelineItem h3 {
    margin: 0 0 4px;
}

.timelineItem p {
    margin: 0;
    color: var(--muted);
    line-height: var(--lh-body);
}

@media (max-width: 860px) {
    .timeline:before {
        left: 11px;
        margin-left: 0;
    }

    .timelineItem,
    .timelineItem:nth-child(even) {
        width: auto;
        margin-left: 36px;
    }

    .timelineItem:before,
    .timelineItem:nth-child(even):before {
        right: auto;
        left: -34px;
    }
}

.values {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}

.value {
    padding: 24px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: #fff;
}

.value .num {
    font-size: var(--fs-h2);
    color: var(--red-text);
    font-weight: var(--fw-black);
}

.value h3 {
    margin: 10px 0 8px;
}

.value p {
    margin: 0;
    color: var(--muted);
    line-height: var(--lh-body);
    font-size: var(--fs-md);
}

/* Ô icon tròn: Tầm nhìn / Sứ mệnh / Phương châm (ký tự, không svg) */
.dinh-huong .value {
    position: relative;
    padding: 30px 28px;
    background: linear-gradient(180deg,#fff,#f7f9fc);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.dinh-huong .value:hover,
.gia-tri .value:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: #d6dde8;
}

.dinh-huong .value .num {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff0f1;
    color: var(--red-text);
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 0 0 6px #fff8f8;
}

.dinh-huong .value:nth-child(2) .num {
    background: #eef3fb;
    color: var(--blue);
    box-shadow: 0 0 0 6px #f6f9fd;
}

.dinh-huong .value h3 {
    margin: 18px 0 8px;
    font-size: var(--fs-xl);
}

/* Giá trị cốt lõi: số thứ tự + icon góc phải */
.gia-tri .value {
    position: relative;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.gia-tri .value:before {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef3fb;
    color: var(--blue);
    font-size: 20px;
    content: "\2605\FE0E";
}

.gia-tri .value:nth-child(2):before { content: "\2665\FE0E"; }
.gia-tri .value:nth-child(3):before { content: "\2726\FE0E"; }
.gia-tri .value:nth-child(4):before { content: "\25C6\FE0E"; }
.gia-tri .value:nth-child(5):before { content: "\2714\FE0E"; }
.gia-tri .value:nth-child(6):before { content: "\2600\FE0E"; }
.gia-tri .value:nth-child(n+7):before { content: "\2605\FE0E"; }

.leaders {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.leader {
    padding: 28px 24px;
    text-align: center;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg,#fff,#f7f9fc);
    border: 1px solid var(--line);
    transition: transform .25s, box-shadow .25s;
}

.leader:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.avatar {
    width: 88px;
    height: 88px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,var(--blue),var(--blue-dark) 70%,var(--red-dark));
    box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--line);
    color: #fff;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    letter-spacing: .5px;
}

.leader h3 {
    margin: 18px 0 4px;
    font-size: var(--fs-xl);
}

.leader p {
    margin: 0 0 8px;
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: var(--lh-snug);
}

.leader p strong {
    color: var(--red-text);
}

/* Đoạn mô tả (sau chức danh) nằm trong ô riêng */
.leader p + p {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--soft);
    text-align: left;
}

.newsGrid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}

.newsCard {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #fff;
    transition: transform .25s, box-shadow .25s;
}

.newsCard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.newsCard .thumb {
    height: 210px;
    background: url('img/news-strip.jpg') center/cover no-repeat;
}

.newsCard .body {
    padding: 17px;
}

.newsCard small {
    color: var(--red-text);
    font-weight: var(--fw-black);
}

.newsCard h3 {
    margin: 8px 0;
    font-size: var(--fs-lg);
}

.newsCard p {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.jobs {
    display: grid;
    gap: 12px;
}

.job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.job:hover {
    transform: translateY(-2px);
    border-color: #d6dde8;
    box-shadow: var(--shadow-sm);
}

/* Ô icon đầu dòng (ký tự) */
.job:before {
    content: "\2691\FE0E";
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef3fb;
    color: var(--blue);
    font-size: 18px;
}

.job > div:first-child {
    flex: 1;
    min-width: 0;
}

.job b {
    display: block;
}

.job small {
    color: var(--muted);
}

.tag {
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--red-text);
    background: #fff0f1;
    padding: 8px 10px;
    border-radius: var(--r-pill);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
}

.step {
    position: relative;
    padding: 22px;
    border-radius: var(--r-lg);
    background: #fff;
    border: 1px solid var(--line);
}

/* Đường kẻ nối ô số của bước này sang ô số của bước kế (chỉ khi đủ 4 cột) */
.step:not(:last-child):after {
    content: "";
    position: absolute;
    top: 40px;
    left: 68px;
    width: calc(100% - 40px);
    border-top: 2px dashed #c9d3e2;
}

.step .n {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 5px #fff0f1;
}

.step .n {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: var(--fw-black);
}

.form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form input,
.form select,
.form textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font: inherit;
}

.form textarea {
    grid-column: 1/-1;
    min-height: 120px;
}

.form .full {
    grid-column: 1/-1;
}

.portalHero {
    min-height: 520px;
    display: flex;
    align-items: center;
    color: #fff;
    /* nền gradient thương hiệu + họa tiết CSS (không dùng ảnh chụp) */
    background: radial-gradient(circle at 88% 12%,rgba(239,27,35,.28),transparent 34%),radial-gradient(circle at 70% 110%,rgba(255,255,255,.12),transparent 40%),repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 28px),linear-gradient(105deg,#071f47 0%,#0d3e7e 100%);
}

.portalHero.internal {
    background: radial-gradient(circle at 88% 12%,rgba(239,27,35,.22),transparent 34%),radial-gradient(circle at 70% 110%,rgba(255,255,255,.1),transparent 40%),repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 28px),linear-gradient(105deg,#071426 0%,#123a73 100%);
}

/* Chữ hero Internal (partial Internal::partials.hero): trước đây style= inline ở hai trang */
.portalHero.internal .copy h2 {
    font-size: 52px;
    color: var(--white);
}

.portalHero.internal .copy p {
    color: #dbe7fb;
}

.loginPanel {
    width: min(460px,100%);
    margin-left: auto;
    background: rgba(255,255,255,.97);
    color: var(--ink);
    padding: 28px;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
}

.loginPanel h2 {
    margin-top: 0;
}

.loginPanel input {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin: 7px 0;
}

.moduleGrid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
}

.module {
    padding: 20px;
    border-radius: var(--r-lg);
    background: #fff;
    border: 1px solid var(--line);
}

.module .icon {
    font-size: var(--fs-h3);
}

.module h3 {
    margin: 10px 0 6px;
}

.module p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: var(--lh-body);
}

.contactGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contactCard {
    padding: 24px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: #fff;
}

.contactCard h3 {
    margin-top: 0;
}

.contactCard p {
    color: var(--muted);
    line-height: var(--lh-body);
}

.contactList {
    display: grid;
    gap: 10px;
}

.contactItem {
    padding: 14px;
    border-radius: var(--r-md);
    background: #f7f9fc;
}

.notice {
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: #fff7e8;
    color: #7a5512;
    font-size: var(--fs-sm);
    border: 1px solid #f5deb1;
}

footer {
    background: #0a172b;
    color: #dce4f0;
    padding: 48px 0 24px;
}

.foot {
    display: grid;
    grid-template-columns: minmax(240px,1.5fr) repeat(auto-fit,minmax(170px,1fr));
    gap: 28px 36px;
}

.footBrand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.footBrand img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 50%;
}

.footBrand strong {
    display: block;
    color: #fff;
    font-family: var(--font-serif);
}

.foot p,
.foot a {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: #aeb9c9;
    display: block;
}

.foot h4 {
    color: #fff;
    margin-top: 0;
}

.foot a:hover {
    color: #fff;
}

/* Cột liên hệ + mạng xã hội trong chân trang */
.footLienHe ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footLienHe li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: #aeb9c9;
}

.footLienHe li em {
    font-style: normal;
}

.footLienHe li > span {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    text-align: center;
    line-height: 26px;
    font-size: var(--fs-xs);
}

.footMxh {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.foot .footMxh a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-weight: var(--fw-black);
    transition: .2s;
}

.foot .footMxh a:hover {
    background: var(--red);
}

.copyright a {
    color: #aeb9c9;
}

.copyright a:hover {
    color: #fff;
    text-decoration: underline;
}

.copyright {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: var(--fs-xs);
    color: #8390a2;
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

@media(max-width:1180px) {
    .menu {
        display: none;
    }
    .navActions {
        margin-left: auto;
    }
    .mobileBtn {
        display: inline-flex;
    }
    .cards4,
    .branchGrid,
    .moduleGrid {
        grid-template-columns: repeat(2,1fr);
    }
    .twoCol {
        grid-template-columns: 1fr;
    }
    .newsGrid {
        grid-template-columns: 1fr 1fr;
    }
    .values,
    .leaders {
        grid-template-columns: 1fr 1fr;
    }
    .steps {
        grid-template-columns: 1fr 1fr;
    }
    .step:after {
        display: none;
    }
    .foot {
        grid-template-columns: 1fr 1fr;
    }
    .brand {
        min-width: auto;
    }
}

@media(max-width:680px) {
    .container {
        width: min(100% - 24px,1460px);
    }
    .nav {
        min-height: 72px;
    }
    .brand img {
        width: 44px;
        height: 44px;
    }
    .brandText strong {
        font-size: var(--fs-sm);
    }
    .brandText small {
        display: none;
    }
    .navActions .soft {
        display: none;
    }
    .hero {
        min-height: 740px;
    }
    .hero .content {
        padding: 56px 0 320px;
    }
    .hero h1 {
        font-size: var(--fs-h2);
    }
    .hero p {
        font-size: var(--fs-base);
    }
    .stats {
        grid-template-columns: 1fr 1fr;
        bottom: 18px;
    }
    .stat {
        padding: 12px;
    }
    .stat b {
        font-size: var(--fs-lg);
    }
    section {
        padding: 62px 0;
    }
    .sectionHead {
        display: block;
    }
    .sectionHead h2,
    .copy h2 {
        font-size: var(--fs-h3);
    }
    .cards4,
    .branchGrid,
    .newsGrid,
    .values,
    .leaders,
    .steps,
    .moduleGrid,
    .contactGrid,
    .form {
        grid-template-columns: 1fr;
    }
    .foot {
        grid-template-columns: 1fr;
    }
    .copyright {
        display: block;
    }
    .pageHero h1 {
        font-size: var(--fs-h2);
    }
    .portalHero {
        padding: 55px 0;
    }
    .loginPanel {
        margin: 25px 0 0;
    }
    .form textarea,
    .form .full {
        grid-column: auto;
    }
}
/* ===== BACH DANG ACADEMY – CEO DEMO ===== */

.academyHero {
    padding: 76px 0;
    background: radial-gradient(circle at 88% 12%,rgba(239,27,35,.28),transparent 34%),radial-gradient(circle at 70% 110%,rgba(255,255,255,.12),transparent 40%),repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 28px),linear-gradient(105deg,#071f47 0%,#0d3e7e 100%);
    color: #fff;
    overflow: hidden;
}

.academyHeroGrid {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(330px,.75fr);
    gap: 64px;
    align-items: center;
}

.academyHeroCopy h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-heading);
    letter-spacing: -.02em;
    margin: 16px 0 20px;
}

.academyHeroCopy h1 span {
    color: #ff4b50;
}

.academyHeroCopy p {
    max-width: 760px;
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: #dce8fb;
}

.academyTrust {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 26px;
    color: #cbd9ef;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
}

.academyLogin {
    background: rgba(255,255,255,.97);
    color: var(--ink);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: 0 24px 70px rgba(4,17,38,.34);
    position: relative;
}

.academyLogin h2 {
    font-size: var(--fs-h3);
    margin: 7px 0;
}

.academyLogin p {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.academyLogin label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: #586579;
    margin-top: 12px;
}

.academyLogin input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-top: 5px;
    font: inherit;
}

.academyLoginBtn {
    width: 100%;
    margin-top: 16px;
}

.academyLogin small {
    display: block;
    margin-top: 13px;
    color: #5f6b7d;
    line-height: var(--lh-snug);
}

.academyOverview {
    padding: 0;
    background: #fff;
}

.academyStats {
    transform: translateY(-22px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: repeat(4,1fr);
    overflow: hidden;
}

.academyStats div {
    padding: 20px 24px;
    border-right: 1px solid var(--line);
}

.academyStats div:last-child {
    border-right: 0;
}

.academyStats strong {
    display: block;
    font-size: var(--fs-xl);
    color: var(--blue-dark);
}

.academyStats span {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-xs);
    color: var(--muted);
}

.trackGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.trackCard {
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: .2s;
}

.trackCard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.trackVisual {
    height: 205px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg,#eef4fc,#dce9f8);
}

.managerTrack .trackVisual {
    background: linear-gradient(135deg,#fff1f2,#f6dfe2);
}

.trackIcon {
    font-size: var(--fs-display);
    filter: grayscale(.25);
}

.trackTag {
    position: absolute;
    left: 18px;
    top: 18px;
    background: var(--blue-dark);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 8px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    letter-spacing: .5px;
}

.managerTrack .trackTag {
    background: var(--red);
}

.trackBody {
    padding: 22px;
}

.trackBody h3 {
    font-size: var(--fs-2xl);
    margin: 0 0 9px;
}

.trackBody p {
    color: var(--muted);
    line-height: var(--lh-body);
    margin: 0;
}

.trackMeta {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    color: #7b8798;
    font-size: var(--fs-xs);
}

.textButton {
    border: 0;
    background: none;
    padding: 0;
    color: var(--red-text);
    font-weight: var(--fw-black);
    cursor: pointer;
}

.academyHead {
    align-items: center;
}

.academyTabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.academyTab {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue);
    border-radius: var(--r-pill);
    padding: 10px 14px;
    font-weight: var(--fw-black);
    cursor: pointer;
}

.academyTab.active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.courseGrid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.courseCard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: .2s;
}

.courseCard:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.courseThumb {
    height: 175px;
    position: relative;
    background-image: linear-gradient(135deg,rgba(7,31,71,.16),rgba(239,27,35,.15)),url('img/academy.jpg');
    background-size: cover;
    background-position: center;
}

.courseThumb.t2 {
    background-position: 30% 50%;
}

.courseThumb.t3 {
    background-image: linear-gradient(135deg,rgba(7,31,71,.2),rgba(239,27,35,.12)),url('img/staff.jpg');
}

.courseThumb.t4 {
    background-image: linear-gradient(135deg,rgba(7,31,71,.34),rgba(239,27,35,.16)),url('img/internal.jpg');
}

.courseThumb.t5 {
    background-image: linear-gradient(135deg,rgba(7,31,71,.30),rgba(239,27,35,.14)),url('img/branches-hero.jpg');
}

.courseThumb.t6 {
    background-image: linear-gradient(135deg,rgba(7,31,71,.28),rgba(239,27,35,.14)),url('img/career.jpg');
}

.courseRole {
    position: absolute;
    top: 14px;
    left: 14px;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    letter-spacing: .5px;
    padding: 7px 9px;
    border-radius: var(--r-pill);
    background: var(--blue-dark);
}

.courseRole.manager {
    background: var(--red);
}

.playBtn {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.94);
    color: var(--red-text);
    font-size: var(--fs-base);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.courseBody {
    padding: 18px;
}

.courseBody>small {
    font-size: var(--fs-xs);
    color: var(--red-text);
    font-weight: var(--fw-black);
    letter-spacing: .6px;
}

.courseBody h3 {
    font-size: var(--fs-lg);
    margin: 7px 0;
}

.courseBody p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: var(--lh-body);
    min-height: 60px;
}

.courseInfo {
    display: flex;
    gap: 14px;
    font-size: var(--fs-xs);
    color: #768194;
    margin: 12px 0;
}

.progress,
.profileProgress {
    height: 7px;
    background: #edf1f6;
    border-radius: var(--r-pill);
    overflow: hidden;
}

.progress i,
.profileProgress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,var(--blue),var(--red));
    border-radius: var(--r-pill);
}

.courseFoot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: var(--fs-xs);
    color: #7d8795;
}

.courseOpen {
    border: 0;
    background: none;
    color: var(--blue);
    font-weight: var(--fw-black);
    cursor: pointer;
    padding: 5px 0;
}

.academyContentGrid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 22px;
}

.videoLibrary,
.documentLibrary {
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: #fff;
    padding: 20px;
}

.libraryTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.libraryTitle h3 {
    margin: 0;
}

.libraryTitle a,
.libraryTitle span {
    font-size: var(--fs-xs);
    color: var(--red-text);
    font-weight: var(--fw-black);
}

.videoRow,
.docRow {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--line);
    background: #fff;
    padding: 14px 0;
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 14px;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.videoRow:first-of-type,
.docRow:first-of-type {
    border-top: 0;
}

.videoPic {
    height: 58px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,rgba(7,31,71,.25),rgba(239,27,35,.18)),url('img/academy.jpg') center/cover;
}

.videoPic.v2 {
    background-image: linear-gradient(135deg,rgba(7,31,71,.2),rgba(239,27,35,.1)),url('img/staff.jpg');
}

.videoPic.v3 {
    background-image: linear-gradient(135deg,rgba(7,31,71,.2),rgba(239,27,35,.1)),url('img/internal.jpg');
}

.videoPic i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--red-text);
    font-style: normal;
}

.videoRow b,
.docRow b {
    display: block;
    font-size: var(--fs-sm);
}

.videoRow small,
.docRow small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.videoRow em {
    font-style: normal;
    font-size: var(--fs-xs);
    color: var(--red-text);
    background: #fff0f1;
    padding: 6px 8px;
    border-radius: var(--r-pill);
    font-weight: var(--fw-black);
}

.docRow {
    grid-template-columns: 48px 1fr auto;
}

.docIcon {
    height: 46px;
    border-radius: var(--r-sm);
    background: #edf3fb;
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
}

.docRow>i {
    font-style: normal;
    color: var(--red-text);
    font-size: var(--fs-lg);
}

.profileCard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 22px;
}

.profileTop {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.avatarAcademy {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--blue-dark);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: var(--fw-black);
}

.profileTop b {
    display: block;
}

.profileTop span {
    display: block;
    color: var(--muted);
    font-size: var(--fs-xs);
    margin-top: 3px;
}

.profileTop>strong {
    font-size: var(--fs-2xl);
    color: var(--red-text);
}

.profileProgress {
    margin: 18px 0;
}

.profileMetrics {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}

.profileMetrics div {
    background: #f7f9fc;
    border-radius: var(--r-md);
    padding: 14px;
}

.profileMetrics b {
    display: block;
    font-size: var(--fs-xl);
}

.profileMetrics span {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.continueCard {
    margin-top: 14px;
    border-radius: var(--r-lg);
    padding: 20px;
    background: linear-gradient(135deg,var(--blue-dark),var(--blue));
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.continueCard small {
    color: #9fc1ef;
    font-weight: var(--fw-black);
}

.continueCard h3 {
    margin: 6px 0;
}

.continueCard p {
    color: #dbe7fb;
    font-size: var(--fs-xs);
    margin: 0;
}

.noticeCard,
.quizCard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
}

.quizCard h3 {
    margin: 6px 0;
}

.quizCard p {
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: var(--lh-body);
}

.quizCard label {
    display: block;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin: 8px 0;
    font-size: var(--fs-xs);
    cursor: pointer;
}

.quizCard .btn {
    margin-top: 8px;
    width: 100%;
}

.quizResult {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    margin-top: 10px;
    font-weight: var(--fw-black);
}

.quizResult.ok {
    color: #16784a;
}

.quizResult.warn {
    color: #a25a12;
}

.lessonList {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    margin: 20px 0;
}

.lessonList>div {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
    align-items: center;
}

.lessonList>div:first-child {
    border-top: 0;
}

.lessonList b {
    color: var(--red-text);
}

.lessonList span {
    font-weight: var(--fw-black);
    font-size: var(--fs-sm);
}

.lessonList small {
    display: block;
    color: var(--muted);
    font-weight: var(--fw-normal);
    margin-top: 3px;
}

.lessonList i {
    font-style: normal;
    color: var(--blue);
    font-weight: var(--fw-black);
}

@media(max-width:980px) {
    .academyHeroGrid,
    .academyDashboard,
    .academyContentGrid {
        grid-template-columns: 1fr;
    }
    .academyHero {
        padding: 58px 0;
    }
    .academyLogin {
        max-width: 560px;
        margin-top: 10px;
    }
    .academyStats {
        grid-template-columns: 1fr 1fr;
    }
    .academyStats div:nth-child(2) {
        border-right: 0;
    }
    .academyStats div:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }
    .courseGrid {
        grid-template-columns: 1fr 1fr;
    }
    .profileMetrics {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:680px) {
    .academyHeroCopy h1 {
        font-size: var(--fs-h2);
    }
    .academyHeroCopy p {
        font-size: var(--fs-base);
    }
    .academyHeroGrid {
        gap: 34px;
    }
    .academyStats {
        transform: translateY(-10px);
    }
    .trackGrid,
    .courseGrid {
        grid-template-columns: 1fr;
    }
    .academyHead {
        display: block;
    }
    .academyTabs {
        margin-top: 16px;
    }
    .profileTop {
        grid-template-columns: auto 1fr;
    }
    .profileTop>strong {
        grid-column: 1/-1;
    }
    .continueCard {
        display: block;
    }
    .continueCard .btn {
        margin-top: 14px;
    }
    .videoRow {
        grid-template-columns: 70px 1fr;
    }
    .videoRow em {
        display: none;
    }
    .academyContentGrid {
        gap: 14px;
    }
}

/* ==========================================================================
   PHẦN THÊM CỦA BẠCH ĐẰNG (V02) — KHÔNG thuộc style.css gốc của demo.
   Chỉ dành cho các view của khung (tin tức, bài viết, trang tĩnh, tìm kiếm)
   vốn dùng lưới Bootstrap; demo không có sẵn các class này.
   ========================================================================== */

/* Menu mobile: nút ☰ thêm/bớt class "mo" ở .menu (thay cho style inline trong app.js của demo). */
@media (max-width: 1180px) {
    .menu.mo {
        display: flex;
        position: absolute;
        left: 12px;
        right: 12px;
        top: 72px;
        padding: var(--sp-16);
        flex-direction: column;
        align-items: stretch;
        white-space: normal;
        background: #fff;
        border-radius: var(--r-md);
        box-shadow: 0 15px 40px rgba(12,31,71,.15);
    }

    .menu.mo a {
        padding: 14px 10px;
    }

    .menu.mo a.active:after {
        bottom: 6px;
    }

    /* Menu cấp 2 trên điện thoại: xếp dưới mục cha, bấm nút mũi tên để mở */
    .menu.mo .menu-cha {
        flex-wrap: wrap;
    }

    .menu.mo .menu-cha > a {
        flex: 1;
    }

    .menu.mo .menu-cha > a:before {
        display: none;
    }

    .menu.mo .menu-mo-con {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: var(--r-sm);
        background: #f3f6fb;
        cursor: pointer;
    }

    .menu.mo .menu-mo-con:after {
        content: "";
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-right: 2px solid var(--blue);
        border-bottom: 2px solid var(--blue);
        transform: rotate(45deg);
        transition: transform .2s;
    }

    .menu.mo .menu-cha.mo-con .menu-mo-con:after {
        margin-top: 4px;
        transform: rotate(-135deg);
    }

    .menu.mo .menu-con,
    .menu.mo .menu-cha:hover > .menu-con {
        display: none;
        position: static;
        width: 100%;
        min-width: 0;
        padding: 0 0 var(--sp-8) var(--sp-16);
        border: 0;
        box-shadow: none;
        white-space: normal;
    }

    .menu.mo .menu-cha.mo-con > .menu-con {
        display: flex;
    }
}

/* Demo ẩn nút ☰ ở màn <= 680px (.navActions .soft{display:none}) nên điện thoại không mở được menu; bật lại ở đây (cùng nút kính lúp). */
@media (max-width: 680px) {
    .navActions .soft.mobileBtn,
    .navActions .soft.timBtn {
        display: inline-flex;
    }
}

/* Chân trang: mô tả dưới tên thương hiệu của đoạn giới thiệu */
.footBrand small {
    display: block;
    color: #aeb9c9;
    font-size: var(--fs-xs);
}

/* Lưới tối thiểu cho view cũ */
.luoi-bai {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

.luoi-the {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.luoi-the.hai-cot {
    grid-template-columns: repeat(2, 1fr);
}

.luoi-the.bon-cot-nho {
    grid-template-columns: repeat(3, 1fr);
}

.luoi-lien-he {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 44px;
    align-items: start;
}

/* Thẻ bài viết (dựa trên .newsCard của demo, ảnh là thẻ img thật) */
.newsCard .anh-the {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--soft);
}

.newsCard .anh-the img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.newsCard.lon .anh-the {
    aspect-ratio: 16 / 9;
}

.newsCard.ngang {
    display: grid;
    grid-template-columns: 42% 1fr;
}

.newsCard.ngang .anh-the {
    aspect-ratio: auto;
    height: 100%;
}

.newsCard .body h3 a:hover,
.newsCard small:hover {
    color: var(--red-text);
}

.newsCard .ngay {
    display: block;
    margin-top: 10px;
    font-size: var(--fs-xs);
    color: var(--muted);
}

/* Bài viết, trang tĩnh */
.noi-dung {
    font-size: var(--fs-lg);
    line-height: 1.75;
    overflow: hidden; /* div/ảnh do editor đặt width, float quá khổ không được phủ trang */
    overflow-wrap: anywhere;
}

/* Cột chữ bài viết/trang tĩnh: ~720px cho dòng dễ đọc */
.luoi-bai .noi-dung,
.luoi-bai article .noi-dung {
    max-width: 720px;
}

.noi-dung p {
    margin: 0 0 1.1em;
}

.noi-dung h2 {
    font-size: var(--fs-h3);
}

.noi-dung h3 {
    font-size: var(--fs-2xl);
}

.noi-dung ul,
.noi-dung ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}

.noi-dung li {
    margin-bottom: .4em;
}

.noi-dung blockquote {
    margin: 1.4em 0;
    padding: 14px 20px;
    border-left: 4px solid var(--red);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--soft);
    color: var(--muted);
    font-style: italic;
}

.noi-dung figure {
    margin: 1.4em 0;
}

.noi-dung figcaption {
    margin-top: 8px;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: center;
}

.noi-dung img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-md);
}

.noi-dung h2,
.noi-dung h3 {
    margin: 1.6em 0 .6em;
    line-height: 1.25;
}

.noi-dung a {
    color: var(--blue);
    text-decoration: underline;
}

.noi-dung table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.noi-dung td,
.noi-dung th {
    border: 1px solid var(--line);
    padding: var(--sp-8) var(--sp-12);
}

.bai-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8) 22px;
    margin-bottom: 20px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.bai-sapo {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
}

.chia-se {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--sp-32);
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
}

.chia-se a {
    padding: var(--sp-8) 14px;
    border-radius: var(--r-pill);
    background: #f1f4f8;
    color: var(--blue);
}

.chia-se a:hover {
    background: var(--blue);
    color: #fff;
}

.tieu-de-nho {
    font-size: var(--fs-2xl);
    margin: 0 0 18px;
}

.lien-quan {
    margin-top: var(--sp-48);
}

.mo-ta-dm {
    margin: 0 0 var(--sp-24);
    color: var(--muted);
    line-height: var(--lh-body);
}

.trong {
    color: var(--muted);
}

/* Cột phải (sidebar) */
.khoi-phai {
    padding: 22px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
}

.khoi-phai h4 {
    margin: 0 0 var(--sp-12);
    font-size: var(--fs-lg);
}

.khoi-phai ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.khoi-phai li + li {
    border-top: 1px solid var(--line);
}

.khoi-phai li > a {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-12);
    padding: 10px 0;
    font-size: var(--fs-md);
}

.khoi-phai li > a:hover {
    color: var(--red-text);
}

.khoi-phai li > a span {
    color: var(--muted);
}

.khoi-phai .bai-nho li {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--sp-12);
    padding: 10px 0;
}

.khoi-phai .bai-nho img {
    width: 72px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--r-sm);
}

.khoi-phai .bai-nho a {
    display: block;
    padding: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    line-height: var(--lh-snug);
}

.khoi-phai .bai-nho time {
    display: block;
    margin-top: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--muted);
}

.banner-phai {
    display: block;
    margin-bottom: 18px;
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* Ô tìm kiếm trang kết quả */
.tim-lon {
    display: flex;
    gap: 10px;
    margin-bottom: var(--sp-32);
}

.tim-lon input {
    flex: 1;
    min-width: 0;
    padding: 14px var(--sp-16);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font: inherit;
}

/* Trang tìm kiếm toàn site (V39): ô tìm trong hero, chip nhóm, khối nhóm kết quả, trạng thái trống */
.tim-hero p {
    margin: var(--sp-8) 0 0;
}

.tim-thanh {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    max-width: 780px;
    margin-top: var(--sp-24);
    padding: 6px 6px 6px var(--sp-24);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--blue);
    box-shadow: var(--shadow);
}

.tim-thanh:focus-within {
    box-shadow: var(--shadow), 0 0 0 4px rgba(255,255,255,.45);
}

.tim-thanh .kinhLup {
    margin: -3px 6px 0 -3px;
}

.tim-thanh input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 var(--sp-8);
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-base);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.tim-thanh input::placeholder {
    color: #6b7585;
    opacity: 1;
}

.tim-thanh .btn {
    flex: none;
    min-height: 48px;
    padding: 0 var(--sp-32);
}

.tim-tom-tat {
    color: #fff;
    font-size: var(--fs-lg);
}

.tim-chip-hang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8);
    margin-top: var(--sp-16);
}

.tim-chip-nhan {
    color: #b8c9e7;
    font-size: var(--fs-sm);
}

.tim-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    padding: 7px 14px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    line-height: var(--lh-snug);
}

.tim-chip:hover {
    background: #fff;
    color: var(--blue-dark);
}

.tim-chip b {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--blue-dark);
    font-size: var(--fs-xs);
    text-align: center;
}

.tim-chip:hover b {
    background: var(--blue);
    color: #fff;
}

/* Chip nằm trên nền sáng (khối "không có kết quả") */
.tim-chip-sang {
    justify-content: center;
}

.tim-chip-sang .tim-chip {
    border-color: var(--line);
    background: var(--soft);
    color: var(--blue);
}

.tim-chip-sang .tim-chip:hover {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}

.tim-than {
    padding-top: var(--sp-48);
}

.tim-tieu-de {
    margin: 0 0 var(--sp-16);
    font-size: var(--fs-xl);
}

.tim-loi-tat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-16);
}

.tim-the,
.kq-muc {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.tim-the:hover,
.kq-muc:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.tim-the:focus-visible,
.kq-muc:focus-visible {
    outline: 3px solid rgba(13,62,126,.45);
    outline-offset: 2px;
}

.tim-the {
    display: flex;
    align-items: center;
    gap: var(--sp-16);
    padding: var(--sp-16) var(--sp-24) var(--sp-16) var(--sp-16);
}

.tim-the-chu {
    display: grid;
    flex: 1;
    min-width: 0;
}

.tim-the-chu small {
    color: var(--muted);
    font-size: var(--fs-sm);
}

/* Ô biểu tượng của nhóm / lối tắt */
.nhom-bt {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-sm);
    background: #e8eefa;
    color: var(--blue);
    font-size: var(--fs-lg);
    line-height: 1;
}

/* Là thẻ <section> nên bỏ padding 82px chung của section, khoảng cách giữa nhóm do .nhom-kq + .nhom-kq lo */
.nhom-kq {
    padding: 0;
    scroll-margin-top: 96px;
}

.nhom-kq + .nhom-kq {
    margin-top: var(--sp-48);
}

.nhom-dau {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    margin-bottom: var(--sp-16);
    padding-bottom: var(--sp-12);
    border-bottom: 2px solid var(--line);
}

.nhom-ten {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    margin: 0;
    font-size: var(--fs-2xl);
    line-height: var(--lh-heading);
}

.nhom-dem {
    padding: 2px 11px;
    border-radius: var(--r-pill);
    background: var(--blue);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
}

.xem-tat-ca {
    margin-left: auto;
    color: var(--red-text);
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    white-space: nowrap;
}

.xem-tat-ca:hover {
    text-decoration: underline;
}

.kq-luoi {
    display: grid;
    gap: var(--sp-16);
}

.kq-luoi.ba-cot {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kq-luoi.hai-cot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kq-muc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-12);
    align-content: start;
    padding: var(--sp-16) var(--sp-24) var(--sp-16) var(--sp-16);
}

.kq-nhan {
    grid-column: 1 / -1;
    margin-bottom: var(--sp-4);
    color: var(--red-text);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-black);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.kq-tieu-de {
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    overflow-wrap: anywhere;
}

.kq-tieu-de mark {
    padding: 0 2px;
    border-radius: 4px;
    background: #ffe58a;
    color: inherit;
}

.kq-phu {
    grid-column: 1;
    margin-top: var(--sp-4);
    color: var(--muted);
    font-size: var(--fs-sm);
}

.kq-mui {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    color: var(--blue);
    font-weight: var(--fw-black);
    transition: transform .15s;
}

.kq-muc:hover .kq-mui,
.tim-the:hover .kq-mui {
    transform: translateX(3px);
}

.tim-the .kq-mui {
    grid-row: auto;
}

/* Không có kết quả */
.tim-rong {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--sp-48) var(--sp-24);
    border: 1px dashed #cfd6e1;
    border-radius: var(--r-xl);
    background: var(--soft);
    text-align: center;
}

.tim-rong-bt {
    margin: var(--sp-8) auto var(--sp-24);
    color: var(--blue);
    transform: scale(2.4);
    transform-origin: center;
}

.tim-rong-dong {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    overflow-wrap: anywhere;
}

.tim-rong-phu {
    margin: var(--sp-8) 0 0;
    color: var(--muted);
}

@media (max-width: 980px) {
    .kq-luoi.ba-cot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .tim-thanh {
        padding-left: var(--sp-16);
    }

    .tim-thanh .btn {
        padding: 0 var(--sp-24);
    }

    .tim-tom-tat {
        font-size: var(--fs-base);
    }

    .tim-than {
        padding-top: var(--sp-32);
    }

    .kq-luoi.ba-cot,
    .kq-luoi.hai-cot {
        grid-template-columns: minmax(0, 1fr);
    }

    .nhom-dau {
        flex-wrap: wrap;
    }

    .nhom-ten {
        font-size: var(--fs-xl);
    }

    .tim-rong {
        padding: var(--sp-32) var(--sp-16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tim-the,
    .kq-muc,
    .kq-mui {
        transition: none;
    }

    .tim-the:hover,
    .kq-muc:hover {
        transform: none;
    }
}

/* Phân trang (markup Bootstrap 5 do Paginator::useBootstrapFive() sinh ra, nên chỉ tô lại ở đây) */
.phan-trang {
    margin-top: 36px;
}

.phan-trang nav > div:first-child {
    display: none;
}

.phan-trang .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phan-trang .page-link {
    display: block;
    min-width: 40px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    text-align: center;
    color: var(--blue);
}

.phan-trang a.page-link:hover {
    border-color: var(--blue);
}

.phan-trang .active .page-link {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.phan-trang .disabled .page-link {
    color: #a3adbb;
}

/* Trang liên hệ của khung */
.lien-he-khung ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lien-he-khung li {
    padding: 14px;
    border-radius: var(--r-md);
    background: #f7f9fc;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
}

.lien-he-khung li span {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    color: var(--muted);
}

.ban-do iframe {
    width: 100%;
    min-height: 380px;
    border: 0;
    border-radius: var(--r-lg);
}

.ban-do.trong {
    padding: 40px var(--sp-24);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    text-align: center;
}

/* Dải slide trang chủ (thay carousel Bootstrap): cuộn ngang, không cần JS */
.banner-giua {
    padding: 0 0 62px;
}

.banner-giua img {
    width: 100%;
    border-radius: var(--r-xl);
}

/* Section của khung không cần đệm lớn như demo khi nằm trong thân trang con */
.than-trang {
    padding: 62px 0 82px;
}

@media (max-width: 980px) {
    .luoi-bai,
    .luoi-lien-he,
    .luoi-noi-bat {
        grid-template-columns: 1fr;
    }

    .luoi-the,
    .luoi-the.bon-cot-nho {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .luoi-the,
    .luoi-the.hai-cot,
    .luoi-the.bon-cot-nho {
        grid-template-columns: 1fr;
    }

    .newsCard.ngang {
        grid-template-columns: 1fr;
    }

    .than-trang {
        padding: 42px 0 62px;
    }
}

/* Hàng nút căn giữa (trang 404) */
/* V06 — Hệ thống chi nhánh: ô tìm + lọc khu vực, dòng đếm, trạng thái trống */
.loc-chi-nhanh {
    display: flex;
    gap: var(--sp-8);
    margin: 18px 0;
}

.loc-chi-nhanh input,
.loc-chi-nhanh select {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font: inherit;
    background: #fff;
}

.loc-chi-nhanh input {
    flex: 1;
    min-width: 0;
}

.so-ket-qua {
    margin: -14px 0 20px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

.khong-co-chi-nhanh {
    padding: var(--sp-32) 0;
    text-align: center;
    color: var(--muted);
}

.branchCard[hidden],
.khong-co-chi-nhanh[hidden] {
    display: none;
}

@media (max-width: 640px) {
    .loc-chi-nhanh {
        flex-wrap: wrap;
    }

    .loc-chi-nhanh input {
        flex-basis: 100%;
    }

    .loc-chi-nhanh select {
        flex: 1;
    }

    #ban-do-chi-nhanh {
        min-height: 300px;
    }
}

/* V08 — Tin tức & Hoạt động */
.value.chuyen-muc {
    display: block;
    transition: border-color .2s, box-shadow .2s;
}

.value.chuyen-muc:hover,
.value.chuyen-muc.dang-chon {
    border-color: var(--red);
    box-shadow: var(--shadow-sm);
}

.newsGrid .newsCard h3 {
    font-size: var(--fs-lg);
}

.newsGrid .newsCard.lon h3 {
    font-size: var(--fs-2xl);
}

.the-chi-nhanh {
    display: grid;
    gap: var(--sp-4);
    margin: 28px 0 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--soft);
}

.the-chi-nhanh small {
    color: var(--red-text);
    font-weight: var(--fw-black);
    text-transform: uppercase;
}

.the-chi-nhanh span {
    color: var(--muted);
    font-size: var(--fs-md);
}

.the-chi-nhanh:hover strong {
    color: var(--red-text);
}

/* Ảnh dải tin của demo rất rộng: thẻ lớn lấy phần bên trái như demo (background-position: left) */
.newsCard.lon .anh-the img {
    object-position: left center;
}

/* V09 — Liên hệ */
.contactCard [hidden] {
    display: none !important;
}

a.contactItem {
    display: block;
    color: inherit;
    border: 1px solid transparent;
    transition: border-color .2s, background .2s;
}

a.contactItem:hover,
a.contactItem.chon {
    border-color: var(--red);
    background: #fff;
}

.thong-tin-lien-he {
    list-style: none;
    margin: 18px 0 0;
    padding: var(--sp-16) 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: var(--sp-8);
    color: var(--muted);
    font-size: var(--fs-md);
}

.thong-tin-lien-he span {
    display: inline-block;
    min-width: 96px;
    font-weight: var(--fw-black);
    color: var(--blue-dark);
}

.o-bay {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form .dong-y {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--fs-sm);
    color: var(--muted);
    line-height: var(--lh-snug);
}

.form .dong-y input {
    width: auto;
    margin-top: 3px;
}

.thong-bao-ok,
.thong-bao-loi {
    padding: 14px var(--sp-16);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-16);
    font-size: var(--fs-md);
}

.thong-bao-ok {
    background: #e9f8ef;
    color: #16784a;
    border: 1px solid #bfe8d0;
}

.thong-bao-loi {
    background: #fff0f1;
    color: #a3141b;
    border: 1px solid #f6c7ca;
}

.thong-bao-loi ul {
    margin: 0;
    padding-left: 18px;
}

/* ==========================================================================
   V10 — Tuyển dụng (/tuyen-dung, /tuyen-dung/{slug}). Class mới, không đụng class demo.
   ========================================================================== */
.loc-bo-phan {
    display: flex;
    gap: var(--sp-8);
    flex-wrap: wrap;
    margin: 0 0 20px;
}

.loc-bo-phan a {
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    padding: 10px var(--sp-16);
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue);
}

.loc-bo-phan a:hover {
    border-color: var(--blue);
}

.loc-bo-phan a.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.job b a {
    color: inherit;
}

.job b a:hover {
    color: var(--red-text);
}

.job-ben-phai {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.job-ben-phai .btn {
    padding: 9px var(--sp-16);
    font-size: var(--fs-sm);
}

.tag.nong {
    background: var(--red);
    color: #fff;
}

.tag.dong {
    background: #eef1f5;
    color: var(--muted);
}

.noi-dung.phuc-loi {
    font-size: var(--fs-base);
}

/* Quyền lợi: mỗi <li> của danh sách cài đặt thành một thẻ có icon, lưới 2 cột */
.phuc-loi ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phuc-loi li {
    position: relative;
    min-height: 88px;
    margin: 0;
    padding: 22px 22px 22px 84px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    line-height: var(--lh-snug);
    transition: transform .2s, box-shadow .2s;
}

.phuc-loi li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.phuc-loi li:before {
    position: absolute;
    top: 50%;
    left: 22px;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff0f1;
    color: var(--red-text);
    font-size: 20px;
    content: "\2726\FE0E";
}

.phuc-loi li:nth-child(2):before { content: "\279A\FE0E"; background: #eef3fb; color: var(--blue); }
.phuc-loi li:nth-child(3):before { content: "\2665\FE0E"; }
.phuc-loi li:nth-child(4):before { content: "\2714\FE0E"; background: #eef3fb; color: var(--blue); }

@media (max-width: 680px) {
    .phuc-loi ul {
        grid-template-columns: 1fr;
    }
}

.luoi-vi-tri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
}

.trang-thai-vi-tri {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.ghi-chu-dong {
    color: var(--muted);
    font-size: var(--fs-md);
}

.ghi-chu-dong a {
    color: var(--blue);
    text-decoration: underline;
}

.the-thong-tin-viec {
    padding: var(--sp-24);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    display: grid;
    gap: 14px;
}

.the-thong-tin-viec h3 {
    margin: 0;
    font-size: var(--fs-lg);
}

.the-thong-tin-viec dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-8) 14px;
    margin: 0;
    font-size: var(--fs-md);
}

.the-thong-tin-viec dt {
    color: var(--muted);
}

.the-thong-tin-viec dd {
    margin: 0;
    font-weight: var(--fw-bold);
    text-align: right;
}

.the-thong-tin-viec ul {
    margin: 0;
    padding-left: 20px;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
}

.the-thong-tin-viec li span {
    color: var(--muted);
}

.the-thong-tin-viec .btn.full {
    width: 100%;
}

@media (max-width: 980px) {
    .luoi-vi-tri {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .job {
        flex-direction: column;
        align-items: flex-start;
    }

    .job-ben-phai {
        flex-wrap: wrap;
    }
}

/* V07 — Chi tiết chi nhánh + bản đồ Leaflet ở danh sách */
.ghi-chu-gio {
    color: var(--muted);
}

/* Chi tiết chi nhánh: thẻ thông tin có icon, ô tiện ích, CTA cuối trang */
.theTinGrid {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.theTin {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.theTin small {
    display: block;
    margin-bottom: 2px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-black);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
}

.theTin b {
    display: block;
    line-height: var(--lh-snug);
    color: var(--ink);
}

.theTinIcon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eef3fb;
    color: var(--blue);
    font-size: var(--fs-lg);
    line-height: 42px;
    text-align: center;
}

.luoiTienIch {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 14px;
}

.oTienIch {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.oTienIch b {
    color: var(--ink);
}

.oTienIch .theTinIcon {
    background: var(--red);
    color: #fff;
}

.branchGrid.ba-cot {
    grid-template-columns: repeat(3,1fr);
}

.ctaChiNhanh {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: var(--sp-48) 48px;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg,var(--blue-dark),var(--blue));
    color: #fff;
}

.ctaChiNhanh:before {
    content: "";
    position: absolute;
    top: -120px;
    right: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50% 50% 50% 90px;
    background: linear-gradient(135deg,var(--red),var(--red-dark));
}

.ctaChiNhanh > * {
    position: relative;
}

.ctaChiNhanh h2 {
    margin: 0 0 8px;
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
}

.ctaChiNhanh p {
    max-width: 560px;
    margin: 0;
    line-height: var(--lh-body);
    color: #dbe7fb;
}

.ctaChiNhanh .heroActions {
    margin-top: 0;
}

@media (max-width: 1180px) {
    .branchGrid.ba-cot {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 680px) {
    .branchGrid.ba-cot {
        grid-template-columns: 1fr;
    }

    .ctaChiNhanh {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--sp-32) 24px;
    }
}

.copy .textLink {
    font-size: inherit;
}

.chi-tiet-gioi-thieu {
    align-items: start;
}

.ban-do-nho {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff;
}

.ban-do-nho iframe {
    display: block;
    min-height: 320px;
}

#ban-do-chi-nhanh.co-leaflet:before {
    display: none;
}

#ban-do-leaflet {
    position: absolute;
    inset: 0;
    z-index: 1;
}

#ban-do-chi-nhanh.co-leaflet .mapLabel {
    z-index: 2;
    pointer-events: none;
}

.branchCard.noi-bat {
    outline: 3px solid var(--red);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    /* Nhãn đè lên pin trên màn hình nhỏ; số chi nhánh đã có ở dòng "Đang hiển thị" */
    #ban-do-chi-nhanh.co-leaflet .mapLabel {
        display: none;
    }
}

/* V12 — Trang chủ */
.luoi-the.bon-cot {
    grid-template-columns: repeat(4, 1fr);
}

a.value {
    position: relative;
    display: block;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

a.value:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

/* Liên hệ theo nhu cầu: icon tròn góc phải mỗi thẻ (chỉ ở lưới .cards4) */
.cards4 > a.value:before {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eef3fb;
    color: var(--blue);
    font-size: 19px;
    content: "\260E\FE0E";
    transition: background .2s, color .2s;
}

.cards4 > a.value:nth-child(2):before { content: "\2709\FE0E"; }
.cards4 > a.value:nth-child(3):before { content: "\2302\FE0E"; }
.cards4 > a.value:nth-child(4):before { content: "\2726\FE0E"; }

.cards4 > a.value:hover:before {
    background: var(--red);
    color: #fff;
}

/* Dải chi nhánh nổi bật: cuộn ngang, nút ‹ › nằm đè mép phải/trái */
.dai-truot {
    position: relative;
}

.dai-truot-khung {
    display: flex;
    gap: var(--sp-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: var(--sp-4) 2px 10px;
}

.dai-truot-khung::-webkit-scrollbar {
    display: none;
}

.branchCard.thanh-truot {
    flex: 0 0 calc((100% - 48px) / 4);
    scroll-snap-align: start;
    min-width: 0;
}

.nut-truot {
    position: absolute;
    top: 80px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: var(--fs-h3);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.nut-truot[hidden] {
    display: none;
}

.nut-truot.sau {
    right: -14px;
}

.nut-truot.truoc {
    left: -14px;
}

.nut-truot:hover {
    background: var(--red);
    color: #fff;
}

/* CTA tuyển dụng cuối trang */
.cta-tuyen-dung {
    padding: 62px 0 82px;
}

.cta-khung {
    border-radius: var(--r-xl);
    padding: var(--sp-64) 56px;
    color: #fff;
    background: linear-gradient(90deg,rgba(7,31,71,.94),rgba(13,62,126,.7) 60%,rgba(13,62,126,.25)), url('img/staff.jpg') center/cover no-repeat;
    box-shadow: var(--shadow);
}

.cta-khung h2 {
    max-width: 560px;
    margin: 0 0 var(--sp-12);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: -.015em;
}

.cta-khung p {
    max-width: 520px;
    margin: 0 0 18px;
    line-height: var(--lh-body);
    color: #e6edf8;
}

.cta-khung .so-vi-tri {
    color: #fff;
}

@media (max-width: 1180px) {
    .branchCard.thanh-truot {
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 980px) {
    .luoi-the.bon-cot {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .luoi-the.bon-cot {
        grid-template-columns: 1fr;
    }

    .branchCard.thanh-truot {
        flex-basis: 82%;
    }

    .nut-truot.sau {
        right: 4px;
    }

    .nut-truot.truoc {
        left: 4px;
    }

    .cta-khung {
        padding: 40px var(--sp-24);
    }
}

/* Form ứng tuyển gọn trong thẻ trắng, canh giữa */
#ung-tuyen #form-ung-tuyen {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: #fff;
    box-shadow: var(--shadow);
}

@media (max-width: 680px) {
    #ung-tuyen #form-ung-tuyen {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   V11 — Form ứng tuyển thật: ô CV
   ========================================================================== */
.form .o-cv {
    display: grid;
    gap: var(--sp-8);
    font-size: var(--fs-sm);
    color: var(--muted);
}

.form .o-cv input[type="file"] {
    padding: 11px var(--sp-12);
    background: #fff;
    cursor: pointer;
}

.form .thong-bao-ok,
.form .thong-bao-loi {
    margin-bottom: 0;
}

/* ==========================================================================
   V15 — Cổng đăng nhập nhân viên (/nhan-vien/*, form nhúng ở /academy và /noi-bo). Class mới, không đụng class demo.
   ========================================================================== */
.khung-dang-nhap .thong-bao-ok,
.khung-dang-nhap .thong-bao-loi {
    margin: var(--sp-12) 0 0;
    font-size: var(--fs-sm);
}

.khung-dang-nhap form {
    margin: 0;
}

.khung-dang-nhap .dong-phu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-12);
    flex-wrap: wrap;
    margin-top: var(--sp-12);
    font-size: var(--fs-sm);
}

.khung-dang-nhap .dong-phu a {
    color: var(--red-text);
    font-weight: var(--fw-black);
}

.khung-dang-nhap .dong-phu .ghi-nho {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: #586579;
    cursor: pointer;
}

.khung-dang-nhap .dong-phu .ghi-nho input {
    width: auto;
    margin: 0;
    padding: 0;
}

.khung-dang-nhap .dong-nut {
    display: flex;
    gap: var(--sp-12);
    flex-wrap: wrap;
    align-items: center;
    margin-top: 18px;
}

.khung-dang-nhap .dong-nut form {
    margin: 0;
}

.khung-dang-nhap small {
    display: block;
    margin-top: 13px;
    color: #5f6b7d;
    line-height: var(--lh-snug);
}

.hop-tai-khoan {
    max-width: 560px;
    margin: 0 auto;
    padding: 28px;
}

.hop-tai-khoan .form-doc {
    display: grid;
    gap: var(--sp-8);
}

.hop-tai-khoan .form-doc label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: #586579;
    margin-top: var(--sp-8);
}

.hop-tai-khoan .form-doc input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font: inherit;
}

.hop-tai-khoan .form-doc .btn {
    margin-top: 14px;
}

.hop-tai-khoan .dong-phu-trang {
    margin: var(--sp-16) 0 0;
    font-size: var(--fs-md);
}

.hop-tai-khoan .dong-nut {
    display: flex;
    gap: var(--sp-12);
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20px;
}

.hop-tai-khoan .dong-nut form {
    margin: 0;
}

.hop-tai-khoan .ho-so {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px var(--sp-16);
    margin: 0;
}

.hop-tai-khoan .ho-so dt {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}

.hop-tai-khoan .ho-so dd {
    margin: 0;
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

@media (max-width: 680px) {
    .hop-tai-khoan {
        padding: 20px;
    }

    .hop-tai-khoan .ho-so {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .hop-tai-khoan .ho-so dd {
        margin-bottom: 10px;
    }
}

/* ===== V17: ACADEMY — TRANG HỌC VIÊN (thư viện, khoá, bài) ===== */

a.academyTab {
    text-decoration: none;
}

a.trackCard {
    display: block;
    color: inherit;
    text-decoration: none;
}

.trackGrid.mot-cot {
    grid-template-columns: 1fr;
}

/* Chỉ một lộ trình: thẻ nằm ngang (khối trực quan trái, chữ phải) cho khỏi trống nửa dòng */
.trackGrid.mot-cot .trackCard {
    display: grid;
    grid-template-columns: minmax(240px,.7fr) 1.3fr;
}

.trackGrid.mot-cot .trackVisual {
    height: auto;
    min-height: 240px;
}

.trackGrid.mot-cot .trackBody {
    padding: 32px;
    align-self: center;
}

@media (max-width: 760px) {
    .trackGrid.mot-cot .trackCard {
        display: block;
    }
    .trackGrid.mot-cot .trackVisual {
        height: 180px;
        min-height: 0;
    }
    .trackGrid.mot-cot .trackBody {
        padding: 22px;
    }
}

.anh-khoa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a.courseThumb {
    display: block;
}

.courseThumb .courseRole,
.courseThumb .playBtn {
    z-index: 1;
    display: grid;
    place-items: center;
}

.courseThumb .courseRole {
    display: block;
}

.lien-ket-tro {
    color: inherit;
    text-decoration: none;
}

.lien-ket-tro:hover {
    color: var(--blue);
}

a.courseOpen {
    text-decoration: none;
}

.trong-hoc-vien {
    padding: 28px;
    text-align: center;
    color: var(--muted);
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
}

.xem-them-hoc-vien {
    margin: 26px 0 0;
    text-align: center;
}

.loc-chuyen-de {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8);
    margin: 0 0 22px;
    font-size: var(--fs-sm);
}

.loc-chuyen-de > span {
    color: var(--muted);
    font-weight: var(--fw-black);
}

.loc-chuyen-de a {
    padding: 7px 13px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: #fff;
    color: var(--blue-dark);
    font-weight: var(--fw-bold);
    text-decoration: none;
}

.loc-chuyen-de a.active {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: #fff;
}

.trang-khoa {
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 28px;
    align-items: start;
}

.trang-khoa-chinh {
    min-width: 0;
}

.tieu-de-nho {
    font-size: var(--fs-xl);
    margin: 22px 0 14px;
}

.noi-dung-bai {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    line-height: var(--lh-body);
    overflow-wrap: anywhere;
}

.noi-dung-bai img,
.noi-dung-bai iframe {
    max-width: 100%;
}

.noi-dung-bai > :first-child {
    margin-top: 0;
}

.noi-dung-bai > :last-child {
    margin-bottom: 0;
}

.trang-khoa .lessonList {
    background: #fff;
    margin: 0;
}

.trang-khoa .dong-bai {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) auto;
    gap: var(--sp-12);
    padding: var(--sp-12) 14px;
    border-top: 1px solid var(--line);
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.trang-khoa .dong-bai:first-child {
    border-top: 0;
}

.trang-khoa .dong-bai:hover,
.trang-khoa .dong-bai.dang-hoc {
    background: #f3f7fd;
}

.trang-khoa .dong-bai b {
    color: var(--red-text);
}

.trang-khoa .dong-bai span {
    font-weight: var(--fw-black);
    font-size: var(--fs-sm);
}

.trang-khoa .dong-bai small {
    display: block;
    color: var(--muted);
    font-weight: var(--fw-normal);
    margin-top: 3px;
}

.trang-khoa .dong-bai i {
    font-style: normal;
    color: var(--blue);
    font-weight: var(--fw-black);
}

.khung-ben {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
    position: sticky;
    top: 90px;
}

.khung-ben h3 {
    font-size: var(--fs-base);
    margin: 0 0 14px;
}

.khung-ben dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-8) 14px;
    margin: 0 0 18px;
    font-size: var(--fs-sm);
}

.khung-ben dt {
    color: var(--muted);
    font-weight: var(--fw-bold);
}

.khung-ben dd {
    margin: 0;
    font-weight: var(--fw-black);
    text-align: right;
}

.khung-ben .btn.full {
    display: block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

.khung-ben .lessonList {
    max-height: 60vh;
    overflow: auto;
}

.khung-video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 18px;
}

.khung-video iframe,
.khung-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tai-lieu-bai {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px var(--sp-16);
}

.tai-lieu-bai small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.chuyen-bai {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-top: var(--sp-24);
}

@media (max-width: 980px) {
    .trang-khoa {
        grid-template-columns: 1fr;
    }

    .khung-ben {
        position: static;
    }
}

@media (max-width: 680px) {
    .tai-lieu-bai {
        grid-template-columns: 56px minmax(0,1fr);
    }

    .tai-lieu-bai .btn {
        grid-column: 1 / -1;
        text-align: center;
    }

    .chuyen-bai {
        flex-direction: column;
    }

    .chuyen-bai .btn {
        text-align: center;
    }
}

.trang-khoa .kicker {
    margin-bottom: var(--sp-12);
}

/* V18: tiến độ học (dấu ✓, nút hoàn thành, thẻ kết quả) */
.trang-khoa .dong-bai.da-xong i {
    color: #16784a;
}

.hoan-thanh-bai {
    margin-top: 22px;
}

.da-hoc-xong {
    display: inline-block;
    padding: 10px var(--sp-16);
    border-radius: var(--r-pill);
    background: #e8f6ee;
    color: #16784a;
    font-weight: var(--fw-black);
}

.tien-do-khoa {
    margin: 14px 0 var(--sp-4);
}

.tien-do-khoa small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
}

.the-ket-qua {
    display: grid;
    grid-template-columns: minmax(0,1fr) 240px 104px;
    gap: 18px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-top: 10px;
    color: inherit;
    text-decoration: none;
}

.the-ket-qua:hover {
    box-shadow: var(--shadow);
}

.the-ket-qua-ten b {
    display: block;
}

.the-ket-qua-ten small,
.the-ket-qua-do small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.the-ket-qua-do .progress {
    display: block;
}

.the-ket-qua em {
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    padding: 6px 10px;
    border-radius: var(--r-pill);
    background: #edf1f6;
    color: #5a677a;
    white-space: nowrap;
    text-align: center;
}

.the-ket-qua.hoan-thanh em {
    background: #e8f6ee;
    color: #16784a;
}

.the-ket-qua.dang-hoc em {
    background: #fff4e0;
    color: #a25a12;
}

@media (max-width: 680px) {
    .the-ket-qua {
        grid-template-columns: minmax(0,1fr) 104px;
    }

    .the-ket-qua-do {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* V20: kho video + tài liệu (khối trên /academy và hai trang danh sách). Nền theo .videoRow/.docRow của demo, đổi button thành link */
.videoRow,
.docRow {
    color: inherit;
    text-decoration: none;
}

.videoPic {
    position: relative;
    overflow: hidden;
}

.videoPic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.videoPic i {
    position: relative;
}

.videoRow b,
.docRow b {
    overflow-wrap: anywhere;
}

.docRow .nhan-moi {
    font-style: normal;
    font-size: var(--fs-xs);
    color: var(--red-text);
    background: #fff0f1;
    padding: var(--sp-4) 7px;
    border-radius: var(--r-pill);
    font-weight: var(--fw-black);
    vertical-align: middle;
}

.docRow .tai-ve {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--red-text);
    font-size: var(--fs-lg);
    text-decoration: none;
}

.docRow .tai-ve:hover {
    background: #fff0f1;
}

.kho-chuyen {
    display: flex;
    gap: var(--sp-8);
    margin: 0 0 18px;
}

.kho-chuyen a {
    padding: var(--sp-8) 14px;
    border-radius: var(--r-pill);
    font-weight: var(--fw-black);
    font-size: var(--fs-sm);
    color: var(--blue);
    background: #edf3fb;
}

.kho-chuyen a.active {
    background: var(--blue-dark);
    color: #fff;
}

.kho-danh-sach {
    max-width: 880px;
}

.videoLibrary .trong-hoc-vien,
.documentLibrary .trong-hoc-vien {
    margin: var(--sp-12) 0 var(--sp-4);
}

@media (max-width: 980px) {
    .academyContentGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .docRow {
        grid-template-columns: 44px minmax(0,1fr) auto;
        gap: 10px;
    }
}

/* V19: quiz — trang làm bài, kết quả, danh sách bài kiểm tra. Nền theo .quizCard của demo (thẻ trắng bo 20px, nhãn đáp án bo 12px) */
.trang-quiz {
    max-width: 820px;
}

.trang-quiz .quizCard {
    margin-bottom: var(--sp-16);
}

.trang-quiz .quizCard h3 {
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
}

.trang-quiz .quizCard label {
    font-size: var(--fs-md);
    padding: var(--sp-12) 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: var(--lh-snug);
}

.trang-quiz .quizCard label:hover {
    border-color: var(--blue);
}

.trang-quiz .quizCard label input {
    margin-top: var(--sp-4);
    flex: none;
}

.quiz-thong-tin {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin-bottom: var(--sp-16);
}

.quiz-thong-tin span {
    background: #edf3fb;
    color: var(--blue);
    border-radius: var(--r-pill);
    padding: var(--sp-8) 14px;
    font-size: var(--fs-sm);
}

.quiz-goi-y {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin: 0 0 6px;
}

.quiz-nop {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.trang-quiz .quizCard .quiz-nop .btn {
    width: auto;
    margin-top: 0;
}

.quiz-het-luot .btn {
    margin: var(--sp-8) var(--sp-8) 0 0;
    width: auto;
}

.quiz-diem {
    text-align: center;
    border-top: 6px solid #a25a12;
}

.quiz-diem.dat {
    border-top-color: #16784a;
}

.quiz-diem-so {
    font-size: var(--fs-display);
    font-weight: var(--fw-black);
    line-height: var(--lh-heading);
    color: #a25a12;
}

.quiz-diem.dat .quiz-diem-so {
    color: #16784a;
}

.quiz-diem .quiz-nop {
    justify-content: center;
}

.quiz-cau.sai {
    border-left: 5px solid #d44;
}

.quiz-dong {
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) auto;
    gap: var(--sp-8);
    align-items: center;
    padding: 10px var(--sp-12);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin: var(--sp-8) 0;
    font-size: var(--fs-md);
}

.quiz-dong small {
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
}

.quiz-dong.dung {
    border-color: #16784a;
    background: #e8f6ee;
}

.quiz-dong.sai-chon {
    border-color: #d44;
    background: #fdecec;
}

.quiz-dau {
    font-weight: var(--fw-black);
    text-align: center;
}

.quiz-dong.dung .quiz-dau {
    color: #16784a;
}

.quiz-dong.sai-chon .quiz-dau {
    color: #d44;
}

.quiz-giai-thich {
    margin-top: var(--sp-12);
    padding: var(--sp-12) 14px;
    border-radius: var(--r-sm);
    background: #f7f9fc;
    font-size: var(--fs-sm);
}

.quiz-giai-thich p {
    margin: var(--sp-4) 0 0;
    color: var(--muted);
    line-height: var(--lh-body);
}

.quiz-diem-nho {
    display: block;
    font-size: var(--fs-xl);
}

.khoi-quiz {
    margin: 22px 0;
}

.dong-quiz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-12);
    padding: 14px var(--sp-16);
    margin-bottom: var(--sp-8);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: inherit;
    text-decoration: none;
}

.dong-quiz:hover {
    box-shadow: var(--shadow);
}

.dong-quiz b {
    display: block;
}

.dong-quiz small {
    color: var(--muted);
}

.dong-quiz em {
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--red-text);
    white-space: nowrap;
}

.dong-quiz.da-dat em {
    color: #16784a;
}

.dong-quiz.chua-dat em {
    color: #a25a12;
}

.quiz-trang-chu {
    max-width: 820px;
}

.khung-ben .khoi-quiz {
    margin: var(--sp-16) 0;
}

.khung-ben .khoi-quiz .tieu-de-nho {
    font-size: var(--fs-base);
}

@media (max-width: 680px) {
    .quiz-diem-so {
        font-size: var(--fs-h1);
    }

    .quiz-dong {
        grid-template-columns: 22px minmax(0,1fr);
    }

    .quiz-dong small {
        grid-column: 2;
    }
}

/* V21: khối 🔔 Thông báo đào tạo trên /academy */
.nhac-dao-tao {
    padding: 28px 0 0;
}

.nhac-dao-tao h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin: 0 0 14px;
    font-size: var(--fs-xl);
}

.nhac-dao-tao h2 em {
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: #fff;
    background: var(--red);
    border-radius: var(--r-pill);
    padding: 2px 9px;
}

.nhac-danh-sach {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.nhac-dong {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-16);
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--blue);
    border-radius: var(--r-md);
}

.nhac-dong b {
    display: block;
}

.nhac-dong span {
    color: var(--muted);
    font-size: var(--fs-md);
}

.nhac-dong.qua-han {
    border-color: var(--red);
    background: #fff5f5;
}

.nhac-dong.qua-han span,
.nhac-dong.qua-han strong {
    color: var(--red-dark);
}

@media (max-width: 680px) {
    .nhac-dong {
        flex-direction: column;
        align-items: stretch;
    }

    .nhac-dong .btn {
        text-align: center;
    }
}

.nhac-dong .nhac-ghi-chu {
    display: block;
    margin-top: var(--sp-4);
    color: var(--ink);
    font-style: italic;
}

/* V22: chứng nhận hoàn thành khoá + trang xác thực công khai */
.dong-chung-nhan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-12);
    padding: 14px var(--sp-16);
    margin-bottom: var(--sp-8);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.dong-chung-nhan b {
    display: block;
}

.dong-chung-nhan small {
    color: var(--muted);
}

.dong-chung-nhan .btn {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

.xac-thuc {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 6px solid #a25a12;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}

.xac-thuc.hop-le {
    border-top-color: #16784a;
}

.xac-thuc-dau {
    display: block;
    font-size: var(--fs-xl);
    color: #a25a12;
}

.xac-thuc.hop-le .xac-thuc-dau {
    color: #16784a;
}

.xac-thuc dl {
    margin: 18px 0 0;
}

.xac-thuc dt {
    margin-top: var(--sp-12);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    color: var(--muted);
    text-transform: uppercase;
}

.xac-thuc dd {
    margin: 2px 0 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    overflow-wrap: anywhere;
}

.xac-thuc p {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: var(--lh-body);
}

@media (max-width: 680px) {
    .dong-chung-nhan {
        flex-direction: column;
        align-items: flex-start;
    }

    .xac-thuc {
        padding: 20px;
    }
}

/* V24: cổng nội bộ /noi-bo (trang tổng, menu phụ, ô chưa có vé) */
a.module {
    display: block;
    transition: transform .15s, box-shadow .15s;
}

a.module:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.module.chua-co {
    background: #f6f8fc;
}

.module .so-dem {
    display: inline-block;
    margin-top: 6px;
    padding: var(--sp-4) 10px;
    border-radius: var(--r-pill);
    background: var(--red);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}

.module .sap-ra-mat {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--muted);
}

.menu-phu-noi-bo {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.menu-phu-noi-bo .container {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.menu-phu-noi-bo a {
    flex: none;
    padding: var(--sp-8) 14px;
    border-radius: var(--r-pill);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--ink);
}

.menu-phu-noi-bo a:hover,
.menu-phu-noi-bo a.active {
    background: var(--blue-dark);
    color: #fff;
}

.loi-tat-noi-bo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    color: var(--muted);
    font-size: var(--fs-md);
}

/* V25: thông báo BGĐ (Internal) */
.danh-sach-thong-bao,
.khoi-thong-bao-ghim {
    display: grid;
    gap: 10px;
}

.khoi-thong-bao-ghim {
    margin-top: 28px;
}

.dong-thong-bao {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: var(--sp-16) 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
}

.dong-thong-bao:hover {
    box-shadow: var(--shadow);
}

.dong-thong-bao-ten {
    display: grid;
    gap: var(--sp-4);
    min-width: 0;
}

.dong-thong-bao-ten b {
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
}

.dong-thong-bao.thong-bao-chua-doc {
    border-left: 4px solid var(--red);
}

.dong-thong-bao.thong-bao-chua-doc .dong-thong-bao-ten b {
    font-weight: var(--fw-black);
}

.dong-thong-bao small,
.dong-thong-bao-tom-tat {
    color: var(--muted);
    font-size: var(--fs-sm);
}

.dong-thong-bao-nhan {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: none;
}

.nhan-xac-nhan,
.dong-thong-bao .nhan-moi {
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    padding: var(--sp-4) 10px;
    border-radius: var(--r-pill);
}

.dong-thong-bao .nhan-moi {
    background: #fff0f1;
    color: var(--red-text);
}

.nhan-xac-nhan {
    background: #fff6e0;
    color: #8a5a00;
}

.nhan-xac-nhan.xong {
    background: #e6f6ec;
    color: #19703a;
}

.chi-tiet-thong-bao {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
}

.chi-tiet-thong-bao .tep-thong-bao,
.chi-tiet-thong-bao .xac-nhan-thong-bao {
    margin-top: var(--sp-24);
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.chi-tiet-thong-bao .kicker {
    display: block;
    margin-bottom: 18px;
}

.chi-tiet-thong-bao .quay-lai {
    margin-top: var(--sp-24);
}

@media (max-width: 640px) {
    .dong-thong-bao {
        flex-direction: column;
    }

    .dong-thong-bao-nhan {
        justify-content: flex-start;
    }

    .chi-tiet-thong-bao {
        padding: 18px;
    }
}

/* V28: lịch nội bộ */
.lich-dieu-huong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-bottom: 18px;
}

.lich-dieu-huong h2 {
    margin: 0;
    font-size: var(--fs-h3);
    text-align: center;
}

.lich-ve-nay {
    margin: -8px 0 18px;
    text-align: center;
    font-size: var(--fs-md);
}

.lich-ngay {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--sp-16);
    margin-bottom: 18px;
}

.lich-ngay-nhan {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    border-radius: var(--r-sm);
    background: var(--blue-dark);
    color: #fff;
    align-self: start;
}

.lich-ngay-nhan strong {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
}

.lich-ngay-nhan span {
    font-size: var(--fs-xs);
}

.lich-ngay-ds {
    display: grid;
    gap: var(--sp-12);
    min-width: 0;
}

.lich-su-kien {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: var(--sp-16);
    padding: var(--sp-16) 18px;
    border: 1px solid #e3e8f2;
    border-radius: var(--r-md);
    background: #fff;
}

.lich-gio {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.lich-loai {
    padding: 2px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    background: #e8eefc;
    color: var(--blue-dark);
}

.lich-loai-hop {
    background: #fff1d6;
    color: #8a5a00;
}

.lich-loai-su-kien {
    background: #e3f6ea;
    color: #1d6b3a;
}

.lich-chinh {
    min-width: 0;
}

.lich-chinh h3 {
    margin: 0 0 6px;
    font-size: var(--fs-lg);
}

.lich-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--muted);
    font-size: var(--fs-md);
}

.lich-mo-ta {
    margin-top: var(--sp-8);
    font-size: var(--fs-base);
    overflow-wrap: anywhere;
}

.lich-hanh-dong {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin-top: var(--sp-12);
}

.sap-toi-7-ngay {
    margin-top: 36px;
}

.sap-toi-dong {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: var(--sp-12);
    margin-bottom: var(--sp-12);
}

.sap-toi-ngay {
    padding-top: var(--sp-16);
    color: var(--blue-dark);
    text-align: center;
    font-size: var(--fs-lg);
}

@media (max-width: 700px) {
    .lich-ngay {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }

    .lich-ngay-nhan {
        flex-direction: row;
        gap: 10px;
        align-items: baseline;
        justify-self: start;
        padding: 6px 14px;
    }

    .lich-su-kien {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }

    .lich-gio {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .lich-dieu-huong {
        flex-wrap: wrap;
        justify-content: center;
    }

    .lich-dieu-huong h2 {
        order: -1;
        flex-basis: 100%;
    }

    .sap-toi-dong {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sap-toi-ngay {
        padding: 0;
        text-align: left;
    }
}

/* V29: truyền thông nội bộ, vinh danh, thư viện ảnh */
.tab-noi-bo {
    display: flex;
    gap: var(--sp-8);
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.tab-noi-bo a {
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    background: #fff;
}

.tab-noi-bo a:hover,
.tab-noi-bo a.active {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: #fff;
}

.khung-trong-anh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--fs-h2);
    color: var(--muted);
    background: linear-gradient(135deg, #eef2f8, #dfe7f3);
}

.bai-noi-bo {
    max-width: 820px;
    margin: 0 auto;
}

.bia-bai-noi-bo {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--r-lg);
    margin-bottom: 22px;
}

.thang-vinh-danh + .thang-vinh-danh {
    margin-top: 38px;
}

.thang-vinh-danh h2 {
    margin: 0 0 var(--sp-16);
    font-size: var(--fs-2xl);
    color: var(--blue-dark);
}

.luoi-vinh-danh {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.the-vinh-danh {
    display: flex;
    gap: var(--sp-16);
    align-items: flex-start;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
}

.the-vinh-danh .chan-dung {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #fff3d6, #ffe0a3);
    color: #c98a00;
    font-size: var(--fs-h2);
}

.the-vinh-danh .chan-dung img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.the-vinh-danh small {
    color: var(--red-text);
    font-weight: var(--fw-black);
}

.the-vinh-danh h3 {
    margin: var(--sp-4) 0;
    font-size: var(--fs-lg);
}

.the-vinh-danh .chi-nhanh-vd {
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
}

.the-vinh-danh p {
    margin: var(--sp-8) 0 0;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.luoi-anh-album {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: var(--sp-24);
}

.luoi-anh-album figure {
    margin: 0;
}

.luoi-anh-album img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-md);
    background: var(--soft);
}

.luoi-anh-album figcaption {
    margin-top: 6px;
    font-size: var(--fs-sm);
    color: var(--muted);
}

@media (max-width: 900px) {
    .luoi-vinh-danh { grid-template-columns: repeat(2, 1fr); }
    .luoi-anh-album { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .luoi-vinh-danh { grid-template-columns: 1fr; }
}

/* V27: thư viện tài liệu nội bộ (quy trình – quy định, biểu mẫu, tài liệu mùa vụ) */
.tim-lon select {
    padding: 0 var(--sp-16);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font: inherit;
    background: #fff;
    max-width: 220px;
}

.danh-sach-tai-lieu {
    display: grid;
    gap: var(--sp-12);
}

.dong-tai-lieu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: var(--sp-16) 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.dong-tai-lieu:hover {
    box-shadow: var(--shadow);
}

.dong-tai-lieu-ten {
    display: grid;
    gap: var(--sp-4);
    min-width: 0;
}

.dong-tai-lieu-ten b {
    font-size: var(--fs-base);
    overflow-wrap: anywhere;
}

.dong-tai-lieu-ten small,
.dong-tai-lieu-meta {
    color: var(--muted);
    font-size: var(--fs-sm);
}

.ma-tai-lieu {
    display: inline-block;
    margin-right: var(--sp-8);
    padding: 2px var(--sp-8);
    border-radius: 6px;
    background: #edf3fb;
    color: var(--blue);
    font-weight: var(--fw-black);
    font-size: var(--fs-xs);
}

.dong-tai-lieu .nhan-moi,
.chi-tiet-tai-lieu .nhan-moi {
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    padding: var(--sp-4) 10px;
    border-radius: var(--r-pill);
    background: #fff0f1;
    color: var(--red-text);
    vertical-align: middle;
    white-space: nowrap;
}

.dong-tai-lieu .tai-ve,
.dong-lich-su .tai-ve {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--red-text);
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    background: #fff0f1;
}

.dong-tai-lieu .tai-ve:hover,
.dong-lich-su .tai-ve:hover {
    background: var(--red);
    color: #fff;
}

.chi-tiet-tai-lieu {
    max-width: 860px;
    margin: 0 auto;
}

.the-hien-hanh {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.the-hien-hanh h2 {
    margin: 6px 0 14px;
}

.thong-tin-tai-lieu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px var(--sp-24);
    margin: 0;
}

.thong-tin-tai-lieu dt {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.thong-tin-tai-lieu dd {
    margin: 2px 0 0;
    font-weight: var(--fw-bold);
}

.mo-ta-tai-lieu {
    margin: var(--sp-16) 0 0;
    color: var(--muted);
}

.lich-su-ban {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.dong-lich-su {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.dong-lich-su > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.dong-lich-su.hien-hanh {
    border-left: 4px solid var(--blue);
}

.dong-lich-su small {
    color: var(--muted);
}

.nhan-hien-hanh {
    font-style: normal;
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: #e6f6ec;
    color: #19703a;
}

@media (max-width: 680px) {
    .tim-lon {
        flex-wrap: wrap;
    }

    .tim-lon select {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        padding: var(--sp-12) var(--sp-16);
    }

    .the-hien-hanh {
        flex-direction: column;
        padding: 18px;
    }

    .the-hien-hanh .btn {
        width: 100%;
        text-align: center;
    }

    .thong-tin-tai-lieu {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   V32 — Nền chữ, khoảng cách và đồng nhất thành phần (đặt cuối để thắng các khối V02–V30 khi bằng độ ưu tiên)
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--lh-heading);
    font-weight: var(--fw-black);
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

section {
    padding: clamp(var(--sp-48), 6vw, 72px) 0;
}

/* Focus nhìn thấy cho bàn phím (chỉ hiện khi dùng phím, không hiện khi bấm chuột) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.hero a:focus-visible,
.pageHero a:focus-visible,
.academyHero a:focus-visible,
.portalHero a:focus-visible,
footer a:focus-visible {
    outline-color: #fff;
}

/* Ô nhập đồng đều: cao 48px, cùng viền, cùng bo, mũi tên chọn tự vẽ (select gốc của trình duyệt xám và lệch chiều cao) */
.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form select,
.form textarea,
.loginPanel input,
.academyLogin input,
.loc-chi-nhanh input,
.loc-chi-nhanh select,
.tim-lon input,
.tim-lon select {
    min-height: 48px;
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid #cfd6e1;
    border-radius: var(--r-sm);
    background-color: #fff;
    color: var(--ink);
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
}

.form select,
.loc-chi-nhanh select,
.tim-lon select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23152033' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.form textarea {
    min-height: 120px;
}

.form input::placeholder,
.form textarea::placeholder,
.loc-chi-nhanh input::placeholder,
.tim-lon input::placeholder {
    color: #6b7585;
    opacity: 1;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.loc-chi-nhanh input:focus,
.loc-chi-nhanh select:focus,
.tim-lon input:focus,
.tim-lon select:focus,
.loginPanel input:focus {
    border-color: var(--blue);
    outline: 3px solid rgba(13,62,126,.25);
    outline-offset: 0;
}

.form input[type="file"] {
    padding: var(--sp-8) var(--sp-12);
    font-size: var(--fs-md);
}

.form input[type="file"]::file-selector-button {
    margin-right: var(--sp-12);
    padding: var(--sp-8) var(--sp-16);
    border: 0;
    border-radius: var(--r-pill);
    background: #f1f4f8;
    color: var(--blue);
    font: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

.form input[type="checkbox"],
.form input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.btn {
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    min-height: 44px;
}

/* Đầu trang con: thấp hơn một chút để nội dung lên sớm, đệm trên/dưới cân nhau */
.pageHero {
    padding: clamp(var(--sp-48), 5vw, 64px) 0 clamp(var(--sp-32), 4.5vw, 56px);
    min-height: clamp(200px, 20vw, 260px);
}

.pageHero h1 {
    font-size: var(--fs-h1);
    margin: var(--sp-12) 0;
}

/* Liên hệ: mô tả trong thẻ kênh sát tiêu đề, thẻ cân đệm trên/dưới; ghi chú dưới form cách form một nhịp */
.contactItem b {
    display: block;
}

.contactItem p {
    margin: var(--sp-4) 0 0;
}

.thong-bao-lien-he {
    margin-top: var(--sp-16);
}

/* Cuộn ngang trong thanh menu phụ không để lộ thanh cuộn xấu */
.menuPhu,
.menu-phu {
    scrollbar-width: none;
}

.hero h1,
.pageHero h1,
.academyHeroCopy h1 {
    letter-spacing: -.01em;
}

/* Popup xem nhanh khoá học trên /academy (theo .academyModal của demo, dùng <dialog> gốc: Esc + bẫy focus có sẵn) */
dialog.academyModal {
    width: min(820px, calc(100% - 40px));
    max-height: 90vh;
    padding: 0;
    border: 0;
    border-radius: var(--r-xl);
    background: var(--white);
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    overflow: hidden;
}

dialog.academyModal::backdrop {
    background: rgba(3,12,28,.72);
}

.academyModalCard {
    position: relative;
    max-height: 90vh;
    overflow: auto;
}

.academyModalClose {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.95);
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
}

.academyModalClose:focus-visible {
    box-shadow: var(--focus);
    outline: 0;
}

.modalVideo.courseThumb {
    height: 230px;
    display: grid;
    place-items: center;
}

.modalVideo > span {
    position: relative;
    z-index: 1;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--white);
    color: var(--red);
    display: grid;
    place-items: center;
    font-size: var(--fs-2xl);
}

.modalContent {
    padding: 26px;
}

.modalContent h2 {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    margin: 6px 0;
}

.modalContent > p {
    color: var(--muted);
    line-height: var(--lh-snug);
}

.modalContent .lessonList > div.da-xong i {
    color: #16784a;
}

.popup-con-bai {
    margin-top: -8px;
    font-size: var(--fs-xs);
}

@media(max-width:680px) {
    dialog.academyModal {
        width: calc(100% - 20px);
    }

    .modalVideo.courseThumb {
        height: 180px;
    }

    .modalContent {
        padding: 20px;
    }
}