/* ============================================================
   SOUTH WIND — Bộ giao diện dùng chung
   Màu: Xanh · Trắng · Xám    |    Font: Roboto
   Dùng lại nguyên vẹn cho theme WordPress ở Giai đoạn 2
   ============================================================ */

/* ---------- 1. TOKEN MÀU ---------- */
/* --blue-700 = #25408F : màu XANH CHUẨN — khách xác nhận từ phần mềm thiết kế (R37 G64 B143 / C100 M90 Y10 K0) */
:root{
  --blue-900:#172859;
  --blue-800:#1E3372;
  --blue-700:#25408F;
  --blue-500:#3154BD;
  --blue-300:#8199DE;
  --blue-50:#F3F5F9;

  --gray-700:#3A3A3C;
  --gray-500:#65728A;
  --gray-400:#8492A6;
  --gray-200:#DFE4EC;
  --gray-100:#F4F6F9;
  --white:#FFFFFF;

  --ink:#16233A;
  --bg:var(--white);
  --bg-alt:var(--gray-100);
  --bg-tint:var(--blue-50);
  --card:var(--white);
  --line:var(--gray-200);
  --body:var(--gray-700);
  --meta:var(--gray-400);
  --accent:var(--blue-500);
  --heading:var(--blue-900);

  --on-dark:#E8EEF8;
  --on-dark-dim:#A6BBDA;
  --dark-1:#20377B;
  --dark-2:#25408F;
  --dark-3:#0F1C42;

  --shadow-sm:0 1px 2px rgba(12,40,90,.06),0 6px 18px rgba(12,40,90,.07);
  --shadow-lg:0 20px 52px rgba(10,42,85,.16);
  --radius:0px;
  --radius-lg:0px;
  --maxw:1180px;
  --font:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --watermark:url('img/logo-watermark.svg');
}

/* Dark mode — hệ thống (chỉ khi người dùng không chọn light) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --blue-900:#CFE0F7;
    --blue-800:#A9C6EE;
    --blue-700:#6FA1E4;
    --blue-500:#5E9AE8;
    --blue-300:#3E6DA8;
    --blue-50:#152538;

    --gray-700:#B3BFD1;
    --gray-500:#93A1B6;
    --gray-400:#7C8AA0;
    --gray-200:#243247;
    --gray-100:#111A28;
    --white:#0B111C;

    --ink:#E8EEF7;
    --bg:#0B111C;
    --bg-alt:#101A28;
    --bg-tint:#152538;
    --card:#121D2C;
    --line:#243247;
    --body:#B3BFD1;
    --meta:#7C8AA0;
    --accent:#5E9AE8;
    --heading:#DCE8F9;

    --dark-1:#0D2544;
    --dark-2:#123258;
    --dark-3:#060E1A;
    --shadow-sm:0 1px 2px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.4);
    --shadow-lg:0 20px 52px rgba(0,0,0,.6);
  }
}
/* Dark mode — người dùng chọn thủ công */
:root[data-theme="dark"]{
  --blue-900:#CFE0F7;--blue-800:#A9C6EE;--blue-700:#6FA1E4;--blue-500:#5E9AE8;
  --blue-300:#3E6DA8;--blue-50:#152538;--gray-700:#B3BFD1;--gray-500:#93A1B6;
  --gray-400:#7C8AA0;--gray-200:#243247;--gray-100:#111A28;--white:#0B111C;
  --ink:#E8EEF7;--bg:#0B111C;--bg-alt:#101A28;--bg-tint:#152538;--card:#121D2C;
  --line:#243247;--body:#B3BFD1;--meta:#7C8AA0;--accent:#5E9AE8;--heading:#DCE8F9;
  --dark-1:#0D2544;--dark-2:#123258;--dark-3:#060E1A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45),0 8px 22px rgba(0,0,0,.4);
  --shadow-lg:0 20px 52px rgba(0,0,0,.6);
}

/* ---------- 2. NỀN TẢNG ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* Phòng vệ toàn cục cho icon SVG inline. Hai lỗi kinh điển được chặn tại đây:
   1) KÍCH THƯỚC: mặc định 1em, không phình to thành khối đen khi quên width/height.
   2) MÀU: bộ icon là dạng NÉT (stroke) — mặc định của SVG là fill:black/stroke:none nên
      path vẽ-nét bị tô đen đặc (vd mũi tên đen trên nút xanh). Ép fill:none + stroke:currentColor
      => icon luôn ăn theo màu chữ (nút xanh -> mũi tên trắng). Icon lớn (logo, thumbnail, ic-box…)
      và chỗ cần màu khác tự ghi đè — luôn thắng vì độ đặc hiệu cao hơn. */
svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4{margin:0;font-family:var(--font);color:var(--heading);line-height:1.22;text-wrap:balance;letter-spacing:-.015em}
h1{font-weight:700}h2{font-weight:700}h3{font-weight:700}h4{font-weight:500}
p{margin:0}
/* Ngắt dòng tiếng Việt (skill noi-dung-tieng-viet): chống dòng cuối rơi 1 chữ mồ côi ở
   đoạn văn; .no-break giữ khối tên riêng / số+đơn vị / mã số không bị tách giữa cụm. */
p,li{text-wrap:pretty}
.no-break{white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.blk{padding:76px 0}
.tint{background:var(--bg-alt)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.65em;
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent);flex:none}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px}
.sec-head h2{font-size:clamp(1.65rem,2.5vw,2.2rem);margin-top:12px}
.sec-head p{margin-top:10px;max-width:60ch;color:var(--body)}
.see-all{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:500;font-size:.9rem;white-space:nowrap}
.see-all svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .2s}
.see-all:hover svg{transform:translateX(3px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font);font-weight:500;font-size:.94rem;padding:.78em 1.5em;
  min-height:44px;   /* ngưỡng vùng chạm của Apple HIG / WCAG — nếu không đặt thì ra 43px */
  border-radius:0px;border:1px solid transparent;cursor:pointer;transition:.18s;
}
.btn-primary{background:var(--blue-700);color:#fff}
.btn-primary:hover{background:var(--blue-500);transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--blue-700)}
.btn-light:hover{background:var(--blue-50)}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.4);color:var(--on-dark)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;transition:transform .18s}
.btn:hover svg{transform:translateX(3px)}
.ic{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- 3. TOP BAR ---------- */
.topbar{background:var(--dark-3);color:var(--on-dark-dim);font-size:.82rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}
.tb-left{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.tb-left span{display:inline-flex;align-items:center;gap:.5em}
.tb-left .ic{stroke:var(--blue-300)}
.topbar a:hover{color:#fff}
.lang{display:flex;align-items:center;gap:5px}
.lang a{padding:2px 6px;border-radius:0px;font-weight:400}
.lang a.on{background:rgba(255,255,255,.14);color:#fff;font-weight:700}
.lang i{opacity:.35;font-style:normal}

/* ---------- 4. HEADER ---------- */
header.site{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:78px}
.brand{display:flex;align-items:center;gap:12px}
.logo-mark{width:42px;height:44px;flex:none;object-fit:contain;display:block}
.brand-txt b{display:block;font-size:1.1rem;font-weight:700;color:var(--blue-700);letter-spacing:.04em;line-height:1.15}
.brand-txt small{display:block;font-size:.7rem;color:var(--meta);letter-spacing:.1em;text-transform:uppercase;margin-top:1px}

nav.main{display:flex;align-items:center;gap:1px}
nav.main>div{position:relative}
nav.main>div>a{
  display:flex;align-items:center;gap:5px;padding:11px 13px;border-radius:0px;
  font-size:.83rem;font-weight:700;color:var(--gray-700);white-space:nowrap;transition:.15s;
  text-transform:uppercase;letter-spacing:.03em;
}
nav.main>div>a:hover{color:var(--blue-700);background:var(--bg-tint)}
nav.main>div>a[aria-current]{color:var(--blue-700);font-weight:700}
.caret{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.5;opacity:.55}
.submenu{
  position:absolute;top:calc(100% + 5px);left:0;min-width:225px;padding:7px;
  background:var(--card);border:1px solid var(--line);border-radius:0px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.17s;
}
nav.main>div:hover .submenu,nav.main>div:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:9px 12px;border-radius:0px;font-size:.87rem;color:var(--gray-700)}
.submenu a:hover{background:var(--bg-tint);color:var(--blue-700)}
.hdr-cta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:0px;padding:10px 11px;cursor:pointer;position:relative}
.menu-btn svg{width:22px;height:22px;stroke:var(--blue-700);fill:none;stroke-width:2;transition:.2s}
.menu-btn .close-icon{display:none}
body.menu-open .menu-btn .menu-icon{display:none}
body.menu-open .menu-btn .close-icon{display:block}
.menu-scrim{display:none}

/* ===== Trang chủ: header TRONG SUỐT đè hero, cuộn trang thì ĐẶC lại =====
   - Chỉ áp cho trang chủ (body.sw-home-hero) và CHỈ desktop (≥1001px).
   - Trang trong + mobile/tablet giữ header trắng đặc như cũ (không đụng).
   - Topbar luôn giữ nền xanh đậm; chỉ header.site đổi trong suốt ↔ đặc.
   - JS gắn class .scrolled vào <body> khi cuộn quá ~24px. */
header.site{transition:background .3s ease,box-shadow .3s ease,border-color .3s ease}
header.site .logo-horizontal,nav.main>div>a,.hdr-cta .btn-primary,.menu-btn svg{transition:.25s ease}
@media(min-width:1001px){
  /* Kéo hero lên nằm dưới header → nền xanh liền mạch từ dưới header xuống;
     bù padding-top cho chữ khỏi lọt sau header.
     LƯU Ý: header.site cao 79px = .wrap 78px + border-bottom 1px. Phải kéo đủ 79px,
     nếu chỉ -78px sẽ hở 1px ngay dưới topbar → lộ nền trang sáng thành NÉT TRẮNG ngang. */
  body.sw-home-hero .hero{margin-top:-79px}
  body.sw-home-hero .hero .wrap{padding-top:149px}
  /* Kéo hero lên làm LỘ đường kẻ ngang đầu tiên của lưới nền ngay dưới topbar (trông như
     vạch ngăn). Làm mờ dần đỉnh lưới để nó xuất hiện mềm phía dưới header, không thành line. */
  body.sw-home-hero .hero .grid-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 92px);mask-image:linear-gradient(to bottom,transparent 0,#000 92px)}
  /* Gradient hero (118°) làm ĐỈNH hero sáng hơn topbar navy → chỗ giáp topbar lộ BẬC MÀU
     (trông như đường line). Phủ một lớp tối đúng màu topbar ở đỉnh, mờ dần xuống → liền màu,
     hết bậc. Nằm dưới nội dung (.wrap z-index:1) nên không ảnh hưởng chữ/thẻ. */
  body.sw-home-hero .hero::after{content:"";position:absolute;top:0;left:0;right:0;height:150px;background:linear-gradient(to bottom,#0F1C42,rgba(15,28,66,0));z-index:0;pointer-events:none}
  /* Trạng thái ĐỈNH (chưa cuộn): header trong suốt, logo + menu + nút màu trắng. */
  body.sw-home-hero:not(.scrolled) header.site{background:transparent;border-bottom-color:transparent;box-shadow:none}
  body.sw-home-hero:not(.scrolled) header.site .logo-horizontal{filter:brightness(0) invert(1)}
  body.sw-home-hero:not(.scrolled) nav.main>div>a,
  body.sw-home-hero:not(.scrolled) nav.main>div>a[aria-current]{color:#fff}
  body.sw-home-hero:not(.scrolled) nav.main>div>a:hover{color:#fff;background:rgba(255,255,255,.14)}
  body.sw-home-hero:not(.scrolled) .hdr-cta .btn-primary{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
  body.sw-home-hero:not(.scrolled) .hdr-cta .btn-primary:hover{background:rgba(255,255,255,.14)}
}

/* ---------- 5. HERO ---------- */
.hero{position:relative;overflow:hidden;color:var(--on-dark);background:linear-gradient(118deg,var(--dark-3) 0%,var(--dark-1) 48%,var(--dark-2) 100%)}
.hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(620px 480px at 85% -8%,rgba(127,166,222,.22),transparent 62%),
             radial-gradient(560px 520px at 5% 115%,rgba(27,98,196,.3),transparent 62%);
}
.hero .grid-bg{
  position:absolute;inset:0;opacity:.09;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(circle at 72% 32%,#000,transparent 74%);
          mask-image:radial-gradient(circle at 72% 32%,#000,transparent 74%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center;padding:70px 24px 78px}
.hero .eyebrow{color:var(--blue-300)}
.hero .eyebrow::before{background:var(--blue-300)}
.hero h1{color:#fff;font-size:clamp(2rem,3.8vw,3.1rem);margin-top:18px;overflow-wrap:break-word;word-spacing:0.05em}
.hero h1 em{color:var(--blue-300);font-style:normal}
.hero .lead{color:var(--on-dark);opacity:.92;font-size:1.05rem;max-width:53ch;margin-top:18px}
.hero-actions{display:flex;gap:13px;margin-top:30px;flex-wrap:wrap}
/* Hero — CỘT THỐNG NHẤT: hai nút chia đôi bằng nhau, badge cùng bề rộng.
   Từ khi bỏ bo góc, mọi cạnh đều sắc nên mép lệch lộ ngay; cả cụm phải thẳng hai bên. */
.hero .hero-actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  max-width:min(440px,100%);
}
.badge-seal{
  display:flex;align-items:center;gap:11px;margin-top:18px;padding:9px 15px 9px 9px;
  max-width:min(440px,100%);
  background:rgba(255,255,255,.07);border:1px solid rgba(127,166,222,.36);border-radius:0px;font-size:.85rem;
}
.badge-seal b{color:var(--blue-300);font-weight:700}
.seal-ic{width:33px;height:33px;flex:none;border-radius:0px;display:grid;place-items:center;background:var(--blue-500);box-shadow:0 0 0 3px rgba(27,98,196,.24)}
.seal-ic svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2}

.criteria{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:9px}
.criteria .ch{display:flex;align-items:center;gap:9px;padding:14px 17px 11px;color:#fff;font-weight:500;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.12)}
.criteria .ch svg{width:18px;height:18px;stroke:var(--blue-300);fill:none;stroke-width:2}
.crit-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px;margin:0;list-style:none}
.crit-list li{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.05);border-radius:0px;padding:12px 13px}
.crit-list .num{color:var(--blue-300);font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums}
.crit-list b{display:block;color:#fff;font-size:.9rem;font-weight:500;line-height:1.3}
.crit-list small{display:block;color:var(--on-dark-dim);font-size:.78rem}

/* ---------- 6. THẺ DỊCH VỤ ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 21px;transition:.2s}
.svc::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--blue-500);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc .ic-box{width:50px;height:50px;border-radius:0px;background:var(--bg-tint);display:grid;place-items:center;margin-bottom:16px}
.svc .ic-box svg{width:25px;height:25px;stroke:var(--blue-700);fill:none;stroke-width:1.7}
.svc h3{font-size:1.1rem;color:var(--blue-700);margin-bottom:7px}
.svc p{font-size:.89rem}
.svc .more{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:.83rem;font-weight:500;color:var(--accent)}
.svc .more svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2}

/* Bảng 7 dịch vụ SHTT */
.ip-list{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:7px;box-shadow:var(--shadow-sm)}
.ip-head{display:flex;align-items:center;gap:11px;padding:17px 20px;border-bottom:1px solid var(--line)}
.ip-head h3{font-size:1.08rem;color:var(--blue-700)}
.ip-head svg{width:21px;height:21px;stroke:var(--blue-700);fill:none;stroke-width:1.8}
.ip-head .tag{margin-left:auto;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);background:var(--bg-tint);padding:5px 11px;border-radius:0px}
.ip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:7px}
.ip-grid a{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:0px;transition:.15s}
.ip-grid a:hover{background:var(--bg-tint)}
.ip-grid .n{width:29px;height:29px;flex:none;border-radius:0px;background:var(--blue-700);color:#fff;display:grid;place-items:center;font-size:.83rem;font-weight:700;font-variant-numeric:tabular-nums}
.ip-grid a:last-child .n{background:var(--accent)}
.ip-grid b{font-size:.91rem;font-weight:500;color:var(--ink);line-height:1.3}

/* ---------- 7. TIN TỨC ---------- */
.thumb{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--dark-1),var(--dark-3))}
.thumb.v2{background:linear-gradient(135deg,var(--dark-2),var(--dark-1))}
.thumb.v3{background:linear-gradient(135deg,var(--blue-500),var(--dark-1))}
.thumb.v4{background:linear-gradient(135deg,var(--dark-3),#123258)}
.thumb .patt{position:absolute;inset:0;opacity:.15;background-image:radial-gradient(circle,#fff 1.4px,transparent 1.5px);background-size:20px 20px}
.thumb .glyph{position:absolute;right:-14px;bottom:-34px;font-size:9rem;font-weight:700;color:rgba(255,255,255,.07);line-height:1;letter-spacing:-.04em}
.thumb .cat{z-index:1;position:absolute;left:16px;top:16px;background:var(--white);color:var(--blue-700);font-size:.71rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:0px}
.thumb>img{
  position:relative;z-index:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:var(--sw-thumb-position,50% 45%);
}
.thumb>svg{z-index:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);stroke:rgba(255,255,255,.85);fill:none;stroke-width:1.6}

/* WATERMARK LOGO — quy tắc chốt:
   • Khối nền TRỐNG (trước đây độn chữ mờ .glyph) → hiện DUY NHẤT logo mờ.
   • Khối nền đã có icon/chữ viết tắt (.thumb>svg, .avatar .initials) → KHÔNG thêm watermark.
   Không bao giờ hiển thị watermark chồng cùng chữ mờ / lưới chấm / icon. */
.thumb:has(.glyph)::after,
.split .media:has(.glyph)::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--watermark) center / 30% no-repeat;
}
/* Khối đã có watermark → bỏ chữ mờ (logo thay chỗ nó).
   Lưới chấm .patt GIỮ LẠI ở mọi khối — là nền chung của thiết kế. */
.thumb:has(.glyph) .glyph,
.split .media:has(.glyph) .glyph{display:none}

.news-meta{display:flex;gap:15px;color:var(--meta);font-size:.79rem;margin-bottom:9px;flex-wrap:wrap}
.news-meta span{display:inline-flex;align-items:center;gap:5px}
.news-meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

.news-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:24px}
.news-feat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s}
.news-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.news-feat .thumb{height:272px}
.news-feat .body{padding:22px 24px 26px}
.news-feat h3{font-size:1.42rem;margin-bottom:9px}
.news-feat p{font-size:.94rem}

.news-list{display:flex;flex-direction:column;gap:13px}
.news-item{display:flex;align-items:center;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:13px;transition:.2s}
.news-item:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateX(3px)}
.news-item .thumb{width:90px;height:78px;flex:none;border-radius:0px}
.news-item .thumb>svg{width:29px;height:29px}
.news-item b{display:block;font-size:.94rem;font-weight:500;color:var(--ink);line-height:1.35;margin-bottom:4px}
.news-item small{color:var(--meta);font-size:.77rem}

/* Lưới tin 3 cột */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.2s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.post-card .thumb{height:180px}
.post-card .body{padding:19px 20px 22px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:1.05rem;margin-bottom:8px}
.post-card p{font-size:.87rem;flex:1}
.post-card .more{margin-top:14px;font-size:.82rem;font-weight:500;color:var(--accent);display:inline-flex;gap:5px;align-items:center}
.post-card .more svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- 8. SỐ LIỆU ---------- */
.stats{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:42px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  background:var(--watermark) center / 25% no-repeat,linear-gradient(118deg,var(--dark-3),var(--dark-1));color:var(--on-dark);
}
.stats::after{content:"";position:absolute;right:-50px;top:-50px;width:230px;height:230px;border-radius:0px;display:none;background:radial-gradient(circle,rgba(127,166,222,.22),transparent 70%)}
.stat{position:relative;text-align:center}
.stat b{display:block;font-size:2.5rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat b em{font-style:normal;font-size:1.3rem;color:var(--blue-300);vertical-align:super}
.stat span{color:var(--on-dark-dim);font-size:.88rem}
.stat+.stat{border-left:1px solid rgba(255,255,255,.13)}

/* ---------- 9. LIÊN KẾT HỮU ÍCH ---------- */
.links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.lk{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:0px;padding:15px 17px;transition:.18s}
.lk:hover{border-color:var(--blue-500);background:var(--bg-tint)}
.lk .lk-ic{width:39px;height:39px;flex:none;border-radius:0px;background:var(--bg-tint);display:grid;place-items:center;transition:.18s}
.lk:hover .lk-ic{background:var(--blue-700)}
.lk .lk-ic svg{width:19px;height:19px;stroke:var(--blue-700);fill:none;stroke-width:1.7;transition:.18s}
.lk:hover .lk-ic svg{stroke:#fff}
.lk b{display:block;font-size:.89rem;font-weight:500;color:var(--ink);line-height:1.28}
.lk small{font-size:.75rem;color:var(--meta)}

/* ---------- 10. CTA LIÊN HỆ ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:0px;padding:48px;
  display:grid;grid-template-columns:1.25fr 1fr;gap:38px;align-items:center;
  background:var(--watermark) right center / 35% no-repeat,linear-gradient(118deg,var(--dark-1),var(--dark-3));color:var(--on-dark);
}
.cta-band::before{content:"";position:absolute;inset:0;display:none;background:radial-gradient(480px 380px at 88% 12%,rgba(127,166,222,.2),transparent 62%)}
.cta-band .l{position:relative}
.cta-band .eyebrow{color:var(--blue-300)}
.cta-band .eyebrow::before{background:var(--blue-300)}
.cta-band h2{color:#fff;font-size:1.95rem;margin:12px 0 10px}
.cta-band p{opacity:.9}
.cta-card{position:relative;background:var(--card);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-lg)}
.cta-card .row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line)}
.cta-card .row:last-child{border-bottom:none}
.cta-card .r-ic{width:41px;height:41px;flex:none;border-radius:0px;background:var(--bg-tint);display:grid;place-items:center}
.cta-card .r-ic svg{width:19px;height:19px;stroke:var(--blue-700);fill:none;stroke-width:1.8}
.cta-card small{display:block;font-size:.72rem;color:var(--meta);text-transform:uppercase;letter-spacing:.08em}
.cta-card b{font-size:.94rem;font-weight:500;color:var(--ink)}

/* ---------- 11. FOOTER ---------- */
footer.site{background:var(--dark-3);color:var(--on-dark-dim);padding:52px 0 0;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:34px;padding-bottom:38px}
.foot-brand .brand-txt b{color:#fff}
.foot-brand .brand-txt small{color:var(--on-dark-dim)}
.foot-brand p{font-size:.87rem;margin-top:15px;max-width:35ch;line-height:1.7}
/* Mạng xã hội (chân trang) — icon tô đầy, đè luật svg{fill:none} toàn cục. */
.socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.socials .soc{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;transition:background .15s,transform .15s}
.socials .soc:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.socials .soc-svg{width:18px;height:18px;fill:currentColor;stroke:none}
footer.site h4{color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:17px}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer.site ul a{font-size:.87rem}
footer.site ul a:hover{color:var(--blue-300)}
.foot-contact div{display:flex;gap:10px;margin-bottom:13px;font-size:.85rem;line-height:1.5}
.foot-contact svg{width:16px;height:16px;flex:none;stroke:var(--blue-300);fill:none;stroke-width:1.7;margin-top:3px}
.foot-contact b{color:#fff;font-weight:500}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.81rem}

/* ---------- 12. NÚT NỔI ---------- */
.float{position:fixed;right:16px;bottom:20px;z-index:50;display:flex;flex-direction:column;gap:10px}
.float a{position:relative;width:48px;height:48px;border-radius:0px;display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.float a svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.9}
.float .phone{background:#1f9d4d}
.float .zalo{background:#0068ff;font-size:.85rem;font-weight:700}
.float .mail{background:var(--blue-700)}
.float .mess{background:#0084ff}
/* Icon Messenger là dạng TÔ ĐẦY (soc-svg) — đè luật .float a svg{stroke;fill:none}. */
.float .mess svg{fill:#fff;stroke:none;width:24px;height:24px}
.float .phone::after{content:"";position:absolute;inset:-6px;border-radius:0px;border:2px solid #1f9d4d;opacity:.5;animation:ring 1.9s infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* ---------- 13. GHI CHÚ BẢN DEMO ---------- */
.note{background:var(--bg-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--gray-500);font-size:.81rem;text-align:center;padding:10px 18px}
.note b{color:var(--blue-700)}

/* ---------- 14. TRANG TRONG (breadcrumb, sidebar, bài viết) ---------- */
.page-head{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:26px 0 30px}
.crumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--meta)}
.crumb a:hover{color:var(--accent)}
.crumb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;opacity:.5}
.page-head h1{font-size:clamp(1.6rem,3vw,2.25rem);margin-top:11px}
.page-head p{margin-top:9px;max-width:62ch}

.layout{display:grid;grid-template-columns:1fr 320px;gap:38px;align-items:start}
.layout>*{min-width:0}
.sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.side-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.side-box h4{font-size:.79rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-700);margin-bottom:15px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.side-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.side-box ul a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;margin:0 -10px;border-radius:0px;font-size:.88rem;color:var(--gray-700);transition:.15s}
.side-box ul a:hover{background:var(--bg-tint);color:var(--blue-700)}
.side-box ul a .c{font-size:.75rem;color:var(--meta);font-variant-numeric:tabular-nums}
.side-post{display:flex;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.side-post:last-child{border-bottom:none}
.side-post .thumb{width:62px;height:56px;flex:none;border-radius:0px}
.side-post .thumb>svg{width:22px;height:22px}
.side-post b{display:block;font-size:.85rem;font-weight:500;color:var(--ink);line-height:1.35}
.side-post small{font-size:.74rem;color:var(--meta)}

.pager{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:36px}
.pager a{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:0px;font-size:.88rem;font-weight:500;color:var(--gray-700);background:var(--card);transition:.15s}
.pager a:hover{border-color:var(--blue-500);color:var(--blue-700)}
.pager a.on{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.pager svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 40px 40px}
.article .hero-img{height:330px;border-radius:var(--radius);margin-bottom:28px}
/* Có ảnh đại diện thật → bỏ khoá 16:9, hiển thị đủ ảnh theo tỷ lệ gốc.
   Không có ảnh (còn placeholder .glyph) → giữ height cố định ở trên cho khung khỏi vỡ. */
.article .hero-img:has(img){height:auto}
.article .hero-img>img{height:auto}
.article h2{font-size:1.42rem;margin:32px 0 12px}
.article h3{font-size:1.14rem;margin:24px 0 10px}
.article p{margin-bottom:15px;font-size:1rem;line-height:1.78}
.article ul,.article ol{margin:0 0 16px;padding-left:22px}
.article li{margin-bottom:8px}
.article blockquote{margin:24px 0;padding:18px 22px;background:var(--bg-tint);border-left:3px solid var(--blue-500);border-radius:0px;color:var(--ink)}
.article blockquote p{margin:0;font-size:1.02rem}
.toc{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;margin-bottom:26px}
.toc b{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-700);margin-bottom:10px}
.toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.toc a{font-size:.9rem;color:var(--gray-700)}
.toc a:hover{color:var(--accent)}
.share{display:flex;align-items:center;gap:10px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.share span{font-size:.83rem;color:var(--meta)}
.share a{width:36px;height:36px;border-radius:0px;background:var(--bg-tint);display:grid;place-items:center;transition:.15s}
.share a:hover{background:var(--blue-700)}
.share a svg{width:17px;height:17px;stroke:var(--blue-700);fill:none;stroke-width:1.8}
.share a:hover svg{stroke:#fff}

.prose-lead{font-size:1.06rem;color:var(--ink);line-height:1.75;margin-bottom:20px}
.def-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0}
.def{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px}
.def b{display:block;color:var(--blue-700);font-size:.95rem;margin-bottom:5px}
.def p{font-size:.87rem;margin:0}
/* Danh sách trong .def phải CÙNG CỠ với đoạn văn (.def p) — tránh lệch cỡ chữ khi mục có 1 dòng
   (ra <p>) so với nhiều dòng (ra <ul><li>), vd trang Quy trình dịch vụ. */
.def ul{margin:0;padding-left:18px}
.def li{font-size:.87rem;line-height:1.55;margin:0 0 4px}
.def li:last-child{margin-bottom:0}
/* Thẻ .def dạng LINK (lưới dịch vụ trỏ tới trang chi tiết): cả thẻ bấm được, hover nổi lên. */
a.def{display:block;text-decoration:none;color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
a.def:hover{border-color:var(--blue-500);box-shadow:0 6px 18px rgba(37,64,143,.10);transform:translateY(-2px)}
a.def:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
.def-more{display:inline-flex;align-items:center;gap:5px;margin-top:11px;color:var(--blue-500);font-size:.83rem;font-weight:500}
.def-more svg{width:15px;height:15px;transition:transform .15s}
a.def:hover .def-more svg{transform:translateX(3px)}
/* Nhiều link "Tài liệu tham khảo" — mỗi link một hàng (Tư vấn miễn phí + trang chi tiết Dịch vụ). */
.doc-ref{display:block;margin-top:8px}
.doc-refs .doc-ref:first-child,.faq .ans .doc-ref:first-child{margin-top:0}
.steps{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.step{display:flex;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.step .n{width:32px;height:32px;flex:none;border-radius:0px;background:var(--blue-700);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.86rem;font-variant-numeric:tabular-nums}
/* Cột nội dung bước phải LUÔN chiếm hết chiều ngang (không co theo độ dài chữ) — nếu không
   bước ít chữ (vd bước 5) sẽ hẹp hơn bước nhiều chữ, khối trông lệch. */
.step>span{flex:1 1 auto;min-width:0}
.step b{display:block;color:var(--ink);font-size:.96rem;margin-bottom:3px}
.step p{font-size:.87rem;margin:0}

/* ---------- 15. RESPONSIVE ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media(max-width:1120px){
  nav.main{display:none}
  nav.main.is-open{
    display:block;position:absolute;top:100%;left:0;right:0;z-index:45;
    max-height:calc(100vh - 118px);
    max-height:calc(100dvh - 118px);   /* dvh trừ đúng phần thanh địa chỉ đang hiện */
    overflow:auto;padding:10px 20px 18px;
    background:var(--card);border-top:1px solid var(--line);box-shadow:0 22px 42px rgba(7,29,60,.18)
  }
  nav.main>div{border-bottom:1px solid var(--line)}
  nav.main>div>a{justify-content:space-between;padding:14px 4px;border-radius:0;font-size:.94rem}
  nav.main>div>a:hover{background:transparent}
  nav.main .caret{width:13px;height:13px;transition:transform .2s}
  nav.main>div.is-open .caret{transform:rotate(180deg)}
  nav.main .submenu{
    display:none;position:static;min-width:0;padding:0 0 10px 12px;
    border:0;border-radius:0;box-shadow:none;background:transparent;
    opacity:1;visibility:visible;transform:none;transition:none
  }
  nav.main>div.is-open .submenu{display:block}
  nav.main .submenu a{padding:10px 12px;border-left:2px solid var(--line);border-radius:0}
  .menu-btn{display:inline-flex;position:relative;z-index:46}
  .menu-scrim{position:fixed;inset:0;z-index:35;border:0;background:rgba(7,29,60,.46);cursor:pointer}
  .menu-scrim:not([hidden]){display:block}
  body.menu-open{overflow:hidden}
}
@media(max-width:1000px){
  .hero .wrap{grid-template-columns:1fr;gap:32px;padding:50px 24px 58px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .ip-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:1fr}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px 22px}
  .stat:nth-child(3){border-left:none}
  .links-grid{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr;padding:34px}
  .layout{grid-template-columns:1fr;gap:30px}
  .sidebar{position:static}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
  .article{padding:26px 24px 32px}
}
@media(max-width:550px){
  body{padding-bottom:0}
  .blk{padding:52px 0}
  .wrap{padding-left:20px;padding-right:20px}
  header.site .wrap{height:70px}
  .logo-mark{width:36px;height:38px}
  .brand-txt b{font-size:1rem}
  .hdr-cta .btn{display:none}
  .svc-grid,.ip-grid,.post-grid,.links-grid,.stats,.foot-grid,.def-grid{grid-template-columns:1fr}
  .stat+.stat{border-left:none;border-top:1px solid rgba(255,255,255,.13);padding-top:18px}
  .crit-list{grid-template-columns:1fr}
  .tb-left span:nth-child(n+2){display:none}
  .news-feat .thumb{height:190px}
  .article .hero-img{height:200px}
  .article .hero-img:has(img){height:auto}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .stats,.cta-band{padding:28px 22px}
  .float{
    right:12px;bottom:20px;z-index:50;display:flex;flex-direction:column;gap:10px;
    position:fixed;padding:0;background:transparent;border:none;border-radius:0;
    box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none
  }
  .float a{width:48px;height:48px;flex:none;border-radius:0px;box-shadow:0 6px 16px rgba(0,0,0,.25);display:grid;place-items:center;gap:0;font-size:0;font-weight:400}
  .float a svg{width:22px;height:22px}
  .float .phone::after{content:"";position:absolute;inset:-6px;border:2px solid #1f9d4d;opacity:.5;animation:ring 1.9s infinite;transform:none}
  .float .mail::after{content:""}
}

/* ============================================================
   16. HERO SLIDER — slider thông điệp (4 slide)
   Xếp chồng bằng grid: chiều cao tự lấy theo slide cao nhất,
   không dùng position:absolute (tránh sập chiều cao hero).
   ============================================================ */
:root{ --slide-dur:5000ms; }

.hero[data-slider]{--hero-shift:0}
.hero-track{position:relative;display:grid}
.hslide{
  grid-area:1/1;                 /* mọi slide chồng lên nhau */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .8s ease-out, visibility .8s ease-out;
}
.hslide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hslide .wrap{position:relative;z-index:1}   /* chữ luôn nằm TRÊN lớp icon trôi */

/* Icon SHTT trôi nhẹ nền hero — chuyển động êm, opacity thấp, không chọi chữ.
   Chỉ chạy trên slide đang active (slide ẩn đã visibility:hidden). */
.ip-float{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ip-float span{position:absolute;display:block;color:#fff;opacity:0;line-height:1;
  will-change:transform,opacity;animation:ipdrift var(--d,22s) ease-in-out var(--delay,0s) infinite}
.ip-float svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.4}
@keyframes ipdrift{
  0%{opacity:0;transform:translate3d(0,30px,0) rotate(-5deg) scale(.88)}
  20%{opacity:.14}
  80%{opacity:.14}
  100%{opacity:0;transform:translate3d(18px,-140px,0) rotate(9deg) scale(1.08)}
}
@media(prefers-reduced-motion:reduce){
  .ip-float span{animation:none;opacity:.1;transform:none}
}
@media(max-width:550px){
  .ip-float span:nth-child(n+7){display:none}   /* mobile: gọn còn 6 icon */
}

/* nội dung trong slide trôi lên nhẹ khi vào */
.hslide .wrap>div{transform:translateY(14px);opacity:0;transition:transform .8s cubic-bezier(.16,.84,.44,1),opacity .8s ease-out}
.hslide.is-active .wrap>div{transform:none;opacity:1}
.hslide.is-active .wrap>div:nth-child(2){transition-delay:.09s}

/* nền đổi sắc nhẹ theo từng slide */
.hero .tone{position:absolute;inset:0;opacity:0;transition:opacity .8s ease-out;pointer-events:none}
.hero .tone.on{opacity:1}
.tone-1{background:radial-gradient(620px 480px at 84% -8%,rgba(127,166,222,.42),transparent 62%)}
.tone-2{background:radial-gradient(600px 500px at 20% -10%,rgba(27,98,196,.52),transparent 62%)}
.tone-3{background:radial-gradient(660px 520px at 92% 108%,rgba(127,166,222,.44),transparent 62%)}
.tone-4{background:radial-gradient(580px 520px at 8% 100%,rgba(27,98,196,.50),transparent 62%)}

/* ---- thanh điều khiển ---- */
.hero-nav{
  position:relative;z-index:3;
  display:flex;align-items:center;gap:14px;
  max-width:var(--maxw);margin:0 auto;padding:0 24px 30px;
}
.hero-nav .arrows{display:flex;gap:8px}
.hnav{
  width:42px;height:42px;border-radius:0px;flex:none;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center;transition:.18s;
}
.hnav:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.hnav svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2}

.hdots{display:flex;align-items:center;gap:9px;margin-left:4px}
.hdot{
  position:relative;height:4px;width:34px;border:none;padding:0;cursor:pointer;border-radius:0px;
  background:rgba(255,255,255,.26);overflow:hidden;transition:width .3s ease,background .3s;
}
.hdot:hover{background:rgba(255,255,255,.45)}
.hdot.on{width:70px;background:rgba(255,255,255,.3)}
.hdot.on::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:100%;
  background:var(--blue-300);transform-origin:left;transform:scaleX(0);
}
/* chỉ chạy vạch tiến trình khi slider đang tự chạy */
.hero.playing .hdot.on::after{animation:hfill var(--slide-dur) linear forwards}
@keyframes hfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero-count{
  margin-left:auto;color:var(--on-dark-dim);font-size:.84rem;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:7px;
}
.hero-count b{color:#fff;font-weight:700;font-size:1rem}
.hero-count i{width:18px;height:1px;background:rgba(255,255,255,.3);font-style:normal}

/* nút tạm dừng / chạy */
.hplay{
  width:34px;height:34px;border-radius:0px;flex:none;cursor:pointer;margin-left:2px;
  background:transparent;border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;transition:.18s;
}
.hplay:hover{background:rgba(255,255,255,.14)}
.hplay svg{width:13px;height:13px;stroke:#fff;fill:#fff;stroke-width:0}
.hplay .i-pause{display:block}.hplay .i-play{display:none}
.hero.paused .hplay .i-pause{display:none}
.hero.paused .hplay .i-play{display:block}

/* thẻ phải: biến thể theo slide */
.criteria .stat-rows{display:flex;flex-direction:column;gap:8px;padding:11px;margin:0;list-style:none}
.criteria .stat-rows li{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.05);border-radius:0px;padding:12px 14px}
.criteria .stat-rows .k{font-size:1.5rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;min-width:62px}
.criteria .stat-rows .k em{font-style:normal;font-size:.85rem;color:var(--blue-300);vertical-align:super}
.criteria .stat-rows span{color:var(--on-dark-dim);font-size:.86rem;line-height:1.35}

.criteria .svc-rows{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:11px;margin:0;list-style:none}
.criteria .svc-rows li{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);border-radius:0px;padding:11px 12px}
.criteria .svc-rows .n{width:23px;height:23px;flex:none;border-radius:0px;background:rgba(127,166,222,.22);color:var(--blue-300);display:grid;place-items:center;font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums}
.criteria .svc-rows b{color:#fff;font-size:.83rem;font-weight:500;line-height:1.3}

@media (prefers-reduced-motion:reduce){
  .hslide{transition:none}
  .hslide .wrap>div{transform:none;opacity:1;transition:none}
  .hero.playing .hdot.on::after{animation:none;transform:scaleX(1)}
}
@media(max-width:1000px){
  .hero-nav{padding:0 24px 26px}
  .criteria .svc-rows{grid-template-columns:1fr}
}
/* Hero mobile 280px = viewport - header (56px) - topbar (40px) - nav (26px) */
@media(max-width:375px){
  .hero{max-height:280px;overflow:hidden}
  .hero .wrap{padding:32px 20px 24px;gap:0}
  .hero h1{font-size:clamp(1.65rem,7vw,2rem);margin-top:10px}
  .hero .lead{font-size:.91rem;line-height:1.5;margin-top:10px}
  .hero-actions{margin-top:16px;gap:8px}
  .hero .hero-actions{grid-template-columns:1fr}
  .hero-actions .btn{padding:.65em 1em;font-size:.8rem}
  .badge-seal{margin-top:14px;padding:6px 9px;font-size:.73rem}
  .criteria{display:none}
}
@media(max-width:550px){
  .hero .wrap{padding:38px 20px 32px;gap:0}
  .hero h1{font-size:clamp(1.85rem,9vw,2.2rem);margin-top:14px}
  .hero .lead{font-size:.96rem;line-height:1.6;margin-top:14px}
  .hero-actions{margin-top:23px;gap:9px}
  .hero-actions .btn{padding:.72em 1.05em;font-size:.86rem}
  .badge-seal{margin-top:21px;border-radius:0px;padding:8px 11px 8px 8px;font-size:.78rem;line-height:1.4}
  .hslide .wrap>div:nth-child(2){display:none}
  .hero-nav{padding:0 20px 22px;gap:10px}
  .hero-nav .arrows{display:none}
  .hdot{width:26px}.hdot.on{width:52px}
  .hero-count{font-size:.78rem}
}

/* ============================================================
   17. TRANG TRONG — bổ sung
   ============================================================ */
/* lưới tin nằm trong cột nội dung (hẹp hơn) → 2 cột thay vì 3 */
.layout .post-grid{grid-template-columns:1fr 1fr}
.layout .post-card .thumb{height:158px}

/* tin liên quan cuối bài */
.related{margin-top:34px}
.related h2{font-size:1.25rem;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}

/* hộp liên hệ nhanh trong sidebar */
.side-cta{
  background:linear-gradient(135deg,var(--dark-1),var(--dark-3));color:var(--on-dark);
  border-radius:var(--radius);padding:22px;border:none;
}
.side-cta h4{color:#fff;border-bottom-color:rgba(255,255,255,.16)}
.side-cta p{font-size:.86rem;color:var(--on-dark-dim);margin-bottom:15px}
.side-cta .btn{width:100%}
.side-cta .ph{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:.95rem;font-weight:700;color:#fff}
.side-cta .ph svg{width:17px;height:17px;stroke:var(--blue-300);fill:none;stroke-width:1.9}

/* bảng trong nội dung bài viết */
.article .tbl{overflow-x:auto;margin:20px 0}
.article table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:420px}
.article th,.article td{padding:11px 14px;border:1px solid var(--line);text-align:left}
.article th{background:var(--bg-alt);color:var(--blue-700);font-weight:700}

/* chú thích ảnh */
.figcap{font-size:.8rem;color:var(--meta);text-align:center;margin-top:-18px;margin-bottom:26px}

@media(max-width:1000px){
  .layout .post-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:550px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;top:auto}
  .layout .post-grid{grid-template-columns:1fr}
  .layout .post-card .thumb{height:180px}
}

/* ============================================================
   18. TRANG CON: giới thiệu · nhân sự · liên hệ · tài liệu
   ============================================================ */

/* --- Bố cục 2 cột nội dung + ảnh (giới thiệu) --- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.split .media{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:320px;background:linear-gradient(135deg,var(--dark-1),var(--dark-3))}
.split .media .patt{position:absolute;inset:0;opacity:.15;background-image:radial-gradient(circle,#fff 1.4px,transparent 1.5px);background-size:22px 22px}
.split .media .glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:8rem;font-weight:700;color:rgba(255,255,255,.1);letter-spacing:-.04em}
.split h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:14px}
.split p{margin-bottom:14px}

/* --- 4 giá trị cốt lõi (16 chữ tiêu chí) --- */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.value{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:.2s}
.value:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.value .v-ic{width:54px;height:54px;margin:0 auto 15px;border-radius:0px;background:var(--bg-tint);display:grid;place-items:center}
.value .v-ic svg{width:26px;height:26px;stroke:var(--blue-700);fill:none;stroke-width:1.7}
.value b{display:block;color:var(--blue-700);font-size:1.02rem;margin-bottom:5px}
.value p{font-size:.86rem;margin:0}

/* --- Mốc thời gian (timeline) --- */
.timeline{position:relative;margin-top:10px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:28px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-34px;top:3px;width:20px;height:20px;border-radius:0px;background:var(--card);border:3px solid var(--blue-500)}
.tl-item .yr{font-size:.85rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.tl-item b{display:block;color:var(--ink);font-size:1.02rem;margin:2px 0 4px}
.tl-item p{font-size:.9rem;margin:0}

/* --- Lưới nhân sự (team) --- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.member{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.2s}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.member .avatar{position:relative;height:210px;background:linear-gradient(150deg,var(--dark-1),var(--dark-3));display:grid;place-items:center}
.member .avatar .patt{position:absolute;inset:0;opacity:.13;background-image:radial-gradient(circle,#fff 1.4px,transparent 1.5px);background-size:20px 20px}
.member .avatar .initials{font-size:2.6rem;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:-.02em}
.member .m-body{padding:18px 20px 22px}
.member b{display:block;color:var(--ink);font-size:1.06rem;margin-bottom:3px}
.member .role{display:block;color:var(--accent);font-size:.84rem;font-weight:500;margin-bottom:10px}
.member p{font-size:.85rem;margin:0}

/* --- Album ảnh (gallery) — mỗi ô là 1 ảnh, dùng .thumb placeholder để thay ảnh thật là xong --- */
.gallery-group+.gallery-group{margin-top:44px}
.gallery-group>h3{font-size:1.14rem;color:var(--blue-700);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.gallery-group>h3 svg{width:20px;height:20px;flex:none;stroke:var(--blue-700);fill:none;stroke-width:1.8}
/* Album: mỗi nhóm là DẢI ẢNH TRƯỢT NGANG hiện ĐÚNG 3 ẢNH/khung (2 ảnh tablet, ~1 ảnh điện thoại).
   Ảnh cùng tỉ lệ 4:3, thẻ CAO BẰNG NHAU (chú thích cắt tối đa 2 dòng) → không thò thụt.
   Vuốt trên điện thoại; nút ‹ › nằm SÁT MÉP khung trên desktop, ấn ảnh mở lightbox xem hết. */
.gallery-grid{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2px;scrollbar-width:none}
.gallery-grid::-webkit-scrollbar{display:none}
.gallery-grid figure{flex:0 0 calc((100% - 36px) / 3);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.gallery-grid figure:hover{box-shadow:var(--shadow-lg);border-color:var(--blue-300)}
.gallery-grid .thumb{aspect-ratio:4/3;height:auto}
.gallery-grid figcaption{flex:1;padding:13px 16px;font-size:.87rem;color:var(--body);line-height:1.45}
.gallery-grid figcaption b{color:var(--ink);font-weight:500;font-size:.94rem;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gallery-grid figcaption small{color:var(--meta);font-size:.78rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Nút điều hướng — JS chèn khi ảnh tràn khung; SÁT mép khung, căn giữa theo ảnh. */
.gg-scroll{position:relative}
.gg-arrow{position:absolute;top:34%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:0;border:1px solid var(--line);background:rgba(255,255,255,.96);color:var(--blue-700);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);transition:.15s}
.gg-arrow:hover{background:var(--blue-700);color:#fff;border-color:var(--blue-700)}
.gg-arrow[hidden]{display:none}
.gg-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.gg-prev{left:6px}.gg-next{right:6px}
@media(max-width:1000px){.gallery-grid figure{flex-basis:calc((100% - 18px) / 2)}}
@media(max-width:600px){.gallery-grid figure{flex-basis:82%}.gg-arrow{display:none}}

/* --- Đối tác (partner grid) — ô logo, thay .p-logo bằng <img> khi có logo thật --- */
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.partner{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 18px;text-align:center;transition:.2s}
.partner:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.partner .p-logo{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 14px;border-radius:0px;background:var(--bg-tint);color:var(--blue-700);font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.partner b{display:block;color:var(--ink);font-size:.95rem;font-weight:500;line-height:1.4;margin-bottom:4px}
.partner small{color:var(--meta);font-size:.79rem}
@media(max-width:1000px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:550px){.partner-grid{grid-template-columns:1fr}}

/* --- Dải đối tác tiêu biểu trên trang chủ (compact, 1 hàng 6 ô) --- */
.partner-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.partner-strip a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 12px;transition:.2s}
.partner-strip a:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--blue-300)}
.partner-strip .p-logo{display:grid;place-items:center;width:58px;height:58px;border-radius:0px;background:var(--bg-tint);color:var(--blue-700);font-weight:700;font-size:.9rem}
.partner-strip b{color:var(--body);font-size:.78rem;font-weight:500;line-height:1.35}
@media(max-width:1000px){.partner-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:550px){.partner-strip{grid-template-columns:repeat(2,1fr)}}

/* --- Bộ chọn loại yêu cầu (Tư vấn / Dịch vụ) trên form liên hệ --- */
.req-type{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.req-type input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.req-type label{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;border:1px solid var(--line);border-radius:0px;font-size:.9rem;font-weight:500;color:var(--body);cursor:pointer;transition:.15s;text-align:center;margin:0}
.req-type label svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.req-type label:hover{border-color:var(--blue-300);background:var(--bg-tint)}
.req-type input:checked+label{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.req-type input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}

/* --- Trang liên hệ: form + thông tin + bản đồ --- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
/* justify-content:space-between → khối thông tin giãn khớp chiều cao form: thẻ đầu thẳng
   đỉnh form, thẻ cuối thẳng đáy form, không còn khoảng trắng lệch dưới cột trái. gap:16px
   là khoảng cách tối thiểu; form cao hơn thì các thẻ tự nới đều ra. */
.contact-info{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.ci-item{display:flex;gap:15px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.ci-item .ci-ic{width:44px;height:44px;flex:none;border-radius:0px;background:var(--bg-tint);display:grid;place-items:center}
.ci-item .ci-ic svg{width:21px;height:21px;stroke:var(--blue-700);fill:none;stroke-width:1.8}
.ci-item small{display:block;font-size:.74rem;color:var(--meta);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.ci-item b{display:block;color:var(--ink);font-size:.98rem;font-weight:500;line-height:1.4}
.ci-item b a:hover{color:var(--accent)}

.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.form-card h3{font-size:1.2rem;color:var(--blue-700);margin-bottom:6px}
.form-card .sub{font-size:.88rem;color:var(--body);margin-bottom:20px}
.field{margin-bottom:15px}
.field label{display:block;font-size:.84rem;font-weight:500;color:var(--ink);margin-bottom:6px}
/* Loại trừ radio/checkbox: bộ chọn "Loại yêu cầu" (.req-type) nằm TRONG .field, mà luật này
   cùng độ đặc hiệu với .req-type input lại đứng sau nên sẽ thắng và ép radio rộng 100%.
   Có appearance:none thì radio mất kích thước gốc, ăn trọn 100% và tràn ngang cả trang. */
.field input:not([type=radio]):not([type=checkbox]),.field textarea,.field select{
  width:100%;font-family:var(--font);color:var(--ink);
  /* 16px là ngưỡng bắt buộc: nhỏ hơn thì Safari iOS tự phóng to cả trang khi bấm vào ô nhập. */
  font-size:1rem;
  /* iOS tự bo góc + vẽ mũi tên riêng cho select, phá bộ góc vuông của thiết kế. */
  -webkit-appearance:none;appearance:none;
  padding:11px 14px;border:1px solid var(--line);border-radius:0px;background:var(--bg);transition:.15s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(49,84,189,.13)}
.field textarea{resize:vertical;min-height:110px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-card .btn{width:100%;margin-top:4px}

.map-embed{margin-top:34px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);position:relative;height:300px;background:var(--bg-alt);display:grid;place-items:center}
/* iframe bản đồ thật (Google Maps) mang width/height cố định 600×450 → bị khung
   place-items:center canh giữa gây hở hai bên. Ép tràn full khung, bỏ viền. */
.map-embed iframe{width:100%;height:100%;border:0;display:block}
.map-embed .patt{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px}
.map-embed .pin{position:relative;text-align:center;color:var(--blue-700)}
.map-embed .pin svg{width:38px;height:38px;stroke:var(--blue-700);fill:none;stroke-width:1.6;margin-bottom:8px}
.map-embed .pin b{display:block;font-size:.95rem}
.map-embed .pin small{font-size:.82rem;color:var(--meta)}
/* Hai bản đồ cạnh nhau: Trụ sở chính + Văn phòng giao dịch */
.maps-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px}
/* Căn đầu để hai khung bản đồ THẲNG HÀNG dù dòng địa chỉ dài ngắn khác nhau (1 hay 2 dòng). */
.map-cap{display:flex;align-items:flex-start;gap:9px;color:var(--blue-700);min-height:42px}
.map-cap svg{width:20px;height:20px;flex:none;stroke:var(--blue-700);fill:none;stroke-width:1.8}
.map-cap b{font-size:.95rem}
.map-cap small{color:var(--meta);font-size:.8rem;margin-left:auto;text-align:right;max-width:58%;line-height:1.4}
.map-col .map-embed{margin-top:12px;height:260px}

/* --- Bảng tài liệu / biểu mẫu tải về --- */
.doc-list{display:flex;flex-direction:column;gap:11px}
.doc-item{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:.18s}
.doc-item:hover{border-color:var(--blue-500);box-shadow:var(--shadow-sm)}
.doc-item .d-ic{width:46px;height:46px;flex:none;border-radius:0px;background:var(--bg-tint);display:grid;place-items:center}
.doc-item .d-ic svg{width:23px;height:23px;stroke:var(--blue-700);fill:none;stroke-width:1.7}
.doc-item .d-body{flex:1;min-width:0}
.doc-item b{display:block;color:var(--ink);font-size:.98rem;font-weight:500;line-height:1.35;margin-bottom:3px}
.doc-item small{color:var(--meta);font-size:.79rem}
.doc-item .d-dl{flex:none;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--line);border-radius:0px;font-size:.84rem;font-weight:500;color:var(--blue-700);transition:.15s}
.doc-item .d-dl:hover{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.doc-item .d-dl svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* --- Responsive trang con --- */
@media(max-width:1000px){
  .split{grid-template-columns:1fr;gap:28px}
  .split .media{min-height:240px;order:-1}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:30px}
  .maps-2{grid-template-columns:1fr;gap:22px}
}
@media(max-width:550px){
  .value-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .doc-item{flex-wrap:wrap}
  .doc-item .d-dl{width:100%;justify-content:center;margin-top:4px}
}

/* ============================================================
   19. HỎI ĐÁP (FAQ) + NHÓM TÀI LIỆU/LIÊN KẾT
   ============================================================ */

/* --- FAQ accordion (dùng <details>/<summary> — không cần JS) --- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq-group+.faq-group{margin-top:30px}
.faq-group>h3{font-size:1.14rem;color:var(--blue-700);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s}
.faq details[open]{border-color:var(--blue-300);box-shadow:var(--shadow-sm)}
.faq summary{
  display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:17px 20px;font-size:1rem;font-weight:500;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{width:26px;height:26px;flex:none;border-radius:0px;background:var(--bg-tint);color:var(--blue-700);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.faq summary .txt{flex:1}
.faq summary .chev{width:18px;height:18px;flex:none;stroke:var(--blue-500);fill:none;stroke-width:2.2;transition:transform .22s}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 20px 19px 60px;font-size:.94rem;line-height:1.7;color:var(--body)}
.faq .ans p{margin-bottom:10px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans ul{margin:0 0 10px;padding-left:20px}
.faq .ans li{margin-bottom:6px}
.faq .ans .more{margin-top:2px;display:inline-flex}

/* --- Nhóm tài liệu (mỗi nhóm 1 tiêu đề chủ đề) --- */
.doc-group+.doc-group{margin-top:30px}
.doc-group>h3{font-size:1.08rem;color:var(--blue-700);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.doc-group>h3 svg{width:20px;height:20px;flex:none;stroke:var(--blue-700);fill:none;stroke-width:1.8}

/* --- Nhóm liên kết hữu ích (3 nhóm trong trang tài liệu) --- */
.link-group+.link-group{margin-top:26px}
.link-group>h3{font-size:1.02rem;color:var(--blue-700);margin-bottom:13px;display:flex;align-items:center;gap:9px}
.link-group>h3 svg{width:19px;height:19px;flex:none;stroke:var(--blue-700);fill:none;stroke-width:1.8}

/* Khối FAQ rút gọn nhúng cuối trang dịch vụ */
.faq-teaser{margin-top:16px}
.faq-teaser .see-all{margin-top:20px}

/* ---------- 20. TƯƠNG THÍCH THIẾT BỊ & TRÌNH DUYỆT ----------
   Bổ sung 29/08/2026 theo checklist cross-device. Chỉ là lớp phòng vệ,
   KHÔNG đổi bố cục — mọi kích thước và màu sắc giữ nguyên. */

html{
  /* iPhone xoay ngang sẽ tự phóng chữ to lên nếu không khoá dòng này. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  -moz-osx-font-smoothing:grayscale;
}

/* Bỏ ô sáng xanh nhấp nháy khi chạm vào link/nút trên iOS. */
a,button,summary,[role="button"]{
  -webkit-tap-highlight-color:transparent;
}

/* Thiết bị cảm ứng không có con trỏ: hiệu ứng hover bị "dính" lại sau khi chạm,
   trông như nút bị kẹt. Tắt phần dịch chuyển, giữ nguyên đổi màu. */
@media (hover:none) and (pointer:coarse){
  .btn:hover,.svc:hover,.post-card:hover,.news-feat:hover,.news-item:hover,
  .lk:hover,.side-post:hover,.member:hover,.partner:hover,.doc-item:hover{
    transform:none;
  }
  .btn:active{opacity:.86}
}

/* Bảng dài trong bài viết: cuộn ngang bên trong khung, không kéo lệch cả trang. */
.tbl{-webkit-overflow-scrolling:touch}
/* ===== Lightbox xem ảnh Album ===== */
.gallery-grid a.glb{display:block;cursor:zoom-in;text-decoration:none}
.glb-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,16,34,.93);display:flex;align-items:center;justify-content:center;padding:40px 64px}
.glb-overlay[hidden]{display:none}
.glb-stage{margin:0;max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;align-items:center}
.glb-stage img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);background:#0a1022}
.glb-stage figcaption{margin-top:12px;color:#e6ebf5;font-size:.9rem;text-align:center;max-width:80ch;line-height:1.5}
.glb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.glb-btn:hover{background:rgba(255,255,255,.25)}
.glb-prev{left:16px}.glb-next{right:16px}
.glb-close{position:absolute;top:16px;right:18px;transform:none;width:44px;height:44px;font-size:26px}
.glb-count{position:absolute;top:22px;left:20px;color:rgba(255,255,255,.75);font-size:.85rem;letter-spacing:.03em}
@media(max-width:640px){.glb-overlay{padding:16px}.glb-btn{width:42px;height:42px;font-size:24px}.glb-prev{left:6px}.glb-next{right:6px}}