@import url("fonts.css");

:root{
  --xanh-dam:#14323b;
  --xanh-dam-2:#0e262d;
  --xanh-sang:#1f6f7a;
  --xanh-sang-2:#195b64;
  --dong:#c9a14a;
  --nen:#ffffff;
  --nen-mo:#f4f8f8;
  --chu:#13262e;
  --chu-mo:#4a5f66;
  --vien:#dfe8e9;
  --rong:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nen);color:var(--chu);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:var(--xanh-sang-2);text-decoration:none;border-bottom:1px solid rgba(31,111,122,.3)}
a:hover{border-bottom-color:var(--xanh-sang)}
h1,h2,h3{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-weight:700;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.2vw,3.35rem);letter-spacing:-.015em}
h2{font-size:clamp(1.55rem,3.4vw,2.3rem);letter-spacing:-.01em}
h3{font-size:1.18rem;font-family:"Be Vietnam Pro",sans-serif;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1.1em;max-width:68ch}
.boc{width:100%;max-width:var(--rong);margin:0 auto;padding:0 22px}
.hep{max-width:760px}

/* ── dau trang ───────────────────────────────── */
.dau{background:var(--xanh-dam);color:#eaf3f3;position:relative;z-index:20}
.dau .boc{display:flex;align-items:center;gap:26px;min-height:68px}
.hieu{font-family:"Playfair Display",serif;font-weight:700;font-size:1.42rem;color:#fff;border:0;letter-spacing:-.01em;white-space:nowrap}
.hieu span{color:var(--dong)}
.menu{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.menu a{color:#cfe2e4;border:0;font-size:.95rem;font-weight:500}
.menu a:hover,.menu a[aria-current]{color:#fff}
.dau-goi{color:#fff!important;border:1px solid rgba(255,255,255,.34);padding:7px 15px;border-radius:2px;font-weight:600}
.dau-goi:hover{background:var(--xanh-sang);border-color:var(--xanh-sang)}
@media(max-width:860px){.menu{display:none}.dau .boc{min-height:58px}.menu.rut{display:flex;gap:14px;margin-left:auto}.menu.rut a{font-size:.88rem}}

/* ── nut ─────────────────────────────────────── */
.nut{display:inline-block;padding:14px 26px;border-radius:2px;font-weight:600;font-size:1rem;border:0;min-height:44px;line-height:1.3}
.nut-chinh{background:var(--xanh-sang);color:#fff}
.nut-chinh:hover{background:var(--xanh-sang-2)}
.nut-vien{border:1.5px solid var(--xanh-sang);color:var(--xanh-sang-2)}
.nut-vien:hover{background:var(--nen-mo)}
.nut-sang{background:var(--dong);color:#2a1f08}
.nut-sang:hover{background:#b8913f}
.hang-nut{display:flex;gap:13px;flex-wrap:wrap;margin:1.7em 0 0}

/* ── hero ────────────────────────────────────── */
.hero{background:linear-gradient(176deg,var(--xanh-dam) 0%,var(--xanh-dam-2) 100%);color:#eef5f5;padding:66px 0 76px;overflow:hidden}
.hero h1{color:#fff;max-width:17ch}
.hero-cot{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.hero-phu{font-size:1.14rem;color:#bdd5d8;max-width:46ch;margin-bottom:0}
.hero .nut-vien{border-color:rgba(255,255,255,.45);color:#fff}
.hero .nut-vien:hover{background:rgba(255,255,255,.1)}
.hero-ghi{margin:30px 0 0;font-size:.9rem;color:#8fb0b5;max-width:44ch}
@media(max-width:900px){.hero{padding:44px 0 52px}.hero-cot{grid-template-columns:1fr;gap:40px}}

/* ── khung dien thoai (minh hoa) ──────────────── */
.dt{width:286px;margin:0 auto;background:#0a1b20;border-radius:34px;padding:11px;box-shadow:0 24px 54px rgba(0,0,0,.42);border:1px solid #27454c}
.dt-man{background:#fbfdfd;border-radius:25px;overflow:hidden;color:var(--chu)}
.dt-dau{background:var(--xanh-dam);color:#fff;padding:13px 15px 11px}
.dt-dau b{font-size:.93rem;display:block;font-weight:600}
.dt-dau i{font-style:normal;font-size:.72rem;color:#9fc0c4}
.dt-than{padding:13px 15px 15px;font-size:.78rem}
.dt-nhan{font-size:.68rem;color:var(--chu-mo);margin:0 0 5px;font-weight:500}
.dt-o{border:1px solid var(--vien);border-radius:3px;padding:7px 9px;margin:0 0 11px;background:#fff;font-size:.76rem}
.dt-o.chon{border-color:var(--xanh-sang);background:#eef6f6;font-weight:500}
.dt-canh{background:#fdf4e3;border-left:3px solid var(--dong);padding:7px 9px;margin:0 0 11px;font-size:.73rem;line-height:1.45}
.dt-canh b{color:#7a5c14}
.dt-sao{color:var(--dong);letter-spacing:2px;font-size:.95rem}
.dt-tip{display:flex;gap:5px;margin:0 0 11px}
.dt-tip span{flex:1;text-align:center;border:1px solid var(--vien);border-radius:3px;padding:5px 0;font-size:.72rem}
.dt-tip span.chon{border-color:var(--xanh-sang);background:var(--xanh-sang);color:#fff;font-weight:600}
.dt-ky{border:1px dashed #c3d3d5;border-radius:3px;height:46px;position:relative;background:#fff;margin:0 0 11px}
.dt-ky svg{position:absolute;inset:0;width:100%;height:100%}
.dt-nut{background:var(--xanh-sang);color:#fff;text-align:center;padding:9px;border-radius:3px;font-weight:600;font-size:.8rem}
.dt-ghi{text-align:center;font-size:.72rem;color:#8fb0b5;margin:13px 0 0}

/* ── khoi chung ──────────────────────────────── */
section{padding:62px 0}
.mo{background:var(--nen-mo)}
.toi{background:var(--xanh-dam);color:#e7f1f1}
.toi h2{color:#fff}
.toi p{color:#bdd5d8}
.dan{font-size:1.1rem;color:var(--chu-mo);max-width:60ch;margin-bottom:2.1em}
.toi .dan{color:#a9c6ca}

/* ── 6 khoan that thoat: danh sach co gach ngang ── */
.that{display:grid;grid-template-columns:repeat(2,1fr);gap:0 46px;margin:0;padding:0;list-style:none;border-top:1px solid var(--vien)}
.that li{padding:19px 0;border-bottom:1px solid var(--vien)}
.that b{display:block;font-weight:600;font-size:1.02rem;margin-bottom:3px}
.that span{color:var(--chu-mo);font-size:.96rem}
@media(max-width:760px){.that{grid-template-columns:1fr;gap:0}}

/* ── 4 dich vu ───────────────────────────────── */
.dv{display:grid;grid-template-columns:repeat(2,1fr);gap:42px}
.dv>div{padding-left:20px;border-left:2px solid var(--dong)}
.dv h3{margin-bottom:.35em}
.dv p{font-size:.98rem;color:var(--chu-mo);margin-bottom:.7em}
@media(max-width:760px){.dv{grid-template-columns:1fr;gap:30px}}

/* ── 2 cot bao ve ────────────────────────────── */
.bv{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:8px}
.bv h3{color:var(--dong);font-size:1.08rem}
.bv ul{margin:0;padding-left:19px}
.bv li{margin-bottom:.65em;color:#cadede}
@media(max-width:760px){.bv{grid-template-columns:1fr;gap:30px}}

/* ── quy trinh that (duoc danh so) ───────────── */
.qt{counter-reset:b;margin:0;padding:0;list-style:none;max-width:780px}
.qt li{counter-increment:b;position:relative;padding:0 0 25px 54px;border-left:1px solid var(--vien);margin-left:13px}
.qt li:last-child{border-left-color:transparent;padding-bottom:0}
.qt li::before{content:counter(b);position:absolute;left:-14px;top:0;width:28px;height:28px;border-radius:50%;background:var(--xanh-sang);color:#fff;font-size:.82rem;font-weight:600;display:grid;place-items:center}
.qt b{display:block;font-weight:600;margin-bottom:2px}
.qt span{color:var(--chu-mo);font-size:.97rem}

/* ── cam ket ─────────────────────────────────── */
.ck{margin:0;padding:0;list-style:none;max-width:70ch}
.ck li{padding:13px 0 13px 28px;border-bottom:1px solid var(--vien);position:relative}
.ck li::before{content:"";position:absolute;left:0;top:22px;width:11px;height:2px;background:var(--dong)}

/* ── gia ─────────────────────────────────────── */
.bang{width:100%;border-collapse:collapse;font-size:.97rem;margin-bottom:1.4em}
.bang caption{text-align:left;font-weight:600;padding:0 0 9px;font-size:1.05rem}
.bang th,.bang td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--vien);vertical-align:top}
.bang thead th{background:var(--xanh-dam);color:#fff;font-weight:600;font-size:.9rem}
.bang tbody tr:nth-child(even){background:var(--nen-mo)}
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ghi-gia{font-size:.9rem;color:var(--chu-mo)}

/* ── hoi dap ─────────────────────────────────── */
.fq{max-width:800px;border-top:1px solid var(--vien)}
.fq details{border-bottom:1px solid var(--vien)}
.fq summary{cursor:pointer;padding:17px 34px 17px 0;font-weight:600;position:relative;list-style:none;min-height:44px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:4px;top:15px;font-size:1.3rem;color:var(--xanh-sang);font-weight:400}
.fq details[open] summary::after{content:"–"}
.fq div{padding:0 0 17px}
.fq p{margin:0}

/* ── khung anh cho ───────────────────────────── */
.cho-anh{border:1px dashed #c3d3d5;background:var(--nen-mo);display:grid;place-items:center;text-align:center;color:var(--chu-mo);font-size:.9rem;padding:40px 18px;border-radius:3px}

/* ── lien he ─────────────────────────────────── */
.lh{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.lh-hop{background:var(--nen-mo);border:1px solid var(--vien);padding:28px;border-radius:3px}
.lh-hop h3{margin-top:0}
.lh-dong{display:block;padding:11px 0;border-bottom:1px solid var(--vien);font-size:1.02rem}
.lh-dong:last-child{border-bottom:0}
@media(max-width:760px){.lh{grid-template-columns:1fr;gap:28px}}

/* ── lien ket trong ──────────────────────────── */
.lkt{display:flex;gap:11px 22px;flex-wrap:wrap;padding:22px 0 0;border-top:1px solid var(--vien);font-size:.96rem;margin-top:14px}

/* ── chan trang ──────────────────────────────── */
.chan{background:var(--xanh-dam-2);color:#9fb9bd;padding:46px 0 34px;font-size:.94rem}
.chan a{color:#cfe2e4;border:0}
.chan a:hover{color:#fff}
.chan-cot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:28px}
.chan h4{color:#fff;font-size:.95rem;margin:0 0 11px;font-weight:600}
.chan ul{margin:0;padding:0;list-style:none}
.chan li{margin-bottom:7px}
.chan-cuoi{border-top:1px solid #1e3c44;padding-top:19px;font-size:.87rem}
@media(max-width:760px){.chan-cot{grid-template-columns:1fr;gap:24px}}

/* ── thanh dien thoai co dinh ────────────────── */
.thanh{display:none}
@media(max-width:860px){
  .thanh{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid var(--vien);box-shadow:0 -3px 14px rgba(0,0,0,.09);
    padding-bottom:env(safe-area-inset-bottom)}
  .thanh a{display:grid;place-items:center;padding:12px 4px;min-height:52px;font-size:.87rem;font-weight:600;color:var(--xanh-dam);border:0;border-right:1px solid var(--vien)}
  .thanh a:last-child{border-right:0}
  .thanh a.nhan{background:var(--xanh-sang);color:#fff}
  body{padding-bottom:62px}
}

/* ── 404 ─────────────────────────────────────── */
.e404{text-align:center;padding:92px 0}
.e404 p{margin-left:auto;margin-right:auto}

@media print{.thanh,.dau,.chan{display:none}}

/* ── lop tien dung (thay cho style noi tuyen, de CSP chat) ── */
.dinh{padding-top:46px}
.dinh0{padding-top:0}
.tren{align-items:start}
.giua{text-align:center}
.giua>p{margin-left:auto;margin-right:auto}
.giua .hang-nut{justify-content:center}
.nut-giua{justify-content:center}
.c16{margin-top:1.6em}.c14{margin-top:1.4em}.c11{margin-top:1.1em}.c18{margin-top:1.8em}
.rong-het{max-width:none}
.chan-gt{margin:12px 0 0;max-width:34ch}
.hieu-nho{font-size:1.3rem}
.ds-moc{margin:0;padding-left:19px;list-style:disc}
.ds-moc li{margin-bottom:.6em;color:#cadede}
.lkt-giua{justify-content:center;margin-top:2.2em}