:root{
  --xanh:#1f6fb2; --xanh-dam:#134a7a; --xanh-nhat:#eaf4fc;
  --hong:#e5245f; --hong-dam:#c21a4e;
  --chu:#1d2a36; --chu-phu:#55636f; --nen:#ffffff; --nen-phu:#f6f8fa; --vien:#dfe5eb;
  --bo:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nen);color:var(--chu);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;-webkit-text-size-adjust:100%}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--xanh)}
.khung{max-width:1080px;margin:0 auto;padding:0 16px}
h1,h2,h3{line-height:1.25;margin:0 0 .6em}
h2{font-size:1.6rem;color:var(--xanh-dam)}
h3{font-size:1.15rem;color:var(--xanh-dam)}
section{padding:48px 0}
section[id]{scroll-margin-top:60px}
section.xam{background:var(--nen-phu)}
.nho{font-size:.9rem;color:var(--chu-phu);font-style:italic}

/* thanh trên */
.thanh-tren{background:#fff;border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:20}
.thanh-tren .khung{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px}
.logo{font-weight:800;color:var(--xanh-dam);text-decoration:none;line-height:1.2;font-size:1rem}
.logo small{display:block;font-weight:500;color:var(--chu-phu);font-size:.8rem}
.thanh-tren .goi{white-space:nowrap;background:var(--hong);color:#fff;text-decoration:none;font-weight:700;padding:9px 14px;border-radius:999px;font-size:.95rem}

/* nút */
.nut{display:flex;flex-wrap:wrap;gap:12px}
.nut a{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1.05rem}
.nut .n-goi{background:var(--hong);color:#fff}
.nut .n-goi:hover{background:var(--hong-dam)}
.nut .n-zalo{background:#fff;color:var(--xanh);border:2px solid var(--xanh)}
.nut .n-zalo:hover{background:var(--xanh-nhat)}

/* đầu trang chủ */
.dau{background:linear-gradient(180deg,var(--xanh-nhat),#fff);padding:36px 0 44px}
.dau .khung{display:grid;gap:28px;align-items:center}
.dau h1{font-size:2rem;color:var(--xanh-dam)}
.dau p{font-size:1.1rem;margin:0 0 22px}
.anh-dau{border-radius:var(--bo);overflow:hidden;box-shadow:0 10px 30px rgba(19,74,122,.18)}
.anh-dau img{width:100%}
.video-dau{border-radius:var(--bo);overflow:hidden;box-shadow:0 10px 30px rgba(19,74,122,.18);max-width:260px;margin:0 auto;background:#0b1830}
.video-dau video{width:100%;aspect-ratio:480/854;object-fit:cover}
.chu-thich{font-size:.9rem;color:var(--chu-phu);text-align:center;margin-top:8px}

/* dải 4 ô nổi bật */
.dai-o{padding:0 0 8px}
.bon-o{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bon-o li{background:#fff;border:1px solid var(--vien);border-radius:var(--bo);padding:14px}
.bon-o b{display:block;color:var(--xanh);font-size:1.15rem;line-height:1.25;margin-bottom:4px}
.bon-o span{font-size:.92rem;color:var(--chu-phu);line-height:1.4;display:block}

/* vì sao */
.ly-do{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ly-do li{background:#fff;border:1px solid var(--vien);border-radius:var(--bo);padding:16px 18px 16px 52px;position:relative}
.ly-do li::before{content:"✓";position:absolute;left:16px;top:15px;width:24px;height:24px;border-radius:50%;background:var(--xanh);color:#fff;font-weight:700;font-size:.85rem;display:grid;place-items:center}
.ly-do li.bac-si{border-color:var(--hong);background:#fff5f8}
.ly-do li.bac-si::before{background:var(--hong)}

/* đèn */
.den{display:grid;gap:28px;align-items:start}
.den figure{margin:0}
.den figure img{border-radius:var(--bo)}
.tem{margin-top:14px;border:1px solid var(--vien);border-radius:10px;overflow:hidden}
.bang{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--vien);font-size:.98rem}
.bang th,.bang td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--vien);vertical-align:top}
.bang th{width:42%;color:var(--chu-phu);font-weight:600;background:var(--nen-phu)}
.bang caption{caption-side:bottom;text-align:left;padding-top:8px}
.noi-bat{font-size:1.15rem;font-weight:600;color:var(--xanh-dam);margin:0 0 14px}
.giai-thich{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.giai-thich li{background:var(--xanh-nhat);border-radius:var(--bo);padding:14px}
.giai-thich b{display:block;font-size:1.3rem;color:var(--xanh-dam)}
.giai-thich span{font-size:.92rem;line-height:1.45;display:block}
.vi-sao-2-mat{margin-top:22px;background:#fff;border:1px solid var(--vien);border-left:5px solid var(--xanh);border-radius:10px;padding:16px 18px}
.vi-sao-2-mat p{margin:0}

/* bước */
.buoc{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:b}
.buoc li{counter-increment:b;background:#fff;border:1px solid var(--vien);border-radius:var(--bo);padding:20px 20px 20px 74px;position:relative;min-height:84px}
.buoc li::before{content:counter(b);position:absolute;left:18px;top:18px;width:40px;height:40px;border-radius:50%;background:var(--xanh);color:#fff;font-weight:800;font-size:1.2rem;display:grid;place-items:center}

.dat-coc{margin-top:22px;background:#fff;border:2px solid var(--xanh);border-radius:var(--bo);padding:20px}
.dat-coc h3{margin-bottom:.4em}
.dat-coc p{margin:0 0 14px}

/* hình ảnh */
.luoi{display:grid;gap:16px;grid-template-columns:1fr}
.luoi figure{margin:0;background:#fff;border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden}
.luoi figure img,.luoi figure video{width:100%}
.luoi figcaption{padding:10px 14px;font-size:.95rem;color:var(--chu-phu);background:#fff}
.video-khung{background:#0b1830}
.video-khung video{max-height:620px;margin:0 auto}

/* khu vực */
.noi{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 18px}
.noi li{background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:700;padding:8px 16px;border-radius:999px}
.ban-do{margin-top:22px;border-radius:var(--bo);overflow:hidden;border:1px solid var(--vien)}
.ban-do iframe{display:block;width:100%;height:320px;border:0}

/* lưu ý */
.canh-bao{background:#fff5f5;border-left:5px solid #d93025;border-radius:10px;padding:16px 18px;margin:18px 0}

/* thẻ bài kiến thức */
.the-bai{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.the-bai a{display:block;height:100%;background:#fff;border:1px solid var(--vien);border-radius:var(--bo);padding:18px;text-decoration:none;color:var(--chu)}
.the-bai a:hover{border-color:var(--xanh);box-shadow:0 6px 18px rgba(19,74,122,.1)}
.the-bai small{color:var(--hong);font-weight:700;letter-spacing:.04em}
.the-bai strong{display:block;color:var(--xanh-dam);font-size:1.1rem;line-height:1.3;margin:4px 0 6px}
.the-bai span{display:block;font-size:.95rem;color:var(--chu-phu);line-height:1.5}
.the-bai em{display:inline-block;margin-top:10px;font-style:normal;font-weight:700;color:var(--xanh)}

/* trang bài viết */
.duong-dan{font-size:.88rem;color:var(--chu-phu);padding:14px 0 0}
.duong-dan a{color:var(--chu-phu)}
.bai{max-width:760px;margin:0 auto;padding:18px 16px 40px}
.bai h1{font-size:1.85rem;color:var(--xanh-dam);margin-top:8px}
.bai h2{font-size:1.35rem;margin-top:1.6em}
.bai p,.bai li{margin:0 0 .7em}
.bai ul,.bai ol{padding-left:1.3em}
.thong-tin-bai{font-size:.9rem;color:var(--chu-phu);border-bottom:1px solid var(--vien);padding-bottom:12px;margin-bottom:20px}
.tom-y{background:var(--xanh-nhat);border-radius:var(--bo);padding:16px 18px;margin:0 0 22px}
.tom-y p{margin:0}
.hop-lien-he{margin:30px 0;background:var(--nen-phu);border:1px solid var(--vien);border-radius:var(--bo);padding:20px}
.hop-lien-he p{margin:0 0 14px}
.nguon{font-size:.92rem;border-top:1px solid var(--vien);margin-top:30px;padding-top:12px}
.nguon li{margin-bottom:.4em}
.bai-khac{list-style:none;padding:0}
.bai-khac li{margin:0 0 8px}

/* cuối trang */
.cuoi{background:var(--xanh-dam);color:#e9f1f8;padding:44px 0 120px}
.cuoi h2{color:#fff}
.cuoi a{color:#fff}
.cuoi .nut .n-zalo{background:transparent;color:#fff;border-color:#fff}
.cuoi .nut .n-zalo:hover{background:rgba(255,255,255,.1)}
.dich-vu{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.ban-quyen{margin-top:26px;font-size:.85rem;opacity:.75}

/* thanh nút dưới (điện thoại) */
.thanh-duoi{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 -4px 16px rgba(0,0,0,.12);padding-bottom:env(safe-area-inset-bottom);background:#fff}
.thanh-duoi a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;font-weight:800;text-decoration:none;font-size:1.05rem}
.thanh-duoi .goi{background:var(--hong);color:#fff}
.thanh-duoi .zalo{background:var(--xanh);color:#fff}

@media (min-width:760px){
  .dau .khung{grid-template-columns:1.25fr 1fr}
  .dau h1{font-size:2.5rem}
  .video-dau{max-width:320px}
  .bon-o{grid-template-columns:repeat(4,1fr)}
  .den{grid-template-columns:1fr 1fr}
  .giai-thich{grid-template-columns:repeat(4,1fr)}
  .ly-do{grid-template-columns:1fr 1fr}
  .buoc{grid-template-columns:repeat(3,1fr)}
  .buoc li{padding:72px 20px 20px}
  .luoi{grid-template-columns:repeat(2,1fr)}
  .luoi .rong{grid-row:span 2}
  .the-bai{grid-template-columns:1fr 1fr}
  .bai h1{font-size:2.2rem}
  .thanh-duoi{display:none}
  .cuoi{padding-bottom:44px}
}
@media (min-width:1000px){ .luoi{grid-template-columns:repeat(3,1fr)} }