/*
Theme Name: Camera Hai Quan
Theme URI: https://www.camerahaiquan.vn/
Author: INFOVINA
Author URI: https://infovina.com.vn/
Description: Theme tu viet cho camerahaiquan.vn - lap dat camera giam sat dat chuan Hai quan (QD 247/QD-TCHQ). Toi uu SEO, mobile-first, form bat lead.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: camerahaiquan
*/

/* ============ chq-tokens-v2 ============ */
:root{
  --chq-white:#ffffff;
  --chq-soft:#f5f8fc;
  --chq-blue-wash:#e8f2fd;
  --chq-line:#e1e9f2;

  --chq-blue:#0a6ed1;
  --chq-blue-dark:#0857a8;
  --chq-cyan:#12b3d6;
  --chq-navy:#0b2a45;
  --chq-navy-deep:#071d31;

  --chq-ink:#0f1f2e;
  --chq-muted:#5b7185;

  --chq-green:#0fa968;
  --chq-green-bg:#e6f7ef;
  --chq-amber:#f5a524;
  --chq-amber-bg:#fef4e3;
  --chq-red:#e0392b;
  --chq-red-bg:#fdecea;

  --chq-radius:14px;
  --chq-radius-sm:10px;
  --chq-radius-lg:24px;
  --chq-shadow-1:0 1px 2px rgba(11,42,69,.06),0 8px 24px rgba(11,42,69,.06);
  --chq-shadow-2:0 2px 4px rgba(11,42,69,.08),0 20px 48px rgba(11,42,69,.12);
  --chq-width:1280px;
  --chq-ease:.24s cubic-bezier(.4,0,.2,1);

  /* aliases giu tuong thich v1 */
  --chq-sky:#e8f2fd;
  --chq-ok:#0fa968;
  --chq-warn:#f5a524;
  --chq-gold:#f5a524;
  --chq-shadow:var(--chq-shadow-1);
  --chq-shadow-sm:var(--chq-shadow-1);
}

/* ============ chq-base-v2 ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Be Vietnam Pro',Inter,'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:17px;line-height:1.75;color:var(--chq-ink);background:var(--chq-white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--chq-blue);text-decoration:none;transition:color var(--chq-ease)}
a:hover{color:var(--chq-blue-dark);text-decoration:underline}
h1,h2,h3,h4,h5{line-height:1.2;margin:0 0 .6em;font-weight:800;color:var(--chq-navy);letter-spacing:-.02em}
h1{font-size:clamp(30px,4.4vw,50px);line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.15}
h3{font-size:clamp(20px,2.3vw,26px);line-height:1.28;font-weight:700}
h4{font-size:19px;font-weight:700;line-height:1.35}
h5{font-size:15px;font-weight:700}
p{margin:0 0 1.1em;text-wrap:pretty}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin-bottom:.45em}
code,pre,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.wrap{max-width:var(--chq-width);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--chq-blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--chq-blue-wash);color:var(--chq-navy)}

/* ============ chq-demo-v1 ============ */
.chq-demo{background:var(--chq-amber-bg);border-bottom:1px solid #f2ddb4;color:#7a4d05;font-size:13.5px;line-height:1.5;padding:8px 0}
.chq-demo .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chq-demo strong{font-weight:700;color:#7a4d05}
.chq-demo-sub{color:#8a6224}
.chq-demo-sub a{color:#7a4d05;font-weight:700;text-decoration:underline}
.chq-demo-dot{width:8px;height:8px;border-radius:50%;background:var(--chq-amber);display:inline-block;flex:none;box-shadow:0 0 0 3px rgba(245,165,36,.25)}

/* chq-demo-v2: dai Demo da chuyen xuong chan trang (theo yeu cau anh Hiep) */
.site-footer .chq-demo{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:20px;padding:12px 16px;
  background:rgba(245,165,36,.10);
  border:1px solid rgba(245,165,36,.32);
  border-bottom:1px solid rgba(245,165,36,.32);
  border-radius:var(--chq-radius-sm);
  color:#f7c46a;font-size:13.5px;line-height:1.55;
}
.site-footer .chq-demo strong{color:#f7c46a;font-weight:700}
.site-footer .chq-demo .chq-demo-sub{color:rgba(255,255,255,.74)}
.site-footer .chq-demo .chq-demo-sub a{color:#f7c46a;font-weight:700;text-decoration:underline}

/* ============ chq-buttons-v2 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 28px;border-radius:var(--chq-radius-sm);
  font-weight:600;font-size:16px;line-height:1;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:all var(--chq-ease);white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--chq-blue);color:#fff;box-shadow:0 6px 16px rgba(10,110,209,.28)}
.btn-primary:hover{background:var(--chq-blue-dark);color:#fff;box-shadow:0 10px 22px rgba(10,110,209,.34)}
.btn-ghost{background:#fff;color:var(--chq-navy);border-color:var(--chq-line)}
.btn-ghost:hover{color:var(--chq-blue);border-color:var(--chq-blue);background:var(--chq-soft)}
.btn-white{background:#fff;color:var(--chq-blue);font-weight:700}
.btn-white:hover{color:var(--chq-blue-dark);background:#f2f7fd}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-white:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.1)}
.btn-lg{min-height:56px;font-size:17px;padding:0 34px}
.btn-block{width:100%}

/* ============ chq-topbar-header-v2 ============ */
.topbar{background:var(--chq-navy-deep);color:rgba(255,255,255,.82);font-size:13px;line-height:1.4}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap}
.tb-promise{display:flex;gap:18px;flex-wrap:wrap}
.tb-promise span{position:relative;padding-left:16px}
.tb-promise span::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--chq-cyan)}
.topbar a{color:#fff;font-weight:600}
.topbar a:hover{color:var(--chq-cyan);text-decoration:none}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--chq-line)}
.site-header .wrap{display:flex;align-items:center;gap:16px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand:hover{text-decoration:none}
.brand-mark{width:44px;height:44px;flex:none;object-fit:contain;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.15;justify-content:center}
.brand-txt strong{color:var(--chq-navy);font-size:19px;font-weight:800;letter-spacing:-.02em}
.brand-txt small{color:var(--chq-muted);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.main-nav{margin-left:auto}
.main-nav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.main-nav li{margin:0;position:relative}
.main-nav a{
  display:flex;align-items:center;min-height:44px;padding:0 9px;white-space:nowrap;border-radius:8px;
  color:var(--chq-ink);font-size:14.5px;font-weight:500;text-decoration:none;
  transition:all var(--chq-ease);
}
.main-nav a:hover{background:var(--chq-blue-wash);color:var(--chq-blue);text-decoration:none}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--chq-blue);font-weight:600;background:var(--chq-blue-wash)}
.main-nav ul ul{
  display:none;position:absolute;top:100%;left:0;min-width:250px;
  background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius);
  box-shadow:var(--chq-shadow-2);padding:8px;flex-direction:column;gap:2px;
}
.main-nav li:hover>ul{display:flex}
.main-nav ul ul a{min-height:44px;padding:0 12px;font-size:14.5px}
.header-cta{margin-left:4px;min-height:46px;padding:0 18px;font-size:14.5px}
.nav-toggle{
  display:none;margin-left:auto;background:#fff;border:1px solid var(--chq-line);
  border-radius:var(--chq-radius-sm);width:46px;height:46px;
  cursor:pointer;position:relative;padding:0;
}
/* chq-navicon-v1: ba gach ve bang CSS (khong dung ky tu ☰ - phu thuoc font) */
.nt-bars,.nt-bars::before,.nt-bars::after{
  position:absolute;left:50%;width:20px;height:2px;border-radius:2px;
  background:var(--chq-navy);transition:transform var(--chq-ease),opacity var(--chq-ease);
}
.nt-bars{top:50%;transform:translate(-50%,-50%)}
.nt-bars::before,.nt-bars::after{content:"";left:0}
.nt-bars::before{top:-6px}
.nt-bars::after{top:6px}
.nav-toggle.open .nt-bars{transform:translate(-50%,-50%) rotate(45deg)}
.nav-toggle.open .nt-bars::before{transform:translateY(6px);opacity:0}
.nav-toggle.open .nt-bars::after{transform:translateY(-6px) rotate(-90deg)}

/* ============ chq-hero-v2 ============ */
.hero{
  position:relative;padding:64px 0 78px;background:var(--chq-white);overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(var(--chq-line) 1px,transparent 1px);
  background-size:22px 22px;opacity:.55;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;top:-160px;right:-140px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(10,110,209,.10),rgba(18,179,214,0) 68%);pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.16fr 1fr;gap:52px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--chq-blue);margin:0 0 18px;line-height:1;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--chq-blue);border-radius:2px;flex:none}
.hero h1{margin-bottom:20px}
.hero h1 .hl{color:var(--chq-blue);display:block}
.hero-kicker{font-size:17px;font-weight:600;color:var(--chq-navy);background:var(--chq-amber-bg);border-left:3px solid var(--chq-amber);padding:10px 16px;border-radius:0 var(--chq-radius-sm) var(--chq-radius-sm) 0;display:inline-block;margin:0 0 18px}
.hero-lead{font-size:19px;font-weight:500;line-height:1.7;color:var(--chq-muted);max-width:60ch;margin-bottom:28px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero-trust{display:flex;gap:12px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.hero-trust li{
  margin:0;display:inline-flex;align-items:center;gap:8px;
  background:var(--chq-green-bg);color:#0a6b43;border-radius:999px;
  padding:7px 15px;font-size:14px;font-weight:600;
}
.hero-trust li::before{content:"✓";color:var(--chq-green);font-weight:800}

.hero-visual{position:relative}
.hero-shot{
  position:relative;border-radius:var(--chq-radius-lg);overflow:hidden;
  box-shadow:var(--chq-shadow-2);aspect-ratio:4/3;background:var(--chq-blue-wash);
}
.hero-shot img,.hero-shot svg{width:100%;height:100%;object-fit:cover;display:block}
.hero-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(10,110,209,.14),rgba(18,179,214,.06));
}
.float-card{
  position:absolute;background:#fff;border-radius:var(--chq-radius);
  box-shadow:var(--chq-shadow-2);padding:14px 18px;display:flex;align-items:center;gap:11px;
  font-size:14px;line-height:1.35;max-width:230px;z-index:2;
}
.float-card>span:last-child{display:block}
.float-card strong{display:block;color:var(--chq-navy);font-size:15px;font-weight:700}
.float-card span{color:var(--chq-muted);font-size:13px}
.float-a{top:-18px;left:-26px}
.float-b{bottom:-20px;right:-22px}
.fc-ico{
  width:38px;height:38px;flex:none;border-radius:var(--chq-radius-sm);background:var(--chq-green-bg);
  color:var(--chq-green);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;
}
.fc-num{font-size:26px;font-weight:800;color:var(--chq-blue);line-height:1;font-variant-numeric:tabular-nums}

/* trang trong */
.page-hero{
  background:linear-gradient(180deg,var(--chq-blue-wash),var(--chq-white));
  padding:46px 0 38px;border-bottom:1px solid var(--chq-line);
}
.page-hero h1{margin-bottom:12px;font-size:clamp(28px,4vw,44px)}
.page-hero p{color:var(--chq-muted);font-size:18px;max-width:70ch;margin:0 0 22px}
.ph-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ============ chq-legalnote-v2 ============
   Hop mien tru chuyen xuong CUOI bai (yeu cau anh Hiep 22/08/2026).
   Doi tone tu canh bao ho phach sang ghi chu xam nhe: doc xong bai roi moi thay,
   khong duoc phep lam khach nan tu dong dau. */
.chq-legalnote{
  background:var(--chq-soft);border:1px solid var(--chq-line);border-left:3px solid var(--chq-line);
  border-radius:var(--chq-radius);padding:18px 22px;margin:44px 0 0;
  font-size:13.5px;line-height:1.75;color:var(--chq-muted);
}
.chq-legalnote strong{color:var(--chq-navy);font-weight:600}
.chq-legalnote a{color:var(--chq-blue);text-decoration:underline}
.chq-legalnote p{margin:0}
.chq-updated{font-size:13.5px;color:var(--chq-muted);margin:0 0 22px}

/* ============ chq-toc-v1 ============ */
.chq-toc{
  background:var(--chq-soft);border:1px solid var(--chq-line);border-radius:var(--chq-radius);
  padding:24px 28px;margin:0 0 34px;
}
.chq-toc h2{font-size:13px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--chq-muted);margin:0 0 12px!important;padding:0!important}
.chq-toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:32px}
.chq-toc li{margin-bottom:8px;font-size:15.5px;line-height:1.5;break-inside:avoid}
.chq-toc a{color:var(--chq-navy);font-weight:500}
.chq-toc a:hover{color:var(--chq-blue)}
@media (max-width:767.98px){.chq-toc ol{columns:1}}

/* ============ chq-form-v2 ============ */
.lead-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:stretch}
.lead-compact{display:block}
.lead-compact .lead-form{box-shadow:none;padding:0;border-radius:0}
.lead-compact .lead-form .grid-2{grid-template-columns:1fr}
.lead-side{
  background:var(--chq-navy);color:rgba(255,255,255,.86);border-radius:var(--chq-radius-lg);
  padding:38px 34px;display:flex;flex-direction:column;
}
.lead-side h2{color:#fff;margin-bottom:14px;font-size:clamp(24px,2.6vw,32px)}
.lead-side p{color:rgba(255,255,255,.78);font-size:16px}
.lead-side ul{list-style:none;padding:0;margin:0 0 22px}
.lead-side li{position:relative;padding-left:25px;font-size:15.5px;margin-bottom:11px}
.lead-side li::before{content:"✓";position:absolute;left:0;top:0;color:#3ee39b;font-weight:800}
.lead-hot{
  margin-top:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--chq-radius);padding:18px 20px;
}
.lead-hot small{display:block;color:rgba(255,255,255,.66);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.lead-hot a{color:#fff;font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lead-hot a:hover{color:#7fd4ff;text-decoration:none}

.lead-form{background:#fff;border-radius:var(--chq-radius-lg);box-shadow:var(--chq-shadow-2);padding:32px}
.lead-form .fld{margin-bottom:16px}
.lead-form label{display:block;font-size:14px;font-weight:600;color:var(--chq-navy);margin-bottom:6px}
.lead-form input[type=text],.lead-form input[type=tel],.lead-form input[type=email],.lead-form select,.lead-form textarea{
  width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--chq-ink);
  background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius-sm);
  transition:all var(--chq-ease);
}
.lead-form textarea{min-height:96px;resize:vertical}
.lead-form select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235b7185' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.lead-form :is(input,select,textarea):focus{
  outline:none;border-color:var(--chq-blue);box-shadow:0 0 0 3px rgba(10,110,209,.14);
}
.lead-form .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--chq-muted);margin-bottom:18px}
.lead-form .consent input{margin-top:4px;width:17px;height:17px;accent-color:var(--chq-blue);flex:none}
.form-note{font-size:13px;color:var(--chq-muted);margin:12px 0 0;text-align:center}
.form-msg{margin-top:14px;padding:13px 16px;border-radius:var(--chq-radius-sm);font-size:15px;font-weight:500;display:none}
.form-msg.ok{display:block;background:var(--chq-green-bg);color:#0a6b43;border:1px solid #b9e8d1}
.form-msg.err{display:block;background:var(--chq-red-bg);color:#a72a1f;border:1px solid #f5c4bf}
.hp-field{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

/* ============ chq-sections-v2 ============ */
.section{padding:96px 0}
.section-sm{padding:64px 0}
.section-soft{background:var(--chq-soft)}
.section-wash{background:var(--chq-blue-wash)}
.section-navy{background:var(--chq-navy);color:rgba(255,255,255,.84)}
.section-navy h2,.section-navy h3,.section-navy h4{color:#fff}
.section-navy .eyebrow{color:var(--chq-cyan)}
.section-navy .eyebrow::before{background:var(--chq-cyan)}
.section-head{max-width:800px;margin:0 0 46px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head p{font-size:18.5px;color:var(--chq-muted);margin:0}
.section-navy .section-head p{color:rgba(255,255,255,.76)}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

.card{
  background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius);
  padding:26px;transition:all var(--chq-ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--chq-shadow-2);border-color:#cfe0f2}
.card h3{margin-bottom:8px}
.card p{color:var(--chq-muted);font-size:15.5px;margin-bottom:0}
.card-ico{
  width:52px;height:52px;border-radius:12px;background:var(--chq-blue-wash);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--chq-blue);
}
.card-ico svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:15px;font-weight:600;color:var(--chq-blue)}
.card:hover .card-link{gap:10px}

/* the dich vu co anh */
.svc-card{
  background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius);
  overflow:hidden;display:flex;flex-direction:column;transition:all var(--chq-ease);
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--chq-shadow-2);border-color:var(--chq-blue)}
.svc-shot{aspect-ratio:16/9;overflow:hidden;background:var(--chq-blue-wash)}
.svc-shot img,.svc-shot svg{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.svc-card:hover .svc-shot img,.svc-card:hover .svc-shot svg{transform:scale(1.05)}
.svc-body{padding:24px;display:flex;flex-direction:column;flex:1}
.svc-body h3{font-size:20px;margin-bottom:8px}
.svc-body p{color:var(--chq-muted);font-size:15px;margin-bottom:16px;flex:1}
.svc-body .card-link{margin-top:0;padding-top:16px;border-top:1px solid var(--chq-line)}
.badge{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin-bottom:12px;
}
.badge-green{background:var(--chq-green-bg);color:#0a6b43}
.badge-blue{background:var(--chq-blue-wash);color:var(--chq-blue-dark)}
.badge-amber{background:var(--chq-amber-bg);color:#8a5d05}

/* the san pham co anh */
.prod-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.prod-shot{background:linear-gradient(135deg,#f7fbff,#e8f2fd);border-bottom:1px solid var(--chq-line)}
.prod-shot img{width:100%;height:auto;display:block}
.prod-card>:not(.prod-shot){margin-left:26px;margin-right:26px}
.prod-card .badge{margin-top:22px}
.prod-card p{margin-bottom:26px!important}

/* the du an */
.proj-card{
  background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius);
  padding:26px;transition:all var(--chq-ease);
}
.proj-card:hover{transform:translateY(-4px);box-shadow:var(--chq-shadow-2);border-color:#cfe0f2}
.proj-card h3{font-size:19px;margin-bottom:14px}
.proj-meta{display:flex;gap:18px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--chq-line);border-bottom:1px solid var(--chq-line);margin-bottom:14px}
.proj-meta span{font-size:15px;color:var(--chq-muted)}
.proj-meta strong{color:var(--chq-blue);font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.proj-card p{font-size:14.5px;color:var(--chq-muted);margin:0}
.proj-note{max-width:78ch;margin:30px auto 0;text-align:center;font-size:13.5px;line-height:1.7;color:var(--chq-muted)}

/* dai thuong hieu doi tac */
.brands-band{background:var(--chq-white);border-top:1px solid var(--chq-line);border-bottom:1px solid var(--chq-line)}
.brands-title{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--chq-muted);text-align:center;margin:0 0 16px}
.brands{list-style:none;padding:0;margin:0 0 34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.brands li{
  margin:0;background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius);
  padding:16px 24px;min-width:154px;text-align:center;transition:all var(--chq-ease);
}
.brands li:hover{transform:translateY(-3px);box-shadow:var(--chq-shadow-1);border-color:#cfe0f2}
.brands .b-name{display:block;font-weight:700;font-size:17px;color:var(--chq-navy);letter-spacing:-.01em;line-height:1.25}
.brands .b-sub{display:block;font-size:12.5px;color:var(--chq-muted);margin-top:3px}
.brands .b-hero{
  background:linear-gradient(135deg,var(--chq-navy),var(--chq-blue-dark));border-color:transparent;
  box-shadow:0 8px 22px rgba(10,110,209,.24);min-width:200px;
}
.brands .b-hero .b-name{color:#fff;font-size:19px}
.brands .b-hero .b-sub{color:#9fd8f5}
.brands-compact li{min-width:132px;padding:13px 18px}
.brands-compact .b-name{font-size:15.5px}
.brands-compact .b-sub{font-size:11.5px}
.brands-kh li{min-width:198px;padding:15px 22px}
.brands-kh .b-name{font-size:16px}
.brands-kh .b-sub{font-size:12px}
.brands .b-hi{border-color:var(--chq-green);background:var(--chq-green-bg)}
.brands .b-hi .b-name{color:#0a6b43}
.brands .b-hi .b-sub{color:#0f8a57}
.brands-note{
  max-width:78ch;margin:0 auto;text-align:center;font-size:13.5px;line-height:1.7;color:var(--chq-muted);
}

/* thang so lieu */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--chq-line);border-radius:var(--chq-radius-lg);background:#fff;overflow:hidden}
.stats div{padding:30px 22px;text-align:center;border-left:1px solid var(--chq-line)}
.stats div:first-child{border-left:0}
.stats b{display:block;font-size:clamp(32px,4vw,48px);font-weight:800;color:var(--chq-blue);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:6px}
.stats span{font-size:14.5px;color:var(--chq-muted)}

/* checkrow */
.checkrow{list-style:none;padding:0;margin:0}
.checkrow li{position:relative;padding-left:27px;margin-bottom:12px;font-size:16px}
.checkrow li::before{content:"✓";position:absolute;left:0;top:0;color:var(--chq-green);font-weight:800;line-height:1.7}
.section-navy .checkrow li::before{color:#3ee39b}
.section-navy img{background:#fff}

/* chip KCN */
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0 0 24px}
.chips li{margin:0}
.chips a,.chips span{
  display:inline-block;background:#fff;border:1px solid var(--chq-line);border-radius:999px;
  padding:8px 16px;font-size:14.5px;font-weight:500;color:var(--chq-navy);transition:all var(--chq-ease);
}
.chips a:hover{border-color:var(--chq-blue);color:var(--chq-blue);background:var(--chq-blue-wash);text-decoration:none;transform:translateY(-2px)}

/* timeline quy trinh */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:2px;background:var(--chq-line)}
.steps li{margin:0;padding:0 12px;text-align:center;position:relative}
.step-n{
  width:38px;height:38px;border-radius:50%;background:var(--chq-blue);color:#fff;
  font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;position:relative;z-index:1;box-shadow:0 0 0 6px #fff,0 0 0 10px rgba(10,110,209,.12);
}
.steps h3{font-size:16.5px;margin-bottom:6px}
.steps p{font-size:14px;color:var(--chq-muted);margin-bottom:8px}
.step-t{display:inline-block;font-size:12px;font-weight:600;color:var(--chq-muted);background:var(--chq-soft);border-radius:999px;padding:3px 10px}

/* ============ chq-table-v2 ============ */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{
  width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.55;
  background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius);overflow:hidden;
}
.spec th,.spec td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--chq-line)}
.spec thead th{
  background:var(--chq-navy);color:#fff;font-weight:700;font-size:14px;
  letter-spacing:.03em;position:sticky;top:72px;z-index:2;border-bottom:0;
}
.spec tbody tr:nth-child(even){background:rgba(232,242,253,.45)}
.spec tbody tr:hover{background:var(--chq-blue-wash)}
.spec tbody tr:last-child td{border-bottom:0}
.spec .grp td{
  background:var(--chq-blue-wash);font-weight:800;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chq-blue-dark);padding:11px 18px;
}
.spec .grp:hover td{background:var(--chq-blue-wash)}
.spec td:first-child{font-weight:600;color:var(--chq-navy)}
.pill{
  display:inline-block;background:var(--chq-soft);border:1px solid var(--chq-line);border-radius:6px;
  padding:2px 9px;font-weight:600;font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--chq-navy);
}
.tick{color:var(--chq-green);font-weight:800;margin-right:6px}
.table-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* the so sanh thoi han */
.term-card{background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius-lg);padding:32px 28px;position:relative;transition:all var(--chq-ease)}
.term-card:hover{box-shadow:var(--chq-shadow-2);transform:translateY(-4px)}
.term-card.hot{border:2px solid var(--chq-blue);box-shadow:var(--chq-shadow-2)}
.term-ribbon{position:absolute;top:-13px;left:28px;background:var(--chq-blue);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:999px}
.term-num{font-size:clamp(38px,4.6vw,54px);font-weight:800;color:var(--chq-blue);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:6px}
.term-card h3{margin-bottom:10px}
.term-card .src{font-size:13.5px;color:var(--chq-muted);border-top:1px solid var(--chq-line);padding-top:14px;margin-top:16px;margin-bottom:0}

/* ============ chq-callout-v2 ============ */
.callout{
  background:var(--chq-blue-wash);border-left:4px solid var(--chq-blue);
  border-radius:0 var(--chq-radius) var(--chq-radius) 0;padding:22px 26px;margin:26px 0;
}
.callout p:last-child{margin-bottom:0}
.callout.warn{background:var(--chq-amber-bg);border-left-color:var(--chq-amber)}
.callout.ok{background:var(--chq-green-bg);border-left-color:var(--chq-green)}
.callout.risk{background:var(--chq-red-bg);border-left-color:var(--chq-red)}
.callout h3,.callout h4{margin-bottom:8px}
.quick-answer{
  background:linear-gradient(135deg,var(--chq-blue-wash),#f4faff);
  border:1px solid #cfe3f8;border-radius:var(--chq-radius);padding:24px 28px;margin:0 0 30px;
}
.quick-answer p:last-child{margin-bottom:0}
.quick-answer strong{color:var(--chq-navy)}

/* ============ chq-cta-v2 ============ */
.cta-band{
  position:relative;background:linear-gradient(120deg,var(--chq-navy) 0%,var(--chq-blue) 100%);
  color:#fff;padding:72px 0;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:22px 22px;opacity:.5;
}
.cta-band .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-bottom:8px}
.cta-band p{color:rgba(255,255,255,.86);margin:0;font-size:17.5px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ============ chq-breadcrumb-v1 ============ */
.crumbs{font-size:14px;color:var(--chq-muted);padding:16px 0 0}
.crumbs a{color:var(--chq-muted)}
.crumbs a:hover{color:var(--chq-blue)}
.crumbs .sep{margin:0 8px;opacity:.5}
.crumbs span+span::before{content:"›";margin:0 9px;opacity:.55}
.crumbs span:last-child{color:var(--chq-navy);font-weight:500}
/* chq-breadcrumb-v2: tren dien thoai, ten trang dai lam vun dau bai
   -> ep breadcrumb ve dung 1 dong, cat bang dau ba cham */
@media (max-width:639.98px){
  .crumbs{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;font-size:13px}
  .crumbs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crumbs span:first-child{flex:0 0 auto}
  .crumbs span:last-child{flex:1 1 auto;min-width:0}
  .crumbs span+span::before{margin:0 6px}
}

/* ============ chq-content-v2 ============ */
.entry-grid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:52px;justify-content:space-between;padding-top:52px;padding-bottom:84px;align-items:start}
.entry-content{max-width:none}
/* do dai dong doc 50-75 ky tu (Baymard) - dung em de khong phu thuoc font tai ve */
.entry-content>p{max-width:36em}
.entry-content>ul,.entry-content>ol{max-width:36em}
.entry-content>blockquote{max-width:38em}
.entry-content h2{margin-top:2em;padding-top:.2em}
.entry-content h3{margin-top:1.6em}
.entry-content img{border-radius:var(--chq-radius);box-shadow:var(--chq-shadow-1);margin:1.6em 0}
.entry-content table{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;margin:1.6em 0;border:1px solid var(--chq-line);border-radius:var(--chq-radius);overflow:hidden}
.entry-content th,.entry-content td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--chq-line)}
.entry-content thead th{background:var(--chq-navy);color:#fff;font-weight:700;font-size:14px}
.entry-content tbody tr:nth-child(even){background:rgba(232,242,253,.45)}
.entry-content blockquote{margin:1.6em 0;padding:20px 26px;background:var(--chq-soft);border-left:4px solid var(--chq-blue);border-radius:0 var(--chq-radius) var(--chq-radius) 0;font-size:18px;color:var(--chq-navy)}
.entry-meta{font-size:14px;color:var(--chq-muted);margin-bottom:20px}

.sidebar{position:sticky;top:96px}
.side-box{background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius);padding:22px;margin-bottom:20px}
.side-box h4{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--chq-muted);margin-bottom:14px}
.side-box ul{list-style:none;padding:0;margin:0}
.side-box li{margin-bottom:10px;font-size:15px;line-height:1.5}
.side-hot{
  background:linear-gradient(135deg,var(--chq-navy),var(--chq-blue-dark));
  color:#fff;border-radius:var(--chq-radius);padding:26px 22px;text-align:center;
}
.side-hot h4{color:#fff;margin-bottom:6px;text-transform:none;letter-spacing:0;font-size:18px}
.side-hot p{color:rgba(255,255,255,.78);font-size:14.5px;margin-bottom:16px}
.side-hot a.hot{display:block;color:#fff;font-size:26px;font-weight:800;margin-bottom:14px;font-variant-numeric:tabular-nums}
.side-hot a.hot:hover{color:#7fd4ff;text-decoration:none}

/* ============ chq-faq-v2 ============ */
.faq{max-width:880px;margin:0 auto}
.faq details{border-bottom:1px solid var(--chq-line);padding:0}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:18px;font-weight:600;color:var(--chq-navy);transition:color var(--chq-ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--chq-blue)}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:26px;font-weight:400;color:var(--chq-blue);transition:transform var(--chq-ease);line-height:1;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details>div{padding:0 0 24px;color:var(--chq-muted);font-size:16.5px}
.faq details>div p:last-child{margin-bottom:0}

/* ============ chq-footer-v2 ============ */
.site-footer{background:var(--chq-navy-deep);color:rgba(255,255,255,.72);padding:66px 0 30px;font-size:15px}
.site-footer h4{color:#fff;font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.site-footer a{color:rgba(255,255,255,.78)}
.site-footer a:hover{color:var(--chq-cyan);text-decoration:none}
.site-footer .btn-white{color:var(--chq-blue)}
.site-footer .btn-white:hover{color:var(--chq-blue-dark)}
.site-footer .btn-ghost{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.site-footer .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.site-footer p{margin-bottom:.9em;line-height:1.65}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:34px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:9px;line-height:1.5}
.foot-logo{width:56px;height:56px;object-fit:contain;margin-bottom:14px}
.chq-disclaimer{
  border-top:1px solid rgba(255,255,255,.12);padding:26px 0;
  font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.68);
}
.chq-disclaimer .dis-lead{color:rgba(255,255,255,.86)}
.chq-disclaimer a{color:var(--chq-cyan);text-decoration:underline}
.fb-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fb-links a{color:rgba(255,255,255,.72);text-decoration:underline}
.chq-disclaimer h5{color:rgba(255,255,255,.92);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.chq-disclaimer h5::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--chq-amber);flex:none;box-shadow:0 0 0 3px rgba(245,165,36,.28)}
.chq-disclaimer strong{color:rgba(255,255,255,.92);font-weight:600}
.chq-disclaimer p{margin-bottom:.8em;max-width:none}
.chq-disclaimer p:last-child{margin-bottom:0}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.6;
}
.fb-addr{color:rgba(255,255,255,.45)}
.fb-demo{display:inline-flex;align-items:center;gap:8px;background:rgba(245,165,36,.14);border:1px solid rgba(245,165,36,.3);color:#f7c46a;border-radius:999px;padding:6px 14px;font-weight:600;height:fit-content}

/* ============ chq-sticky-call-v2 ============ */
.callbar{display:none}
.callbar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  height:56px;color:#fff;font-weight:700;font-size:15.5px;text-decoration:none;
}
.callbar .c1{background:var(--chq-blue);flex:2}
.callbar .c2{background:var(--chq-navy);flex:1;font-weight:600;font-size:14.5px}

/* ============ chq-responsive-v2 ============ */
/* ---- 1) Laptop / man hinh vua: 1025 - 1280px ----
   VAN GIU MENU NGANG (nguoi dung mong doi thay menu tren may tinh).
   Chi thu gon lai va tam an nut CTA de co khoang tho. */
@media (max-width:1279.98px){
  .site-header .wrap{gap:14px}
  .main-nav a{padding:0 8px;font-size:14px}
  .header-cta{display:none}   /* hotline van con o thanh tren */
  .hero-grid{gap:44px}
}

/* ---- 2) May tinh bang nam ngang tro xuong: <= 1024px (Tailwind "lg") ----
   Tu day tro xuong moi doi sang nut ba gach. */
@media (max-width:1023.98px){
  .nav-toggle{display:block;margin-left:auto}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--chq-line);box-shadow:var(--chq-shadow-2);
    padding:10px 22px 18px;margin:0;max-height:calc(100vh - 66px);overflow-y:auto;
  }
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav a{min-height:48px;padding:0 6px;border-bottom:1px solid var(--chq-line);border-radius:0;font-size:16px}
  .main-nav ul ul{display:flex;position:static;border:0;box-shadow:none;padding:0 0 0 16px;min-width:0}
  .main-nav ul ul a{font-size:15px}
  .tb-promise span:nth-child(3){display:none}  /* giu thanh tren dung 1 dong */
  .float-card{position:static;max-width:none;margin:0 0 14px;box-shadow:var(--chq-shadow-1)}
  .hero-visual{position:relative}

  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:640px;margin-left:auto;margin-right:auto}
  .entry-grid{grid-template-columns:1fr;gap:40px;padding-top:40px;padding-bottom:72px}
  .sidebar{position:static}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .steps::before{display:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}

/* ============ chq-touch-v1 : vung cham (WCAG 2.5.5 AAA = 44x44) ============
   Ngoai le cua chuan: lien ket nam trong cau van khong bat buoc 44px
   (WCAG 2.5.8 "Inline exception") -> ta khong dem cac link trong doan van. */
.brand{min-height:44px}
.card-link{display:inline-flex;align-items:center;min-height:44px}
.chq-toc a{display:inline-block;padding:6px 0;line-height:1.5}
/* moi lien ket dang danh sach/dieu huong >= 24x24 (WCAG 2.5.8 muc AA) */
.foot-grid li a,.side-box li a,.callout li a,.crumbs a,.topbar a{
  display:inline-block;min-height:24px;padding:4px 0;line-height:1.55;
}
.lead-hot a{display:inline-flex;align-items:center;min-height:44px}
.fb-links a{display:inline-flex;align-items:center;min-height:24px}
@media (max-width:1023.98px){
  .foot-grid li{margin-bottom:0}
  .foot-grid li a{display:inline-block;min-height:44px;padding:12px 0;line-height:1.45}
  .fb-links{gap:6px 20px}
  .fb-links a{display:inline-flex;align-items:center;min-height:44px}
  .chq-toc li{margin-bottom:0}
  .chq-toc a{padding:11px 0}
  .side-box li a,.callout li a{min-height:44px;padding:11px 0}
  .crumbs a{display:inline-block;padding:8px 0}
  .sidebar a.btn,.lead-hot a{min-height:44px}
}
/* o cot hep, cac muc menu chan trang nam sat nhau -> tach ra cho de bam */
@media (max-width:639.98px){
  .foot-grid li a{min-height:46px;padding:13px 0}
}
/* o dong y nhan tin: 17px -> 24px (WCAG 2.5.8 muc AA) */
.consent input[type=checkbox]{width:24px;height:24px;flex:none;accent-color:var(--chq-blue);cursor:pointer}
.consent label{cursor:pointer;line-height:1.55}

/* ---- 3) May tinh bang dung tro xuong: <= 768px (Tailwind "md") ---- */
@media (max-width:767.98px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .lead-wrap{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--chq-line)}
  .spec thead th{position:static}
  .section{padding:64px 0}
  .section-sm{padding:48px 0}
}

/* ---- 4) Dien thoai: <= 640px (Tailwind "sm") ---- */
@media (max-width:639.98px){
  body{font-size:16px}
  html,body{overflow-x:hidden}
  .wrap{padding:0 18px}
  .btn{white-space:normal;text-align:center;line-height:1.35;padding:13px 20px;min-height:48px;height:auto}
  .table-cta{flex-direction:column}
  .table-cta .btn,.hero-actions .btn,.cta-actions .btn,.ph-actions .btn{width:100%}
  .section{padding:52px 0}
  .section-sm{padding:40px 0}
  .hero{padding:40px 0 52px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;text-align:left;row-gap:0}
  .steps li{text-align:left;padding:0 0 24px 56px;position:relative}
  .steps li::before{content:"";position:absolute;left:18px;top:38px;bottom:0;width:2px;background:var(--chq-line)}
  .steps li:last-child::before{display:none}
  .step-n{position:absolute;left:0;top:0;margin:0;box-shadow:0 0 0 4px #fff}
  .float-card{position:static;max-width:none;margin-top:14px;box-shadow:var(--chq-shadow-1)}
  .foot-grid{grid-template-columns:1fr}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;padding-bottom:env(safe-area-inset-bottom)}
  body{padding-bottom:56px}
  .site-header{position:relative;top:auto}
  .lead-form{padding:24px 20px}
  .lead-side{padding:28px 24px}
  .lead-form .grid-2{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .tb-promise{display:none}
  .topbar .wrap{justify-content:center;text-align:center}
  .site-footer .chq-demo-sub{display:inline}
  /* bang -> the xep chong */
  .spec.stack,.spec.stack thead,.spec.stack tbody,.spec.stack tr,.spec.stack th,.spec.stack td{display:block;width:100%}
  .spec.stack{border:0;background:transparent}
  .spec.stack thead{display:none}
  .spec.stack tbody tr{
    background:#fff!important;border:1px solid var(--chq-line);border-radius:var(--chq-radius);
    margin-bottom:12px;padding:16px 18px;
  }
  .spec.stack tbody tr.grp{background:var(--chq-blue-wash)!important;border:0;padding:0;margin-bottom:10px}
  .spec.stack .grp td{border-radius:var(--chq-radius-sm)}
  .spec.stack td{border:0;padding:5px 0}
  .spec.stack td::before{
    content:attr(data-l);display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--chq-muted);margin-bottom:2px;
  }
  .spec.stack td:first-child{font-size:17px;font-weight:700;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--chq-line)}
  .spec.stack td:first-child::before{display:none}
  .spec.stack .grp td:first-child{font-size:13px;border:0;margin:0}
}

/* ---- 5) Dien thoai nho: <= 400px ---- */
@media (max-width:400px){
  .wrap{padding:0 15px}
  .brand-mark{width:40px;height:40px}
  .brand-txt strong{font-size:17px}
  .brand-txt small{font-size:10.5px;letter-spacing:.04em}
  .callbar a{font-size:14.5px}
  .callbar .c2{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============ chq-calc-v1 ============ */
.chq-calc{
  background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius-lg);
  box-shadow:var(--chq-shadow-1);overflow:hidden;margin:0 0 34px;
}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.calc-in{padding:32px}
.calc-in .fld{margin-bottom:16px}
.calc-in .fld:last-child{margin-bottom:0}
.calc-in label{display:block;font-size:14px;font-weight:600;color:var(--chq-navy);margin-bottom:6px}
.calc-in input,.calc-in select{
  width:100%;min-height:48px;padding:11px 14px;font:inherit;font-size:15.5px;color:var(--chq-ink);
  background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius-sm);transition:all var(--chq-ease);
}
.calc-in select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235b7185' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.calc-in :is(input,select):focus{outline:none;border-color:var(--chq-blue);box-shadow:0 0 0 3px rgba(10,110,209,.14)}

.calc-out{background:linear-gradient(160deg,var(--chq-navy),var(--chq-blue-dark));color:rgba(255,255,255,.86);padding:32px;display:flex;flex-direction:column}
.calc-eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7fd4ff;margin-bottom:10px}
.calc-num{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.calc-num b{font-size:clamp(44px,6vw,68px);font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.calc-num i{font-style:normal;font-size:24px;font-weight:700;color:#7fd4ff}
.calc-sub{font-size:14.5px;color:rgba(255,255,255,.7);margin:0 0 20px}
.calc-detail{list-style:none;padding:0;margin:0 0 18px;border-top:1px solid rgba(255,255,255,.16)}
.calc-detail li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;margin:0}
.calc-detail span{color:rgba(255,255,255,.68)}
.calc-detail strong{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.calc-note{background:rgba(245,165,36,.16);border:1px solid rgba(245,165,36,.34);color:#ffd48f;border-radius:var(--chq-radius-sm);padding:13px 16px;font-size:14px;line-height:1.6;margin-bottom:18px}
.calc-note strong{color:#ffdca5}
.calc-out .btn{margin-top:auto}
.calc-foot{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.52);margin:14px 0 0}
@media (max-width:767.98px){ .calc-grid{grid-template-columns:1fr} }

/* ============ chq-camcmp-v1 ============ */
.cam-cmp{font-size:15px}
.cam-cmp td{vertical-align:top}
.cam-cmp .v-ok,.cam-cmp .v-warn,.cam-cmp .v-no{
  display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.cam-cmp .v-ok{background:var(--chq-green-bg);color:#0a6b43}
.cam-cmp .v-warn{background:var(--chq-amber-bg);color:#8a5d05}
.cam-cmp .v-no{background:var(--chq-red-bg);color:#a72a1f}

/* ============ chq-option-v1 ============ */
.opt-card{display:flex;flex-direction:column}
.opt-card h3{margin-bottom:12px}
.opt-fit{margin-top:auto!important;padding-top:14px;border-top:1px solid var(--chq-line);font-size:15px;color:var(--chq-muted)}
.opt-fit strong{color:var(--chq-navy)}
.opt-cta{
  margin-top:30px;background:linear-gradient(120deg,var(--chq-navy),var(--chq-blue));
  border-radius:var(--chq-radius-lg);padding:34px 38px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.opt-cta>div:first-child{max-width:60ch}
@media (max-width:767.98px){.opt-cta{flex-direction:column;align-items:flex-start;padding:28px 24px}}

/* ============ chq-check-v1 ============ */
.chq-check{background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius-lg);box-shadow:var(--chq-shadow-1);overflow:hidden;margin:0 0 34px}
.chk-head{padding:28px 32px 0}
.chk-head h3{margin-bottom:6px}
.chk-head p{color:var(--chq-muted);font-size:15.5px;margin-bottom:0}
.chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:24px 0 0}
.chk-in{padding:8px 32px 32px}
.chk-in .fld{margin-bottom:14px}
.chk-in label{display:block;font-size:13.5px;font-weight:600;color:var(--chq-navy);margin-bottom:5px}
.chk-in input,.chk-in select{width:100%;min-height:44px;padding:10px 13px;font:inherit;font-size:15px;color:var(--chq-ink);background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius-sm);transition:all var(--chq-ease)}
.chk-in select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235b7185' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.chk-in :is(input,select):focus{outline:none;border-color:var(--chq-blue);box-shadow:0 0 0 3px rgba(10,110,209,.14)}
.chk-in .btn{margin-top:8px}

.chk-out{background:var(--chq-soft);border-left:1px solid var(--chq-line);padding:24px 28px 32px}
.chk-empty{text-align:center;padding:40px 10px;color:var(--chq-muted)}
.chk-empty-ico{width:56px;height:56px;border-radius:50%;background:var(--chq-blue-wash);color:var(--chq-blue);font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.chk-empty p{font-size:15px;max-width:38ch;margin:0 auto}

.chk-verdict{border-radius:var(--chq-radius);padding:18px 20px;margin-bottom:18px}
.chk-verdict strong{display:block;font-size:19px;font-weight:800;margin-bottom:4px}
.chk-verdict span{display:block;font-size:14.5px;line-height:1.6}
.chk-verdict.good{background:var(--chq-green-bg);border:1px solid #b9e8d1}
.chk-verdict.good strong{color:#0a6b43}.chk-verdict.good span{color:#12805a}
.chk-verdict.warn{background:var(--chq-amber-bg);border:1px solid #f2ddb4}
.chk-verdict.warn strong{color:#8a5d05}.chk-verdict.warn span{color:#96682a}
.chk-verdict.bad{background:var(--chq-red-bg);border:1px solid #f5c4bf}
.chk-verdict.bad strong{color:#a72a1f}.chk-verdict.bad span{color:#b8453a}

.chk-list{list-style:none;padding:0;margin:0 0 20px}
.chk-list li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--chq-line);margin:0}
.chk-list li:last-child{border-bottom:0}
.chk-list strong{display:block;font-size:15px;color:var(--chq-navy);font-weight:600}
.chk-list em{display:block;font-style:normal;font-size:13.5px;line-height:1.55;color:var(--chq-muted);margin-top:2px}
.s-ico{width:20px;height:20px;border-radius:50%;flex:none;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff}
.s-ok .s-ico{background:var(--chq-green)}
.s-ok .s-ico::before{content:"✓"}
.s-warn .s-ico{background:var(--chq-amber)}
.s-warn .s-ico::before{content:"!"}
.s-no .s-ico{background:var(--chq-red)}
.s-no .s-ico::before{content:"✕"}

.chk-cta{background:#fff;border:1px solid var(--chq-line);border-radius:var(--chq-radius);padding:20px}
.chk-cta p{font-size:14.5px;line-height:1.65;color:var(--chq-muted);margin-bottom:14px}
.chk-cta strong{color:var(--chq-navy)}
.chk-or{text-align:center;font-size:13.5px;margin:12px 0 0!important}
@media (max-width:767.98px){
  .chk-grid{grid-template-columns:1fr}
  .chk-out{border-left:0;border-top:1px solid var(--chq-line)}
  .chk-head{padding:24px 20px 0}
  .chk-in{padding:8px 20px 24px}
  .chk-out{padding:20px}
}

/* ============ chq-storageband-v1 ============ */
.storage-band{
  display:grid;grid-template-columns:1.55fr 1fr;gap:0;
  border:1px solid var(--chq-line);border-radius:var(--chq-radius-lg);
  background:var(--chq-white);box-shadow:var(--chq-shadow-1);overflow:hidden;
}
.storage-band .sb-main{padding:40px 40px 36px}
.storage-band .sb-main h2{font-size:clamp(24px,2.4vw,32px);line-height:1.25;margin:10px 0 16px}
.storage-band .sb-main > p{color:var(--chq-muted);margin-bottom:20px}
.storage-band .checkrow{margin-bottom:26px}
.sb-actions{display:flex;flex-wrap:wrap;gap:12px}
.storage-band .sb-side{
  padding:36px 32px;background:var(--chq-blue-wash);
  border-left:1px solid var(--chq-line);
}
.sb-side h3,.sb-side h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--chq-navy);margin-bottom:16px}
.sb-stats{margin:0 0 18px}
.sb-stats > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px dashed rgba(11,42,69,.16);
}
.sb-stats > div:last-child{border-bottom:0}
.sb-stats dt{font-size:14px;color:var(--chq-muted);margin:0}
.sb-stats dd{margin:0;font-weight:700;font-size:19px;color:var(--chq-navy);white-space:nowrap}
.sb-note{font-size:13px;line-height:1.6;color:var(--chq-muted);margin:0}
@media (max-width:767.98px){
  .storage-band{grid-template-columns:1fr}
  .storage-band .sb-main{padding:28px 22px 24px}
  .storage-band .sb-side{border-left:0;border-top:1px solid var(--chq-line);padding:26px 22px}
}

/* ============ chq-entrytable-v1 ============ */
.entry-content .table-scroll{
  margin:1.6em 0;border:1px solid var(--chq-line);border-radius:var(--chq-radius);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.entry-content .table-scroll table{margin:0;border:0;border-radius:0}
.entry-content .table-scroll.ts-wide table{min-width:640px}
.ts-hint{display:none}
@media (max-width:767.98px){
  .entry-content .ts-hint{
    display:block;margin:-1.2em 0 1.6em;font-size:12.5px;color:var(--chq-muted);
    text-align:right;letter-spacing:.01em;
  }
}
/* luoi an toan khi JavaScript khong chay: bang chua duoc boc van cuon duoc */
@media (max-width:767.98px){
  .entry-content table:not(.table-scroll > table){
    display:block;width:max-content;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}
/* grid item phai duoc phep co lai, neu khong bang se day tran ra ngoai vung nhin */
.entry-grid > *{min-width:0}
.entry-content{min-width:0;max-width:100%}
.entry-content .table-scroll{max-width:100%}
.entry-content table{table-layout:auto}
.entry-content td,.entry-content th{overflow-wrap:break-word}
.faq details > p{padding:0 0 24px;margin:0;color:var(--chq-muted);font-size:16.5px}

/* ==========================================================================
   chq-v3 : NANG CAP GIAO DIEN 23/08/2026
   Muc tieu: sang hon - sinh dong hon - dung chuan quoc te - khong hai SEO.
   Nguyen tac: chi dung transform/opacity de chuyen dong (khong gay CLS),
   moi hieu ung deu tat khi nguoi dung bat "giam chuyen dong".
   ========================================================================== */

/* ---------- 1. Bang mau v3: giu navy tin cay, them nang luong xanh-cyan ---------- */
:root{
  --chq-navy-deep:#0d2b4a;              /* sang hon #071d31 - bot cam giac den */
  --chq-blue-bright:#2b8cff;
  --chq-cyan:#0fc0e6;
  --chq-cyan-soft:#e4f8fd;

  --chq-grad-brand:linear-gradient(90deg,#0a6ed1 0%,#0e94dd 52%,#12b3d6 100%);
  --chq-grad-cta:linear-gradient(135deg,#0a6ed1 0%,#2b8cff 100%);
  --chq-grad-cta-hover:linear-gradient(135deg,#0857a8 0%,#0a6ed1 100%);
  --chq-tint:linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%);

  --chq-topbar-h:38px;
  --chq-header-h:72px;
  --chq-header-h-min:58px;
  --chq-top-h:110px;                    /* topbar + header, dung lam dem cho body */
}

/* ---------- 2. Thanh dieu huong: co dinh + thu nho khi cuon ----------
   Header dat "fixed" con body co dem cao co dinh -> chieu cao dong chay
   KHONG BAO GIO doi khi header thu nho => CLS = 0.
   Trang thai "dinh" phat hien bang IntersectionObserver (khong dung
   su kien scroll) => khong ton thoi gian phan hoi INP. */
body{padding-top:var(--chq-top-h)}
html{scroll-padding-top:calc(var(--chq-header-h-min) + 14px)}
.chq-sentinel{position:absolute;top:0;left:0;width:1px;height:46px;pointer-events:none;opacity:0}

.site-top{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:#fff;
  will-change:transform;
}
.site-top .site-header{position:static;top:auto;backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
.topbar{
  height:var(--chq-topbar-h);overflow:hidden;
  background:var(--chq-grad-brand);color:rgba(255,255,255,.92);
  transition:height var(--chq-ease),opacity var(--chq-ease);
}
.topbar .wrap{height:100%;min-height:0}
.topbar a{color:#fff}
.topbar a:hover{color:#fff;text-decoration:underline}
.tb-promise span::before{background:rgba(255,255,255,.85)}

.site-top .site-header{
  height:var(--chq-header-h);
  border-bottom:1px solid var(--chq-line);
  transition:height var(--chq-ease),box-shadow var(--chq-ease);
}
.site-top .site-header .wrap{height:100%;min-height:0}
/* vach mau chay doc chan header - chi tiet nho tao cam giac "cong nghe" */
.site-top .site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--chq-grad-brand);opacity:0;transition:opacity var(--chq-ease);
}
.site-top{position:fixed}
.site-top .site-header{position:relative}

.site-top.is-stuck .topbar{height:0;opacity:0}
.site-top.is-stuck .site-header{height:var(--chq-header-h-min);box-shadow:0 6px 26px rgba(11,42,69,.13)}
.site-top.is-stuck .site-header::after{opacity:1}
.site-top.is-stuck .brand-mark{width:36px;height:36px}
.site-top.is-stuck .brand-txt strong{font-size:17.5px}
.brand-mark,.brand-txt strong{transition:width var(--chq-ease),height var(--chq-ease),font-size var(--chq-ease)}

/* menu: gach chan gradient truot vao khi ro chuot */
.main-nav > ul > li > a{position:relative}
.main-nav > ul > li > a::after{
  content:"";position:absolute;left:8px;right:8px;bottom:12px;height:2px;border-radius:2px;
  background:var(--chq-grad-brand);transform:scaleX(0);transform-origin:left;
  transition:transform var(--chq-ease);
}
.main-nav > ul > li > a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after{transform:scaleX(1)}

/* ---------- 3. Nut bam: gradient + mui ten truot ---------- */
.btn-primary{background:var(--chq-grad-cta);box-shadow:0 6px 18px rgba(10,110,209,.30)}
.btn-primary:hover{background:var(--chq-grad-cta-hover);box-shadow:0 12px 26px rgba(10,110,209,.38)}
.btn .btn-ar{display:inline-block;transition:transform var(--chq-ease)}
.btn:hover .btn-ar{transform:translateX(4px)}
.btn-ghost:hover{border-color:var(--chq-blue);background:var(--chq-cyan-soft)}
.btn:active{transform:translateY(0)}

/* ---------- 4. The noi dung: nang len + vien mau khi ro chuot ---------- */
.card,.svc-card,.opt-card,.term-card{position:relative;overflow:hidden;transition:transform var(--chq-ease),box-shadow var(--chq-ease),border-color var(--chq-ease)}
.card::before,.svc-card::before,.opt-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--chq-grad-brand);transform:scaleX(0);transform-origin:left;
  transition:transform var(--chq-ease);
}
.card:hover,.svc-card:hover,.opt-card:hover{
  transform:translateY(-4px);box-shadow:var(--chq-shadow-2);border-color:#c9ddf3;
}
.card:hover::before,.svc-card:hover::before,.opt-card:hover::before{transform:scaleX(1)}

/* ---------- 5. Nen khoi: xen ke trang / xanh nhat cho co nhip ---------- */
.section-tint{background:var(--chq-tint)}
.section-tint + .section-tint{background:#fff}

/* ---------- 6. Hero: them mang mau thu hai cho bot don dieu ---------- */
.hero{background:linear-gradient(180deg,#ffffff 0%,#f6fbff 100%)}
.hero::after{
  background:radial-gradient(circle,rgba(10,110,209,.13),rgba(18,179,214,0) 68%);
}
.hero .wrap::before{
  content:"";position:absolute;left:-180px;bottom:-220px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,179,214,.16),rgba(18,179,214,0) 70%);
  pointer-events:none;z-index:-1;
}

/* ---------- 7. Chan trang: sang hon, co vien mau o dinh ---------- */
.site-footer{
  position:relative;
  background:linear-gradient(180deg,#0f3157 0%,#0b2a45 100%);
  color:rgba(255,255,255,.76);
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--chq-grad-brand);
}
.site-footer a:hover{color:var(--chq-cyan)}

/* ---------- 8. Thanh goi dien duoi cung: gradient ---------- */
.callbar .c1{background:var(--chq-grad-cta)}

/* ---------- 9. Hien dan khi cuon ----------
   Class "reveal" CHI duoc gan bang JavaScript. Neu trinh duyet tat JS
   (hoac bot tim kiem khong chay JS) thi noi dung van hien binh thuong. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- 10. Tat toan bo chuyen dong khi nguoi dung yeu cau ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .site-top .site-header,.topbar,.brand-mark,.brand-txt strong{transition:none}
  .card:hover,.svc-card:hover,.opt-card:hover,.btn:hover{transform:none}
}

/* ---------- 11. Dieu chinh theo man hinh ---------- */
@media (max-width:1023.98px){
  :root{--chq-topbar-h:36px;--chq-header-h:66px;--chq-header-h-min:56px;--chq-top-h:102px}
}
@media (max-width:639.98px){
  :root{--chq-topbar-h:34px;--chq-header-h:58px;--chq-header-h-min:52px;--chq-top-h:92px}
  body{padding-top:var(--chq-top-h);padding-bottom:56px}
  .hero .wrap::before{display:none}
}

/* ---------- 12. Nen cac khoi: doi tu xam sang xanh nhat, khoi navy co gradient ---------- */
.section-soft{background:linear-gradient(180deg,#f8fbff 0%,#edf5ff 100%)}
.section-wash{background:linear-gradient(160deg,#e8f2fd 0%,#e2f7fd 100%)}
.section-navy{
  position:relative;overflow:hidden;
  background:linear-gradient(125deg,#0b2a45 0%,#12457a 48%,#0a6ed1 118%);
  color:rgba(255,255,255,.88);
}
.section-navy::before{
  content:"";position:absolute;top:-140px;right:-120px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,179,214,.30),rgba(18,179,214,0) 68%);pointer-events:none;
}
.section-navy > .wrap{position:relative;z-index:1}
.brands-band{background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}

/* ---------- 13. Bieu tuong & con so: gradient cho co nang luong ---------- */
.card-ico{
  background:var(--chq-grad-cta);color:#fff;
  box-shadow:0 6px 16px rgba(10,110,209,.26);
  transition:transform var(--chq-ease);
}
.card:hover .card-ico{transform:scale(1.06) rotate(-3deg)}
.stats b{
  background:linear-gradient(120deg,#0a6ed1,#12b3d6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--chq-blue);
}
.step-n{
  background:var(--chq-grad-cta);
  box-shadow:0 0 0 6px #fff,0 0 0 10px rgba(10,110,209,.14),0 6px 14px rgba(10,110,209,.22);
}
.eyebrow::before{background:var(--chq-grad-brand)}
.term-num{
  background:linear-gradient(120deg,#0a6ed1,#12b3d6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ---------- 14. Bang bieu: dau bang gradient thay vi navy dac ---------- */
.entry-content thead th,.spec thead th{background:linear-gradient(135deg,#0b2a45,#0a6ed1)}
.entry-content tbody tr{transition:background var(--chq-ease)}
.entry-content tbody tr:hover{background:var(--chq-cyan-soft)}

/* ---------- 15. Duong vien tap trung ro rang hon (tieu chuan WCAG 2.4.11) ---------- */
:focus-visible{outline:3px solid var(--chq-blue);outline-offset:3px;border-radius:6px}

/* ---------- 16. Cac khoi toi con lai: doi sang gradient navy -> xanh ---------- */
.lead-side{background:linear-gradient(150deg,#0b2a45 0%,#12457a 55%,#0a6ed1 130%)}
.calc-out{background:linear-gradient(150deg,#0b2a45 0%,#12457a 60%,#0a6ed1 135%)}
.opt-cta{background:linear-gradient(120deg,#0b2a45 0%,#12457a 50%,#0a6ed1 115%)}
.lead-hot{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}

/* ---------- 17. Chinh chi tiet nho ---------- */
.hero-actions{gap:12px}
.btn-lg{padding:0 26px}
.callbar a{padding:0 10px;text-align:center;line-height:1.25}
.callbar .c2{font-size:14px}
@media (max-width:639.98px){
  .eyebrow{font-size:11.5px;letter-spacing:.10em;line-height:1.35;align-items:flex-start}
  .eyebrow::before{margin-top:7px}
}

/* ---------- 18. Cac phan tu "dinh" khac phai tranh header co dinh ---------- */
.spec thead th{top:calc(var(--chq-header-h-min) + 1px);z-index:3}
.sidebar{top:calc(var(--chq-header-h-min) + 22px)}
@media (max-width:767.98px){ .spec thead th{position:static} }

/* ---------- 19. Hop noi bat o cot ben & the thuong hieu: doi sang gradient sang ---------- */
.side-hot{background:linear-gradient(145deg,#0b2a45 0%,#12457a 55%,#0a6ed1 130%)}
.brands .b-hero{background:linear-gradient(135deg,#12457a 0%,#0a6ed1 100%)}
.page-hero{background:linear-gradient(180deg,#e8f2fd 0%,#f7fbff 100%)}

/* ==========================================================================
   chq-v4 : HE THONG THIET KE (DESIGN SYSTEM) — 23/08/2026
   Xay theo cach cac trang cong nghe hang dau dang lam:
   Verkada · Axis · Milestone · Stripe · Linear · Vercel · Base.vn
   Ba nguyen tac coi loi:
     1. DAN DAT BANG MAU TRANG. Mau nhan hieu chi dung cho nut, lien ket,
        vien tap trung va bieu tuong trong tam (quy tac 60-30-10).
     2. VIEN 1px THAY CHO DO BONG. Do bong day la dau hieu giao dien cu.
     3. XAM PHA MAU NHAN HIEU, khong dung xam chet.
   ========================================================================== */

:root{
  /* ---- Thang mau nhan hieu 50..950 (chroma dat dinh o buoc 500-600) ---- */
  --b-50:#eff6ff;  --b-100:#dbeafe; --b-200:#bfdbfe; --b-300:#93c5fd;
  --b-400:#60a5fa; --b-500:#2b86f5; --b-600:#0a6ed1; --b-700:#0857a8;
  --b-800:#0b4680; --b-900:#0d3a66; --b-950:#0b2545;

  /* ---- Thang trung tinh PHA XANH (khong phai xam chet) ---- */
  --n-0:#ffffff;   --n-25:#fbfcfe;  --n-50:#f6f9fc;  --n-100:#eef3f9;
  --n-200:#e1e8f1; --n-300:#c9d5e3; --n-400:#9aa9bc; --n-500:#667c93;
  --n-600:#4d6076; --n-700:#3a4a5c; --n-800:#26313d; --n-900:#16202b;

  /* ---- Khoang cach: luoi 8 diem ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  /* ---- Bo goc: mot tinh cach duy nhat (vua phai — chuan B2B hien dai) ---- */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  /* ---- Do bong: rat nhe. Neu nhin ro do bong thi la do bong loi thoi ---- */
  --sh-xs:0 1px 2px rgb(16 24 40 / .05);
  --sh-sm:0 1px 3px rgb(16 24 40 / .08), 0 1px 2px -1px rgb(16 24 40 / .05);
  --sh-md:0 4px 8px -2px rgb(16 24 40 / .08), 0 2px 4px -2px rgb(16 24 40 / .04);
  --sh-lg:0 12px 16px -4px rgb(16 24 40 / .08), 0 4px 6px -2px rgb(16 24 40 / .03);
  --sh-xl:0 20px 28px -6px rgb(16 24 40 / .10);

  /* ---- Anh xa lai bien cu sang he moi ---- */
  --chq-white:#ffffff;
  --chq-soft:var(--n-50);
  --chq-blue-wash:var(--b-50);
  --chq-line:var(--n-200);
  --chq-blue:var(--b-600);
  --chq-blue-dark:var(--b-700);
  --chq-navy:var(--b-950);
  --chq-navy-deep:var(--b-950);
  --chq-ink:var(--n-900);
  --chq-muted:var(--n-500);
  --chq-radius:var(--r-md);
  --chq-radius-sm:var(--r-sm);
  --chq-radius-lg:var(--r-lg);
  --chq-shadow-1:var(--sh-xs);
  --chq-shadow-2:var(--sh-md);
}

/* ---------- 1. CHU: to hon, NHE hon (dau hieu ro nhat cua trang duoc thiet ke) ----------
   Stripe dat tieu de 48px o do dam 300. Axis va Milestone dung do dam thuong.
   Giao dien WordPress mac dinh hay dung 28px do dam 700 — do la thu lam trang trong re tien.
   Tieng Viet co dau nen ta dung 600 thay vi 300, van nhe hon 800 rat nhieu. */
h1,h2,h3,h4,h5{color:var(--n-900)}
h1{
  font-size:clamp(32px,4.2vw,48px);
  font-weight:600;line-height:1.08;letter-spacing:-.028em;
}
h2{
  font-size:clamp(26px,3.1vw,34px);
  font-weight:600;line-height:1.18;letter-spacing:-.022em;
}
h3{font-size:clamp(19px,1.7vw,22px);font-weight:650;line-height:1.32;letter-spacing:-.012em}
h4{font-size:17.5px;font-weight:650;line-height:1.4;letter-spacing:-.006em}
h5{font-size:15px;font-weight:650}
body{font-size:17px;line-height:1.65;color:var(--n-800)}

/* nhan chu hoa nho: chuan Butterick — gian chu 5-12% */
.eyebrow,.side-box h4,.chq-toc h2,.foot-grid h4,.chq-disclaimer h5{
  letter-spacing:.09em;
}
.eyebrow{font-size:12.5px;font-weight:700;color:var(--b-700)}
.eyebrow::before{background:var(--b-600);width:20px;height:2px}

/* ---------- 2. NHIP DOC: khoang tren tieu de gap 3 lan khoang duoi ---------- */
.entry-content h2{margin-top:var(--s12);margin-bottom:var(--s4);padding-top:0}
.entry-content h3{margin-top:var(--s8);margin-bottom:var(--s3)}
.entry-content p{margin-bottom:var(--s6)}
.entry-content{font-size:17.5px;line-height:1.72}
.section-head{margin-bottom:var(--s12)}
.section-head p{font-size:18px;color:var(--n-500);line-height:1.6}

/* ---------- 3. THANH TREN: sang han, khong con dai den ----------
   Xoa han dai mau toi o dinh trang — thu lam trang trong "toi" nhat. */
.topbar{
  background:var(--b-50);
  color:var(--b-900);
  border-bottom:1px solid var(--b-100);
  font-size:13px;font-weight:500;
}
.topbar a{color:var(--b-700);font-weight:700}
.topbar a:hover{color:var(--b-800);text-decoration:underline}
.tb-promise span::before{background:var(--b-500);width:5px;height:5px}
.site-top{background:#fff}
.site-top .site-header{border-bottom:1px solid var(--n-200)}
.site-top .site-header::after{background:var(--b-600)}
.site-top.is-stuck .site-header{box-shadow:var(--sh-sm)}

/* ---------- 4. NUT: bo goc nho, mot mau dac, khong gradient ---------- */
.btn{border-radius:var(--r-sm);font-weight:600;font-size:15.5px;min-height:48px;padding:0 22px}
.btn-lg{min-height:54px;font-size:16.5px;padding:0 26px}
.btn-primary{background:var(--b-600);color:#fff;box-shadow:none;border-color:var(--b-600)}
.btn-primary:hover{background:var(--b-700);border-color:var(--b-700);box-shadow:var(--sh-sm)}
.btn-ghost{background:#fff;color:var(--n-800);border-color:var(--n-300)}
.btn-ghost:hover{color:var(--b-700);border-color:var(--b-400);background:var(--b-50)}
.btn:hover{transform:translateY(-1px)}
.header-cta{min-height:44px;font-size:14.5px}

/* ---------- 5. THE NOI DUNG: VIEN 1px, khong do bong khi dung yen ----------
   Quy tac cua Linear: "vien 1px thay cho do bong". Cloudflare dat do bong the o
   muc rgba(0,0,0,.02) — gan nhu khong thay. Neu nhin ro do bong la giao dien cu. */
.card,.svc-card,.opt-card,.term-card,.side-box,.chq-check,.chq-calc,.storage-band,.lead-form{
  border-radius:var(--r-md);
  border:1px solid var(--n-200);
  box-shadow:none;
}
.card::before,.svc-card::before,.opt-card::before{display:none}
.card,.svc-card,.opt-card,.term-card{
  transition:border-color var(--chq-ease),box-shadow var(--chq-ease),transform var(--chq-ease);
}
.card:hover,.svc-card:hover,.opt-card:hover,.term-card:hover{
  transform:translateY(-2px);
  border-color:var(--b-300);
  box-shadow:var(--sh-sm);
}
.card{padding:var(--s6)}
.card p{font-size:16px;color:var(--n-500);line-height:1.6}
.brands li{box-shadow:none;border-radius:var(--r-sm)}
.brands li:hover{transform:translateY(-2px);box-shadow:var(--sh-xs);border-color:var(--b-300)}

/* ---------- 6. BIEU TUONG: mot mau dac, khong gradient ---------- */
.card-ico{
  background:var(--b-600);color:#fff;
  border-radius:var(--r-sm);box-shadow:none;
  width:44px;height:44px;margin-bottom:var(--s5);
}
.card-ico svg{width:22px;height:22px}
.card:hover .card-ico{transform:none}
.step-n{background:var(--b-600);box-shadow:0 0 0 6px #fff,0 0 0 7px var(--n-200)}

/* ---------- 7. CON SO: mot mau dac, khong to gradient ---------- */
.stats b,.term-num{
  background:none;-webkit-text-fill-color:currentColor;
  color:var(--b-600);letter-spacing:-.03em;font-weight:700;
}

/* ---------- 8. NEN CAC KHOI: trang <-> xam pha xanh, khong dung mau dam ---------- */
.section-soft{background:var(--n-50)}
.section-wash{background:var(--b-50)}
.brands-band{background:var(--n-50);border-color:var(--n-200)}
.page-hero{background:var(--n-50);border-bottom:1px solid var(--n-200)}
.hero{background:#fff}
.hero::before{opacity:.4}
.hero::after{background:radial-gradient(circle,rgba(10,110,209,.09),rgba(18,179,214,0) 70%)}
.hero .wrap::before{display:none}

/* khoi dam DUY NHAT tren trang — de danh cho phan quan trong nhat */
.section-navy{background:var(--b-950)}
.section-navy::before{background:radial-gradient(circle,rgba(43,134,245,.22),rgba(43,134,245,0) 70%)}
.section-navy .eyebrow{color:var(--b-300)}
.section-navy .eyebrow::before{background:var(--b-400)}
.lead-side,.calc-out,.opt-cta,.side-hot{background:var(--b-950)}
.brands .b-hero{background:var(--b-700)}
.site-footer{background:var(--b-950)}
.site-footer::before{background:var(--b-600)}
.entry-content thead th,.spec thead th{background:var(--b-800)}
.callbar .c1{background:var(--b-600)}
.callbar .c2{background:var(--b-950)}

/* ---------- 9. BANG: vien nhe, khong sac mau ---------- */
.entry-content table,.spec{border-color:var(--n-200);border-radius:var(--r-md)}
.entry-content tbody tr:nth-child(even){background:var(--n-50)}
.entry-content tbody tr:hover{background:var(--b-50)}

/* ==========================================================================
   chq-v4-nav : MENU DIEN THOAI THIET KE LAI
   Theo Nielsen Norman Group + Smashing Magazine:
     - Muc cha va muc con phai khac nhau ca BA thu: co chu, do dam, mau chu.
     - Muc dang xem phai co BA tin hieu: mau nen, do dam, vach mau ben trai.
       (chi dua vao mau thi nguoi mu mau khong nhan ra)
     - Duong ke chi dat giua cac NHOM, khong dat giua cac muc con.
   ========================================================================== */
@media (max-width:1023.98px){
  .main-nav{
    padding:var(--s2) 0 var(--s20);
    border-bottom:1px solid var(--n-200);
    box-shadow:var(--sh-xl);
    max-height:calc(100dvh - var(--chq-header-h));
    overscroll-behavior:contain;
  }
  .main-nav > ul > li{padding:0 var(--s4)}
  .main-nav > ul > li + li{border-top:1px solid var(--n-100)}

  /* --- muc cap 1 --- */
  .main-nav > ul > li > a{
    min-height:56px;padding:0 var(--s3);
    font-size:17px;font-weight:600;color:var(--n-900);
    border:0;border-radius:var(--r-sm);
  }
  .main-nav > ul > li > a::after{display:none}   /* bo gach chan gradient */

  /* --- nhom muc con: thut vao + vach doc mo --- */
  .main-nav ul ul{
    display:block;
    margin:0 0 var(--s2) var(--s3);
    padding:0 0 0 var(--s3);
    border:0;border-left:2px solid var(--n-200);
    box-shadow:none;background:transparent;min-width:0;
  }
  .main-nav ul ul li{margin:0}
  .main-nav ul ul a{
    min-height:46px;padding:0 var(--s3);
    font-size:15.5px;font-weight:400;color:var(--n-600);
    border:0;border-radius:var(--r-sm);
  }

  /* --- muc dang xem: nen + do dam + vach mau ben trai --- */
  .main-nav .current-menu-item > a,
  .main-nav .current_page_item > a,
  .main-nav .current-menu-ancestor > a,
  .main-nav [aria-current="page"]{
    background:var(--b-50);color:var(--b-700);font-weight:600;
    box-shadow:inset 3px 0 0 var(--b-600);
  }
  .main-nav .current-menu-ancestor > a{background:transparent;box-shadow:none;color:var(--b-700)}
  .main-nav a:active{background:var(--n-100)}
}

/* ==========================================================================
   chq-v4-article : BO PHAN TU CHO BAI VIET DAI
   Nielsen Norman Group: 5 ky thuat chong "buc tuong chu" —
   hop tom tat, in dam co chon loc, gach dau dong, hop nhan manh, hinh minh hoa.
   ========================================================================== */

/* --- Hop TOM TAT NHANH: dat ngay sau doan mo dau --- */
.chq-key{
  background:var(--b-50);border:1px solid var(--b-200);
  border-radius:var(--r-md);padding:var(--s6);
  margin:0 0 var(--s8);max-width:none;
}
.chq-key h2,.chq-key h3,.chq-key > p.k-label{
  font-size:12.5px!important;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--b-700);margin:0 0 var(--s3)!important;padding:0!important;
  display:flex;align-items:center;gap:var(--s2);line-height:1.4;
}
.chq-key h2::before,.chq-key h3::before,.chq-key > p.k-label::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--b-600);flex:none;
}
.chq-key p{font-size:17px;line-height:1.68;color:var(--n-800);margin:0;max-width:none}
.chq-key p + p{margin-top:var(--s3)}
.chq-key strong{color:var(--n-900)}
.chq-key a{color:var(--b-700);font-weight:600}
.chq-key ul{margin:0;padding:0;list-style:none;max-width:none}
.chq-key li{position:relative;padding-left:var(--s6);margin-bottom:var(--s3);font-size:16.5px;line-height:1.6}
.chq-key li:last-child{margin-bottom:0}
.chq-key li::before{
  content:"";position:absolute;left:2px;top:10px;
  width:7px;height:7px;border-radius:50%;background:var(--b-600);
}

/* --- Hop nhan manh: vien trai 4px + nen nhat + nhan --- */
.callout{
  border-left:4px solid var(--b-600);background:var(--b-50);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s5) var(--s6);margin:var(--s8) 0;
  font-size:16.5px;line-height:1.65;
}
.callout.warn{background:#fffbeb;border-left-color:#d97706}
.callout.ok{background:#f0fdf4;border-left-color:#16a34a}
.callout.risk{background:#fef2f2;border-left-color:#dc2626}
.callout.legal{background:var(--n-50);border-left-color:var(--n-400)}
.callout h3,.callout h4{
  font-size:13px!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin:0 0 var(--s2)!important;color:var(--b-800);
}
.callout.warn h3,.callout.warn h4{color:#92400e}
.callout.risk h3,.callout.risk h4{color:#991b1b}
.callout.ok h3,.callout.ok h4{color:#166534}
.callout ul,.callout ol{max-width:none;margin-bottom:0}

/* --- Danh sach trong bai: dau cham mau nhan hieu, khong dung dau cham mac dinh --- */
.entry-content > ul{list-style:none;padding-left:0;margin:var(--s6) 0}
.entry-content > ul > li{position:relative;padding-left:var(--s6);margin-bottom:var(--s3);line-height:1.7}
.entry-content > ul > li::before{
  content:"";position:absolute;left:4px;top:12px;
  width:6px;height:6px;border-radius:50%;background:var(--b-500);
}
.entry-content > ol{list-style:none;padding-left:0;counter-reset:chqn;margin:var(--s6) 0}
.entry-content > ol > li{position:relative;padding-left:var(--s10);margin-bottom:var(--s4);line-height:1.7}
.entry-content > ol > li::before{
  counter-increment:chqn;content:counter(chqn);
  position:absolute;left:0;top:3px;width:26px;height:26px;border-radius:50%;
  background:var(--b-50);color:var(--b-700);border:1px solid var(--b-200);
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
}

/* --- Trich dan --- */
.entry-content blockquote{
  border-left:4px solid var(--n-300);background:transparent;
  padding:0 0 0 var(--s6);margin:var(--s8) 0;
  font-size:19px;line-height:1.6;color:var(--n-700);font-style:normal;border-radius:0;
}

/* --- Hinh + chu thich --- */
.entry-content figure{margin:var(--s10) 0}
.entry-content figure img{margin:0;border-radius:var(--r-md);box-shadow:none;border:1px solid var(--n-200)}
.entry-content figcaption{
  font-size:14px;line-height:1.5;color:var(--n-500);
  margin-top:var(--s3);padding-left:var(--s3);border-left:2px solid var(--n-200);
}

/* --- Duong phan doan --- */
.entry-content hr{border:0;height:1px;background:var(--n-200);margin:var(--s16) 0}

/* --- Muc luc: gon hon, co vach cho muc dang xem --- */
.chq-toc{background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r-md);padding:var(--s6)}
.chq-toc h2{font-size:12.5px!important;color:var(--n-500)}
.chq-toc a{color:var(--n-700);font-weight:400}
.chq-toc a:hover{color:var(--b-700)}

/* --- Ghi chu mien tru: nhe nhang, khong doi choi voi noi dung --- */
.chq-legalnote{background:var(--n-50);border:1px solid var(--n-200);border-left:3px solid var(--n-300);border-radius:var(--r-md)}
.chq-updated{font-size:13.5px;color:var(--n-500)}

/* --- Nut hanh dong ghim trong ngan menu dien thoai (theo khuyen nghi NN/g) --- */
.nav-cta{display:none}
@media (max-width:1023.98px){
  .main-nav{padding:var(--s2) 0 var(--s4)}
  .nav-cta{
    display:grid;gap:var(--s3);
    margin:var(--s5) var(--s4) 0;padding-top:var(--s5);
    border-top:1px solid var(--n-200);
  }
  .nav-cta .btn{min-height:50px}
  body.nav-open .callbar{display:none}   /* tranh che mat muc menu cuoi cung */
}

/* --- Sua do uu tien: .main-nav a manh hon .btn nen nut trong ngan menu bi doi mau --- */
.main-nav .nav-cta .btn{border-bottom:0;border-radius:var(--r-sm);justify-content:center;font-size:15.5px}
.main-nav .nav-cta .btn-primary{color:#fff;background:var(--b-600);border-color:var(--b-600)}
.main-nav .nav-cta .btn-primary:hover{background:var(--b-700);color:#fff}
.main-nav .nav-cta .btn-ghost{color:var(--n-800);background:#fff;border:1px solid var(--n-300)}

/* --- Gach chan menu tren may tinh: mot mau dac --- */
.main-nav > ul > li > a::after{background:var(--b-600)}

/* --- Hero: cot chu rong hon de tieu de bot xuong dong; hoa tiet cham nhat hon ---
   PHAI boc trong min-width:1024px. Neu de tran, quy tac nay viet sau se de len
   quy tac 1 cot cua dien thoai/may tinh bang -> hero bi bop thanh 2 cot tren dien thoai. */
@media (min-width:1024px){ .hero-grid{grid-template-columns:1.32fr 1fr;gap:48px} }
.hero::before{opacity:.3;background-size:26px 26px}
.hero h1 .hl{color:var(--b-600)}
.hero-kicker{background:#fffbeb;border-left-color:#d97706;color:var(--n-800);font-size:16.5px;font-weight:600}

/* ============ chq-stdband-v1 : dai van ban ap dung ============
   Theo mau "dai logo/chung nhan" ma Verkada, Axis, Base.vn, KiotViet deu dat
   ngay duoi hero. Day KHONG phai tuyen bo duoc chung nhan — chi neu ro cong viec
   duoc doi chieu theo van ban nao, de doanh nghiep kiem tra duoc. */
.std-band{
  background:var(--n-50);
  border-top:1px solid var(--n-200);border-bottom:1px solid var(--n-200);
  padding:var(--s6) 0;
}
.std-lead{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--n-500);margin:0 0 var(--s4);text-align:center;
}
.std-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);
}
.std-list li{
  margin:0;padding:var(--s3) var(--s4);
  background:#fff;border:1px solid var(--n-200);border-radius:var(--r-sm);
  display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:center;align-items:center;
  transition:border-color var(--chq-ease);
}
.std-list li:hover{border-color:var(--b-300)}
.std-list strong{font-size:15px;font-weight:700;color:var(--b-800);letter-spacing:-.01em;line-height:1.3}
.std-list span{font-size:12.5px;color:var(--n-500);line-height:1.45}
@media (max-width:1023.98px){ .std-list{grid-template-columns:repeat(3,1fr)} }
@media (max-width:639.98px){
  .std-band{padding:var(--s5) 0}
  .std-list{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .std-list li{padding:var(--s3)}
  .std-list strong{font-size:14px}
  .std-list span{font-size:11.5px}
}
@media (max-width:400px){ .std-list{grid-template-columns:1fr} }

/* ==========================================================================
   chq-v5 : DON KHOANG TRONG - GON BO CUC - THEM SUC SONG CHO MAU
   ========================================================================== */

/* ---------- 1. Xoa 173px trong giua hop xanh va hop hotline ----------
   Nguyen nhan: hai cot ep bang chieu cao nhau, hop hotline bi day xuong day.
   Cach sua: hai cot cung canh tren, khoi nao cao bao nhieu thi dung bay nhieu. */
.lead-wrap{align-items:start}
.lead-side{justify-content:flex-start}
.lead-hot{margin-top:var(--s8)!important}

/* ---------- 2. Bang tieu chi tren dien thoai: dong gon thay vi 15 the ----------
   Truoc: moi tieu chi la mot the co vien + hai nhan chu hoa lap lai 15 lan
   -> 230px/dong, tong 3.450px, nhin roi mat.
   Sau: dong gon co duong ke -> ~110px/dong, tiet kiem hon 1.800px. */
@media (max-width:639.98px){
  .spec.stack tbody tr{
    background:transparent!important;border:0;border-bottom:1px solid var(--n-200);
    border-radius:0;margin:0;padding:var(--s4) 0;
  }
  .spec.stack tbody tr:last-child{border-bottom:0}
  .spec.stack td{padding:0;border:0}
  .spec.stack td::before{display:none}          /* bo nhan lap lai */
  .spec.stack td:first-child{
    font-size:16px;font-weight:650;color:var(--n-900);
    padding:0;margin:0 0 var(--s1);border:0;line-height:1.35;
  }
  .spec.stack td:nth-child(2){font-size:15px;color:var(--n-600);line-height:1.55}
  .spec.stack td:nth-child(3){font-size:14px;margin-top:var(--s1);font-weight:600}
  .spec.stack tbody tr.grp{
    background:var(--b-50)!important;border:0;border-radius:var(--r-sm);
    padding:var(--s2) var(--s3);margin:var(--s5) 0 var(--s2);
  }
  .spec.stack .grp td:first-child{
    font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--b-700);margin:0;
  }
}

/* ---------- 3. Gon bo cuc tren dien thoai (trang chu dang cao 27.400px) ---------- */
@media (max-width:639.98px){
  .section{padding:44px 0}
  .section-sm{padding:34px 0}
  .section-head{margin-bottom:var(--s8)}
  .section-head p{font-size:16.5px}
  .wrap{padding:0 16px}
  .grid-2,.grid-3,.grid-4{gap:var(--s4)}
  .card{padding:var(--s5)}
  .callout{padding:var(--s4) var(--s5);margin:var(--s6) 0}
  .chq-key{padding:var(--s5)}
  .chq-toc{padding:var(--s5)}
  .entry-content h2{margin-top:var(--s10);margin-bottom:var(--s3)}
  .entry-content h3{margin-top:var(--s6);margin-bottom:var(--s2)}
  .entry-content p{margin-bottom:var(--s5)}
  .opt-cta{padding:var(--s6) var(--s5)}
  .lead-side,.lead-form{padding:var(--s6) var(--s5)}
  .hero{padding:32px 0 44px}
  .hero-visual{margin-top:var(--s5)}
  /* hinh minh hoa trong khoi noi dung: bam sat khung, bo vien thua */
  .callout img,.callout svg{margin:var(--s4) 0 0}
}
@media (max-width:400px){ .wrap{padding:0 14px} }

/* ---------- 4. Chu de doc hon tren dien thoai ----------
   Man hinh 390px khong the dat 50 ky tu/dong o co chu 17,5px.
   Ha nhe co chu + noi lai khoang de moi dong dai them ~5 ky tu,
   dong thoi giu toi thieu 16px theo yeu cau cua Google. */
@media (max-width:639.98px){
  .entry-content{font-size:16.5px;line-height:1.7}
  .card p,.callout,.chq-key p{font-size:16px;line-height:1.62}
  body{font-size:16.5px}
  p{text-wrap:pretty}
  h1,h2,h3,h4{text-wrap:balance}   /* tieu de khong con mot chu tro troi o dong cuoi */
}
h1,h2,h3,h4,.section-head h2{text-wrap:balance}

/* ---------- 5. Bieu tuong: bon mau theo y nghia, khong phai trang tri ----------
   Verkada, Genetec, Milestone deu dung mot bo mau nho co y nghia thay vi mot mau duy nhat.
   Xanh = ky thuat/tieu chuan · Cyan = ket noi/truyen du lieu
   Ho phach = thoi han/rui ro   · Xanh la = da dat/nghiem thu */
.grid-4 > *:nth-child(1) .card-ico{background:var(--b-600)}
.grid-4 > *:nth-child(2) .card-ico{background:#0d9488}
.grid-4 > *:nth-child(3) .card-ico{background:#0284c7}
.grid-4 > *:nth-child(4) .card-ico{background:#15803d}
.grid-3 > *:nth-child(1) .card-ico{background:var(--b-600)}
.grid-3 > *:nth-child(2) .card-ico{background:#0d9488}
.grid-3 > *:nth-child(3) .card-ico{background:#b45309}

/* ---------- 6. Dai thuong hieu tren dien thoai: 2 cot gon thay vi 23 o xep doc ----------
   Truoc: 1.594px cuon chi de xem ten hang. Sau: ~600px. */
@media (max-width:639.98px){
  .brands{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);
    margin:0 0 var(--s6);justify-content:stretch;
  }
  .brands li{
    min-width:0;padding:var(--s3) var(--s3);text-align:center;
    display:flex;flex-direction:column;justify-content:center;min-height:56px;
  }
  .brands .b-name{font-size:14.5px;line-height:1.3}
  .brands .b-sub{font-size:11px;margin-top:1px}
  .brands .b-hero{grid-column:1 / -1;min-height:62px}
  .brands-title{margin:0 0 var(--s3);font-size:11.5px}
  .brands-band .section-head p{display:none}   /* doan gioi thieu dai da noi o muc khac */
}

/* ---------- 7. Chan trang tren dien thoai: 2 cot ---------- */
@media (max-width:639.98px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s4)}
  .foot-grid > *:first-child{grid-column:1 / -1}
  .foot-grid h4{font-size:12px}
  .foot-grid li{font-size:14.5px}
  .site-footer{padding:44px 0 24px}
  .chq-disclaimer{padding:20px 0;font-size:13px}
}

/* ---------- 8. Nhip doc giua cac khoi: 96px -> 72px ----------
   Stripe, Vercel, Cloudflare, Datadog deu dung 64px. 96px lam trang loang,
   cuon nhieu ma khong them thong tin. */
.section{padding:72px 0}
.section-sm{padding:52px 0}
.section-head{margin-bottom:var(--s10)}

/* ---------- 9. Bieu mau: don lai cho gon, bot khoang trong doc ---------- */
.lead-form .fld{margin-bottom:var(--s3)}
.lead-form label{margin-bottom:var(--s1)}
.lead-form textarea{min-height:76px}
.lead-form .consent{margin-bottom:var(--s4)}
.lead-side .checkrow li,.lead-side ul li{margin-bottom:var(--s2)}

/* ---------- 10. Thanh tieu de: gon lai, chu thuong hieu chac hon ---------- */
.brand-mark{width:40px;height:40px}
.brand{gap:var(--s3)}
.brand-txt strong{font-size:18.5px;letter-spacing:-.025em;color:var(--b-950)}
.site-top.is-stuck .brand-mark{width:34px;height:34px}

/* ---------- 11. Nhan trang thai: dung mot bo mau co y nghia ---------- */
.badge{font-size:11px;padding:4px 10px;border-radius:var(--r-full)}
.badge-green{background:#ecfdf5;color:#15803d}
.badge-blue{background:var(--b-50);color:var(--b-700)}
.badge-amber{background:#fffbeb;color:#b45309}

/* ---------- 12. Dat lai cac quy tac dien thoai SAU cac quy tac chung ----------
   (Quy tac viet sau se thang neu do uu tien bang nhau — ke ca khi nam trong media query) */
@media (max-width:639.98px){
  .section{padding:44px 0}
  .section-sm{padding:34px 0}
  .section-head{margin-bottom:var(--s8)}
  .brand-mark{width:38px;height:38px}
  .brand-txt strong{font-size:17.5px}
}
@media (max-width:1023.98px) and (min-width:640px){
  .section{padding:56px 0}
  .section-sm{padding:40px 0}
}

/* ---------- 13. Doan van can giua tren dien thoai rat kho doc ----------
   Nielsen Norman Group: chu can giua qua 2 dong lam mat phai tim lai le trai
   moi dong. Giu tieu de can giua, tra doan van ve can trai. */
@media (max-width:639.98px){
  .section-head.center p,.section-head p{text-align:left}
  .section-head.center .eyebrow{justify-content:center}
  .calc-foot,.chk-or,.form-note,.lead-form + p{text-align:left}
}

/* ---------- 14. Tuyen bo mien tru: bot chu dam cho do nang mat ----------
   NN/g: chu in dam khong nen qua 30% luong chu. */
.chq-disclaimer strong{font-weight:600}
.chq-disclaimer .dis-lead{font-weight:500}
@media (max-width:639.98px){ .chq-disclaimer{font-size:12.5px;line-height:1.7} }

/* ==========================================================================
   chq-v6 : THANH DIEU HUONG + MAU CHU TOAN TRANG
   ========================================================================== */

/* ---------- 1. Bo cuc thanh dieu huong: logo - menu - (trong) - nut ----------
   Truoc: logo trai, menu bi day sang phai -> mot khoang trong lon giua logo va menu.
   Sau: menu dat ngay canh logo (dung cach Stripe, Verkada, Cloudflare lam),
   khoang trong don ve mot cho truoc nut hanh dong -> doc nhu mot khoi lien mach. */
@media (min-width:1024px){
  .main-nav{margin-left:var(--s8);margin-right:auto}
  .header-cta{margin-left:var(--s5)}
}

/* ---------- 2. Muc dang xem: bo o nen bo tron, chi giu gach chan ----------
   Hai tin hieu chong nhau (o nen + gach chan) lam menu trong nhu nut bi ket. */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a{
  background:transparent;color:var(--b-700);font-weight:600;
}
.main-nav a:hover{background:transparent;color:var(--b-600)}
.main-nav > ul > li > a{color:var(--n-700)}
.main-nav > ul > li > a::after{bottom:10px;height:2.5px;left:9px;right:9px}

/* muc co menu con: them dau nhon nho de biet co the mo ra */
@media (min-width:1024px){
  .main-nav > ul > li.menu-item-has-children > a{padding-right:20px;position:relative}
  .main-nav > ul > li.menu-item-has-children > a::before{
    content:"";position:absolute;right:7px;top:50%;width:5px;height:5px;
    border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:translateY(-70%) rotate(45deg);opacity:.55;
    transition:transform var(--chq-ease),opacity var(--chq-ease);
  }
  .main-nav > ul > li.menu-item-has-children:hover > a::before{opacity:1;transform:translateY(-30%) rotate(225deg)}
  .main-nav ul ul{border-radius:var(--r-md);padding:var(--s2);box-shadow:var(--sh-lg);border-color:var(--n-200)}
  .main-nav ul ul a{border-radius:var(--r-sm);color:var(--n-700)}
  .main-nav ul ul a:hover{background:var(--b-50);color:var(--b-700)}
}

/* ---------- 3. Bot khoang trang tren dau hero ---------- */
.hero{padding:44px 0 60px}
@media (max-width:1023.98px){ .hero{padding:36px 0 48px} }
@media (max-width:639.98px){ .hero{padding:28px 0 40px} }
.page-hero{padding-top:34px;padding-bottom:34px}
@media (max-width:639.98px){ .page-hero{padding-top:24px;padding-bottom:26px} }

/* ---------- 4. Them mau cho chu o moi trang (co chung muc, khong loe loet) ---------- */

/* 4a. Tieu de muc trong bai co vach mau ben trai — chuan cua trang tai lieu ky thuat */
.entry-content > h2{
  position:relative;padding-left:var(--s5);
}
.entry-content > h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:2px;
  background:var(--b-600);
}
.entry-content > h3{color:var(--b-900)}

/* 4b. Chu in dam trong bai dam mau navy thay vi den — de doc va co chieu sau */
.entry-content strong,.callout strong,.chq-key strong{color:var(--b-950)}

/* 4c. Nhan chu hoa nho theo mau cua tung khoi */
.section-soft .eyebrow{color:var(--b-700)}
.section-wash .eyebrow{color:#0e7490}
.section-wash .eyebrow::before{background:#0e7490}

/* 4d. So lieu, don vi ky thuat trong bai: vien + nen nhat cho noi bat */
.entry-content .num,.spec .num{
  background:var(--b-50);border:1px solid var(--b-200);color:var(--b-800);
  border-radius:var(--r-xs);padding:1px 7px;font-weight:650;font-size:.94em;
  white-space:nowrap;
}

/* 4e. Lien ket trong bai: gach chan mo, dam len khi ro chuot */
.entry-content p a,.callout a,.chq-key a{
  color:var(--b-700);text-decoration:underline;
  text-decoration-color:var(--b-300);text-underline-offset:3px;text-decoration-thickness:1.5px;
}
.entry-content p a:hover,.callout a:hover{text-decoration-color:var(--b-600);color:var(--b-800)}

/* 4f. Danh sach co dau tick: dau tick mau xanh la, chu dam hon o cum dau */
.checkrow li::before{color:#16a34a}

/* ---------- 5. LUOI THE TRONG BAI VIET: nguyen nhan that cua "ruong bac thang" ----------
   Cot bai viet chi rong 720px. Luoi 3 the -> moi the 224px, tru dem con 176px chu
   -> khoang 20 ky tu moi dong, doan 10 dong. Doc nhu bac thang.
   Cach sua: dung auto-fit minmax(280px) — luoi tu chon so cot sao cho moi the
   luon du rong de doc, o BAT KY be rong nao cua cot bai. */
.entry-content .grid-2,
.entry-content .grid-3,
.entry-content .grid-4{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.entry-content .card{padding:var(--s5)}
.entry-content .card p{font-size:15.5px;line-height:1.6}

/* Luoi the o trang chu GIU so cot co dinh (4 / 2 / 1). Neu dung auto-fit o day
   thi o 1024px se ra 3 cot -> the thu tu bi lac mot minh mot hang. */
@media (min-width:1024px){ .grid-4{grid-template-columns:repeat(4,1fr)} }
@media (min-width:640px) and (max-width:1023.98px){ .grid-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:639.98px){ .grid-4{grid-template-columns:1fr} }

/* ---------- 6. Luoi the dich vu: 2x2 thay vi 4 cot ----------
   4 cot -> moi the 291px, tru dem con 243px chu = 23 ky tu moi dong.
   Moi cau deu vo thanh 4-5 dong ngan -> dung la "ruong bac thang".
   2 cot -> the 606px, chu 558px = ~68 ky tu, va hinh minh hoa cung du lon de nhin. */
.svc-grid{gap:var(--s6)}
@media (max-width:767.98px){ .svc-grid{grid-template-columns:1fr} }
.svc-body{padding:var(--s6)}
.svc-body p{font-size:15.5px;line-height:1.6}

/* ---------- 7. Hinh minh hoa trong the dich vu: cat bot troi trong ----------
   The rong 606px voi ti le 16/9 -> hinh cao 341px, phan lon la nen nhat trong khong.
   Ha ve 5/2 (cat deu tren duoi) -> hinh con 242px, the chac hon, bot khoang trong. */
.svc-grid .svc-shot{aspect-ratio:5/2}
@media (max-width:767.98px){ .svc-grid .svc-shot{aspect-ratio:16/9} }

/* ---------- 8. Nhan trang thai bi keo het chieu ngang the ----------
   .svc-body la flex cot -> con mac dinh bi keo gian het be ngang.
   Nhan phai om sat noi dung. */
.badge{align-self:flex-start;width:-moz-fit-content;width:fit-content}

/* ==========================================================================
   chq-v7 : SUA TUONG PHAN MAU + CAN BIEU TUONG VOI CHU
   Do bang cong thuc WCAG tren 428 phan tu chu cua trang that.
   ========================================================================== */

/* ---------- 1. MAU CHU PHU KHONG DAT CHUAN (loi nang nhat) ----------
   #667c93 tren nen trang chi dat 4,31:1 — duoi nguong 4,5:1 cua WCAG 2.1 AA.
   Tren nen xam nhat con 4,08:1, tren nen xanh nhat con 3,96:1.
   Anh huong 93 phan tu chu tren trang chu.
   #566b84 dat 5,48 / 5,19 / 5,04 — du bien an toan tren ca ba nen. */
:root{ --n-500:#566b84; }

/* ---------- 2. Dia chi o chan trang: trang 45% tren navy chi dat 4,21:1 ---------- */
.fb-addr{color:rgba(255,255,255,.58)}          /* -> 5,9:1 */
.chq-disclaimer{color:rgba(255,255,255,.80)}
.site-footer{color:rgba(255,255,255,.82)}

/* ---------- 3. CAN BIEU TUONG THEO DONG CHU ----------
   Truoc: dat cung `top: 12px`. Dung o co chu 17,5px nhung lech khi co chu doi
   (dien thoai 16,5px) va lech 1,4px ngay o may tinh.
   Sau: tinh theo `em` — tam dau luon trung tam dong chu du co chu bao nhieu.
   Cong thuc: top = (gian-dong / 2)em - (nua chieu cao dau). */
.entry-content > ul:not(.checkrow) > li::before{ top:calc(0.85em - 3px) }
.entry-content > ol > li::before{ top:calc(0.85em - 13px) }
.chq-key li::before{ top:calc(0.84em - 3.5px) }

/* ---------- 4. Danh sach dau tick trong bai bi bien thanh cham tron ----------
   `.entry-content > ul > li::before` co do uu tien cao hon `.checkrow li::before`
   nen dau tick xanh la bi thay bang cham tron xanh duong. */
.entry-content > ul.checkrow{list-style:none;padding-left:0}
.entry-content > ul.checkrow > li{padding-left:27px}
.entry-content > ul.checkrow > li::before{
  content:"✓";position:absolute;left:0;top:0;
  width:auto;height:auto;background:none;border-radius:0;
  color:#16a34a;font-weight:800;line-height:inherit;
}

/* ---------- 5. BIEU TUONG VA TIEU DE TREN CUNG MOT DONG ----------
   Truoc: bieu tuong 44px nam mot minh mot hang, tieu de xuong hang duoi
   -> the cao them ~60px va mat lien ket thi giac giua bieu tuong va ten muc.
   Sau: bieu tuong va tieu de nam cung hang (cach Stripe, Linear, Vercel dung). */
.card:has(.card-ico){
  display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--s4);align-items:center;align-content:start;
}
.card:has(.card-ico) .card-ico{grid-column:1;grid-row:1;margin-bottom:0}
.card:has(.card-ico) > h3{grid-column:2;grid-row:1;margin-bottom:0}
.card:has(.card-ico) > p,
.card:has(.card-ico) > ul,
.card:has(.card-ico) > .card-link{grid-column:1 / -1}
.card:has(.card-ico) > p{margin-top:var(--s4)}
.card-ico{width:42px;height:42px;border-radius:10px}
.card-ico svg{width:21px;height:21px}

/* ==========================================================================
   chq-v8 — SOAT MAU + CAN HANG (23-08-2026)
   Do do truc tiep tren ban chay that (461 phan tu trang chu, 20 trang con).
   ========================================================================== */

/* ---------- 1. LOI NANG: nut CTA trong bai viet co chu xanh tren nen xanh ----
   `.entry-content p a` (0,2,1) dat color:var(--b-700) — do uu tien cao hon
   `.btn-primary` (0,1,0) nen chu cua nut bi doi tu trang sang #0857a8.
   Ket qua do tren nen #0a6ed1: ti le tuong phan 1,42:1 (chuan AA can 4,5:1)
   — chu gan nhu tang hinh. Loi nay co o 6/20 trang con.
   Cach sua: khai bao lai mau + bo gach chan cho MOI the a.btn nam trong bai. */
.entry-content a.btn,
.callout a.btn,
.chq-key a.btn{
  text-decoration:none;
  color:var(--n-800);
}
.entry-content a.btn.btn-primary,
.callout a.btn.btn-primary,
.chq-key a.btn.btn-primary,
.entry-content a.btn.btn-primary:hover,
.callout a.btn.btn-primary:hover,
.chq-key a.btn.btn-primary:hover{
  color:#fff;                      /* #fff tren #0a6ed1 = 4,58:1 — dat AA */
  text-decoration:none;
}
.entry-content a.btn.btn-ghost,
.callout a.btn.btn-ghost,
.chq-key a.btn.btn-ghost{
  color:var(--n-800);
}
.entry-content a.btn.btn-ghost:hover,
.callout a.btn.btn-ghost:hover,
.chq-key a.btn.btn-ghost:hover{
  color:var(--b-700);
}

/* ---------- 2. So thu tu trong danh sach lech 3,8px so voi tam dong chu -----
   `.entry-content > ol > li::before` co font-size:13px RIENG, nen don vi `em`
   trong `top:calc(0.85em - 13px)` quy ve 13px chu KHONG phai 17,5px cua the li
   -> top = -1,95px thay vi 1,875px.
   Vong tron cao 26px, dong chu cao 1,7 x font-size, nen tam dung phai la:
     may tinh: (17,5 x 1,7 - 26) / 2 = 1,9px
     dien thoai: (16,5 x 1,7 - 26) / 2 = 1,0px
   Khong dung `em` duoc o day — phai ghi thang theo tung diem ngat. */
.entry-content > ol > li::before{ top:1.9px }
@media (max-width:639.98px){
  .entry-content > ol > li::before{ top:1px }
}

/* ---------- 3. LOI NANG: chu dam tren nen toi bi doi thanh mau navy ---------
   Quy tac v6 `.entry-content strong{color:var(--b-950)}` co do uu tien (0,1,1)
   BANG voi cac quy tac co san `.calc-detail strong`, `.calc-note strong`...
   nhung nam SAU trong file nen thang. Hau qua tren trang tinh dung luong:
     "32 Mbps" / "0,66 TB" / "8 o x 16 TB"  -> #0b2545 tren nen #0b2545 = 1,00:1
     (chu trung mau nen — nguoi dung KHONG doc duoc ket qua may tinh)
     "Luu y:" -> 1,32:1
   Khai bao lai o cuoi file de tra lai mau dung cho moi be mat toi. */
.calc-detail strong{color:#fff}
.calc-note strong{color:#ffdca5}
.chq-disclaimer strong{color:rgba(255,255,255,.92)}
.site-footer strong{color:#fff}
.chq-demo strong{color:#7a4d05}
.std-list strong{color:var(--b-800)}

/* ---------- 4. Chu phu trong khung ket qua may tinh (nen chuyen sac) --------
   `.calc-out` dung gradient toi goc sang nhat la ~#0d5ba8.
   Chu rgba(255,255,255,.68) tren goc do chi dat 4,14:1 — thieu chuan AA.
   Nang len .82 -> 5,1:1 o goc sang nhat, 6,9:1 o goc toi nhat. */
.calc-detail span{color:rgba(255,255,255,.82)}
.calc-out{color:rgba(255,255,255,.90)}

/* ---------- 5. Chu tren dai CTA nen chuyen sac xanh -------------------------
   Bo do tuong phan cu chi kiem tra mau nen DAC (backgroundColor). Voi nen
   linear-gradient no bo qua — nen loi nay an suot tu dau.
   Bo do moi tach tung diem dung mau cua gradient va lay TRUONG HOP XAU NHAT.
   `.cta-band` chuyen tu #0857a8 -> #0a6ed1; chu rgba(255,255,255,.86) tren
   diem sang nhat #0a6ed1 chi dat 4,15:1 (chuan AA can 4,5:1).
   Nang len .95 -> 4,71:1 o diem sang nhat, 5,9:1 o diem toi nhat. */
.cta-band p{color:rgba(255,255,255,.95)}

/* ==========================================================================
   chq-v9 — SO + CHU CHUNG MOT DONG · BO KHOANG TRONG · NUT GOI DIEN MAU AM
   23-08-2026. Moi con so trong khoi nay deu do that tren ban chay.
   ========================================================================== */

/* ---------- 1. LOI: nhan "NGHIEM NGAT NHAT" BI CAT MAT NUA TREN -----------
   `.term-ribbon` dat `top:-13px` (co y de nhan de len vien the), nhung the lai
   co `overflow:hidden` (thua ke tu nhom .card) -> phan tren nhan bi cat cut.
   Do that: dinh nhan o -11px so voi dinh the -> mat 11/30px chieu cao chu. */
.term-card{overflow:visible}

/* ---------- 2. SO VA CHU VE CHUNG MOT DONG ---------------------------------
   Truoc: "12" chiem tron mot dong 54px, "thang — DNCX / EPE" xuong dong duoi.
   Hai dong nay chi noi MOT y -> tach ra la tao khoang trong vo nghia.
   Nay dung luoi 2 cot, canh theo DUONG CHAN CHU (baseline) de so va chu
   dung chung mot duong, dung "so lo lung" nhu canh giua hay canh dinh. */
.term-card{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:var(--s3);
  align-content:start;
  padding:26px 24px;
}
.term-num{
  grid-column:1;grid-row:1;
  align-self:baseline;
  margin-bottom:0;
  font-size:clamp(34px,3.4vw,46px);
}
.term-card > h3{
  grid-column:2;grid-row:1;
  align-self:baseline;
  margin-bottom:0;
  font-size:18px;line-height:1.3;
  text-wrap:balance;
}
.term-card > ul,
.term-card > .src{grid-column:1 / -1}
.term-card > ul{margin-top:var(--s4);margin-bottom:0}
.term-card .src{margin-top:var(--s4);padding-top:var(--s3)}

/* ---------- 3. NUT GOI DIEN: DOI SANG MAU AM (HO PHACH) --------------------
   Nghien cuu (CXL tong hop cac thu nghiem A/B) ket luan: KHONG co mau nut nao
   "tot nhat" tuyet doi — cai quyet dinh la nut co TACH KHOI moi thu quanh no
   hay khong (hieu ung co lap Von Restorff). Nut trang cu nam tren nen xanh
   dam, cung mau voi chu tieu de va so hotline ngay ben tren -> khong tach.
   Ho phach #f5a524 la mau DUY NHAT trong bang mau cua site khong thuoc ho
   xanh, nen no tach manh nhat ma van khong pha he mau.
   Do: chu navy #0b2545 tren ho phach #f5a524 = 7,54:1 (chuan AA can 4,5:1). */
.btn-call{
  background:var(--chq-amber);
  color:var(--b-950);
  font-weight:700;
  border:1px solid #b8760a;          /* 3,73:1 voi nen trang — dat WCAG 1.4.11 */
  box-shadow:0 6px 16px rgba(245,165,36,.30);
}
.btn-call:hover{
  background:#ffb63f;
  color:var(--b-950);
  border-color:#a86b09;
  box-shadow:0 10px 22px rgba(245,165,36,.38);
}
/* Tren be mat toi, vien nau khong con tach duoc -> doi sang vong sang trang.
   rgba(255,255,255,.85) tren diem sang nhat cua dai = 4,09:1 (WCAG 1.4.11 can 3:1),
   tren nen navy #0b2545 = 11,42:1. */
.side-hot .btn-call,
.cta-band .btn-call,
.opt-cta .btn-call,
.lead-side .btn-call{
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.85), 0 8px 18px rgba(0,0,0,.22);
}
.side-hot .btn-call:hover,
.cta-band .btn-call:hover,
.opt-cta .btn-call:hover,
.lead-side .btn-call:hover{
  box-shadow:0 0 0 1px #fff, 0 12px 24px rgba(0,0,0,.28);
}

/* Bieu tuong dien thoai NAM CHUNG MOT DONG voi chu.
   `.btn` von la inline-flex co gap:8px, nen ::before tu dong thanh mot o cua
   hang -> khong can canh chinh thu cong, khong bao gio lech dong. */
.btn-call::before{
  content:"";
  width:18px;height:18px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.03-.25 1.12.37 2.33.57 3.56.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.44.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.03-.25 1.12.37 2.33.57 3.56.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.44.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Thanh goi co dinh duoi day man dien thoai — nut goi cung doi sang ho phach */
.callbar .c1{background:var(--chq-amber);color:var(--b-950);font-weight:700}

/* ---------- 4. HOP HOTLINE BEN PHAI: siet lai khoang trong -----------------
   Do that hop cu: dem tren 26 + 25 + 6 + 43 + 14 + 48 + 16 + 48 + dem duoi 26
   = 252px, trong do 6/9 khoang la khoang trong.
   Nay: bieu tuong + tieu de chung mot dong, so hotline lam diem neo. */
.side-hot{padding:22px 20px;text-align:left}
.side-hot h4{
  display:flex;align-items:center;gap:8px;
  margin-bottom:2px;font-size:15px;font-weight:600;
  color:rgba(255,255,255,.80);
  text-transform:uppercase;letter-spacing:.06em;
}
.side-hot h4::before{
  content:"";width:15px;height:15px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.03-.25 1.12.37 2.33.57 3.56.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.44.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.03-.25 1.12.37 2.33.57 3.56.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.44.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.side-hot a.hot{
  display:block;margin-bottom:6px;
  font-size:29px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
}
.side-hot p{
  font-size:14px;line-height:1.5;margin-bottom:14px;
  color:rgba(255,255,255,.82);        /* .78 -> .82 de chac chan dat AA */
}

/* ---------- 5. Luoi the "bao nhieu thang": so cot theo BE RONG CHU THAT -----
   Do that voi luoi 3 cot: o 768px moi the chi con 177px, tru cho so va dem
   thi chu tieu de chi con 116px — khoang 13 ky tu moi dong, dung kieu
   "ruong bac thang". Chon so cot theo be rong con lai cho CHU, khong theo
   thoi quen "cu 3 the thi 3 cot":
     >=1200px  3 cot  -> chu rong ~262px (~29 ky tu/dong)
     768-1199  2 cot  -> chu rong ~244-430px
     <768      1 cot  -> chu rong het khung */
@media (max-width:1199.98px){
  .grid-3:has(.term-card){grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767.98px){
  .grid-3:has(.term-card){grid-template-columns:1fr}
}
/* Le hang: 3 the trong luoi 2 cot -> the cuoi tro thanh o trong nua hang.
   Cho the cuoi (khi so the la LE) trai het chieu ngang, khong de o trong. */
@media (max-width:1199.98px) and (min-width:768px){
  .grid-3:has(.term-card) > :last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---------- 6. Bot khoang trong doc con lai ---------------------------------
   Do bang gap.py (bat moi khoang doc > 56px giua hai khoi anh em):
     390px  .hero-grid  chu <-> hinh minh hoa = 60px  -> 32px
   Tren dien thoai, khoang 60px lam nguoi doc tuong da het phan noi dung. */
@media (max-width:1023.98px){
  .hero-grid{gap:32px}
  .entry-grid{gap:32px}
}

/* ---------- 7. Nut goi dien tren NEN SANG (dau trang con, ngan keo menu) ----
   O day nut xanh "Nhan khao sat mien phi" moi la hanh dong chinh, nen nut goi
   khong duoc to mau dac keo bang — neu hai nut cung to thi khong con nut nao
   noi bat (nguyen tac: moi khung nhin chi mot hanh dong chinh).
   Dung ban NHAT cua ho phach: van la mau am, van co bieu tuong dien thoai,
   nhung nhe do hon nut chinh.
   Do: chu #6b4304 tren nen #fef4e3 = 7,93:1 · vien #b8760a tren trang = 3,73:1 */
.btn-call-lite{
  background:var(--chq-amber-bg);
  color:#6b4304;
  border:1px solid #b8760a;
  font-weight:700;
}
.btn-call-lite:hover{
  background:#fdeccb;
  border-color:#8a5d05;
  color:#5f3c04;
}
.btn-call-lite::before{
  content:"";width:17px;height:17px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.03-.25 1.12.37 2.33.57 3.56.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.44.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.03-.25 1.12.37 2.33.57 3.56.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.44.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Trong ngan keo menu, `.main-nav a{...}` co do uu tien cao hon nen de len mau
   cua nut. Khai bao lai dung o day (bay CSS quen thuoc — xem quy tac 4). */
.main-nav .nav-cta .btn-call-lite{
  color:#6b4304;background:var(--chq-amber-bg);
  border:1px solid #b8760a;border-bottom:1px solid #b8760a;
}
.main-nav .nav-cta .btn-call-lite:hover{color:#5f3c04;background:#fdeccb;border-color:#8a5d05}
.main-nav .nav-cta .btn-call{color:var(--b-950);background:var(--chq-amber);border-color:#b8760a}

/* ==========================================================================
   chq-v10 — MOT LE PHAI DUY NHAT · CHU TRAN DEU · MENU THA XUONG SIET LAI
   23-08-2026. Do that tren ban chay, khong uoc luong.
   ========================================================================== */

/* ---------- 1. LOI GOC: BA LE PHAI KHAC NHAU TRONG CUNG MOT COT BAI --------
   Do that o 1265px, cot bai viet rong 720px:
     h2 / h3 / hop / bang / luoi the  -> le phai o  742px
     doan van / danh sach             -> le phai o  652px   (lech  90px)
     dong "Cap nhat gan nhat"         -> le phai o  508px   (lech 234px)
   Ba muc thut vao khac nhau lam khoi bai viet co canh phai lom chom — day moi
   la cai anh nhin thay la "chu khong nam gon trong o", chu khong phai loi font.

   Nguyen nhan: `.entry-content>p{max-width:36em}` dat gioi han do dai dong LEN
   TUNG THE, trong khi tieu de va cac hop khong co gioi han do.
   `36em` cua doan van 17,5px = 630px; cua dong meta 13,5px = 486px — cung mot
   khai bao ra hai chieu rong khac nhau.

   Cach sua dung: dat do dai dong MOT LAN o CONTAINER, roi bo gioi han rieng le.
   Do lai: 720px voi chu 17,5px = 71 ky tu moi dong — nam trong khoang chuan
   50-75 ky tu (Baymard). Truoc do 630px = 62 ky tu, cung dat, nhung phai tra
   gia bang mot dai trong 90px va mot canh phai lom chom. */
.entry-content{max-width:min(100%, 720px)}
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > .chq-updated{max-width:none}

/* ---------- 2. CHU TRAN DEU HAI BEN --------------------------------------
   Tieng Viet la ngon ngu don am, tu ngan (3-4 ky tu), nen khi dan deu hai ben
   cac khe trang chia rat min — khong bi "song trang" nhu tieng Anh.
   Chi dan deu khi dong DU DAI: duoi 640px moi dong chi con ~32 ky tu, dan deu
   se tao khe rong xau. Nen dien thoai giu le phai tu nhien. */
/* (v10 dan deu cung o >=640px — v11 thay bang dan deu CO DIEU KIEN, xem cuoi file) */

/* ---------- 3. MENU THA XUONG: cac muc cach nhau qua xa -------------------
   Do that: moi muc cao 44px cho chu 14,5px -> ty le chu/khoang trong qua thap,
   danh sach 5 muc cao 238px trong khi chu chi chiem 5 x 24 = 120px.
   44px la nguong AAA cho VUNG CHAM (WCAG 2.5.5) — dung cho ngon tay. Menu tha
   xuong nay CHI hien tu 1024px tro len, tuc la chi dung bang chuot; chuan AA
   (WCAG 2.5.8) cho truong hop nay la 24px. Cac he thong lon (Stripe, Linear,
   Vercel) deu dung 34-38px cho hang menu tha xuong tren may tinh.
   Dat 38px: van gap ruoi nguong AA, danh sach ngan lai 24%.
   Ngan keo menu tren dien thoai KHONG doi — van giu 56px / 46px. */
@media (min-width:1024px){
  .main-nav ul ul{min-width:212px;padding:var(--s2) 6px;gap:0}
  .main-nav ul ul a{min-height:38px;padding:0 10px;font-size:14.5px}
}

/* ==========================================================================
   chq-v11 — DAN DEU CO DIEU KIEN (chong "ruong bac thang")
   23-08-2026.
   Do that tren bai that o 360-414px: neu dan deu TAT CA thi he so gian khe
   chu trung binh 1,8x, co dong len toi 6,3x — thung mot lo trang giua dong.
   Nen khong dung CSS thuan. Mot doan script nho do TUNG KHOI CHU, uoc luong
   he so gian, va chi dan deu khoi nao gian duoi nguong. Khoi vuot nguong giu
   le phai tu nhien — thua le so le con hon thung lo.
   ========================================================================== */
.chq-just{
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;            /* tieng Viet khong gach noi tu */
}
/* Dong cuoi, nhan ngan, dong meta: luon canh trai */
.chq-key .k-label,
.chq-updated,
.entry-content > h2,
.entry-content > h3{text-align:left}

/* ==========================================================================
   chq-v12 — BA KHOI CHO DU LIEU CUA ANH HIEP (23-08-2026)
   Dung san de khi co so lieu that la dan vao duoc ngay, khong phai dung lai
   tu dau. CHUA gan vao trang nao — xem HUONG_DAN_GAN_KHOI.md.
   Nghien cuu: hang bon con so la thanh phan re nhat ma hieu qua nhat tren mot
   trang ban hang (Axis, Stripe, Cloudflare, Base.vn deu co). Voi nganh tuan
   thu phap ly, huy hieu chung nhan la khoi quan trong nhat trang.
   ========================================================================== */

/* --- 1. Hang bon con so --------------------------------------------------- */
.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);
  padding:var(--s8) 0;border-top:1px solid var(--n-200);border-bottom:1px solid var(--n-200);
}
.stat-row .st{text-align:center}
.stat-row .st b{
  display:block;font-size:clamp(28px,3.4vw,40px);font-weight:700;
  color:var(--b-600);letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.stat-row .st span{
  display:block;margin-top:var(--s2);font-size:14.5px;line-height:1.4;
  color:var(--n-600);
}
@media (max-width:767.98px){
  .stat-row{grid-template-columns:repeat(2,1fr);gap:var(--s5);padding:var(--s6) 0}
}

/* --- 2. Loi chung thuc khach hang ---------------------------------------- */
/* Mau Milestone: MOT ket qua do duoc + ten + chuc danh + cong ty.
   Khong dung loi khen chung chung — "dich vu tot" khong thuyet phuc ai. */
.chq-quote{
  border-left:4px solid var(--b-600);background:var(--b-50);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s6) var(--s6) var(--s6) var(--s5);
  margin:var(--s8) 0;
}
.chq-quote p{
  margin:0 0 var(--s4);font-size:18px;line-height:1.55;
  color:var(--b-950);font-weight:500;
}
.chq-quote .who{
  display:flex;align-items:center;gap:var(--s3);
  font-size:14.5px;color:var(--n-600);margin:0;font-weight:400;
}
.chq-quote .who b{color:var(--n-900);font-weight:650}
.chq-quote .who::before{
  content:"";width:36px;height:2px;background:var(--b-300);flex:none;
}

/* --- 3. Hang huy hieu chung nhan ----------------------------------------- */
.cert-row{
  display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:center;margin:var(--s6) 0;padding:0;list-style:none;
}
.cert-row li{
  display:flex;align-items:center;gap:var(--s2);
  border:1px solid var(--n-200);border-radius:var(--r-full);
  padding:7px 14px;font-size:14px;font-weight:600;color:var(--n-700);
  background:var(--n-0);
}
.cert-row li::before{
  content:"";width:15px;height:15px;flex:none;background:#16a34a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   chq-v13 — SO TRONG THE + NGAN KEO MENU CHUYEN NGHIEP (23-08-2026)
   ========================================================================== */

/* ---------- 1. LOI: so thu tu trong the KHONG cung hang voi tieu de --------
   Trong bai co HAI bien the khoi bieu tuong: `.card-ico` (da sua o ban v7)
   va `.ico` — bien the thu hai nay KHONG CO MOT DONG CSS NAO trong ca file,
   nen no chi la mot chu so tran, nam mot minh mot dong tren tieu de.
   Do that: 7/7 the o trang DNCX, 3/3 o kho ngoai quan, dia diem kiem tra,
   cua hang mien thue — KHONG the nao dung hang.
   Bai hoc: sua theo TEN CLASS thi bao gio cung sot bien the. */
.card > .ico{
  width:28px;height:28px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--b-50);border:1px solid var(--b-200);color:var(--b-700);
  font-size:13.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.card:has(> .ico){
  display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--s3);align-items:center;align-content:start;
}
.card:has(> .ico) > .ico{grid-column:1;grid-row:1}
.card:has(> .ico) > h3{grid-column:2;grid-row:1;margin-bottom:0}
.card:has(> .ico) > p,
.card:has(> .ico) > ul,
.card:has(> .ico) > .card-link{grid-column:1 / -1}
.card:has(> .ico) > p{margin-top:var(--s4)}

/* ---------- 2. NGAN KEO MENU TREN DIEN THOAI — dung lai cho chuyen nghiep --
   Cai sai cua ban cu:
   (a) Muc cap 1 va muc con nhin gan giong nhau -> khong co thu bac.
   (b) Nhom muc con chi thut vao kem mot vach doc mo -> trong nhu bi loi,
       khong ra mot nhom.
   (c) Muc cha cua trang dang xem cung to xanh -> hai cho xanh cung luc,
       nguoi doc khong biet minh dang o dau.
   (d) Hai nut keu goi hanh dong nam tan duoi cung, phai cuon het menu moi
       thay -> mat tac dung.
   Chuan tham chieu: vung cham >=48px (WCAG 2.5.5), chuyen canh <300ms,
   nhom co nhan ro rang, chi MOT muc duoc danh dau dang xem. */
@media (max-width:1023.98px){

  .main-nav{
    padding:var(--s3) 0 0;
    display:flex;flex-direction:column;
  }
  .main-nav > ul{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
  .main-nav > ul > li{padding:0 var(--s4)}
  .main-nav > ul > li + li{border-top:0}          /* bo vien ke tung dong */

  /* Muc cap 1 — hang day du, co mui ten chi huong */
  .main-nav > ul > li > a{
    position:relative;
    min-height:52px;padding:0 var(--s8) 0 var(--s3);
    font-size:16.5px;font-weight:600;color:var(--n-900);
    border-radius:var(--r-sm);
  }
  .main-nav > ul > li > a::before{
    content:"";position:absolute;right:var(--s4);top:50%;
    width:7px;height:7px;
    border-right:2px solid var(--n-400);border-bottom:2px solid var(--n-400);
    transform:translateY(-60%) rotate(-45deg);
  }

  /* Nhom muc con — mot khoi nen nhat co bo goc, ra dang MOT NHOM */
  .main-nav ul ul{
    display:block;
    margin:var(--s1) 0 var(--s3);
    padding:var(--s2) var(--s2) var(--s2) var(--s3);
    border:0;border-left:0;
    background:var(--n-50);
    border-radius:var(--r-md);
  }
  .main-nav ul ul a{
    min-height:48px;padding:0 var(--s3);
    font-size:15.5px;font-weight:500;color:var(--n-700);
    border-radius:var(--r-sm);
  }

  /* Vach ngan giua cac nhom cap 1 — mo hon vien cu, chi de tach nhom */
  .main-nav > ul > li.menu-item-has-children{
    padding-bottom:var(--s2);
    border-bottom:1px solid var(--n-100);
    margin-bottom:var(--s2);
  }

  /* CHI MOT muc duoc danh dau dang xem. Muc CHA khong to mau nua. */
  .main-nav .current-menu-item > a,
  .main-nav .current_page_item > a,
  .main-nav [aria-current="page"]{
    background:var(--b-50);color:var(--b-700);font-weight:650;
    box-shadow:inset 3px 0 0 var(--b-600);
  }
  .main-nav .current-menu-ancestor > a,
  .main-nav .current-menu-parent > a{
    background:transparent;box-shadow:none;color:var(--n-900);font-weight:600;
  }
  .main-nav .current-menu-item > a::before,
  .main-nav .current_page_item > a::before{
    border-color:var(--b-600);
  }
  .main-nav a:active{background:var(--n-100)}

  /* Hai nut keu goi hanh dong GHIM day ngan keo — luon nhin thay */
  .main-nav .nav-cta{
    position:sticky;bottom:0;
    margin-top:auto;
    padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid var(--n-200);
    box-shadow:0 -8px 20px -12px rgb(16 24 40 / .18);
    display:grid;gap:var(--s2);
  }
}

/* ==========================================================================
   chq-v14 — LAM DIU KHOI MIEN TRU + HANG SO LIEU GON (23-08-2026)
   ========================================================================== */

/* ---------- 1. Khoi mien tru trach nhiem: bot nang, KHONG bot doc duoc -----
   Anh Hiep: "bo tri gon gang, khong can noi bat qua".
   Cai lam khoi nay nang khong phai co chu (13,5px da nho) ma la:
     - gan nhu ca doan dau in dam 600
     - cham ho phach co vong sang bao quanh
     - gian dong 1,75 + 4 doan cach nhau rong
   Nen giam DO DAM va DO CHOI, giu nguyen co chu va do tuong phan.
   ⚠ KHONG ha co chu xuong duoi 13px va KHONG ha do mo duoi 0,80:
   khoi nay ton tai de giam rui ro phap ly (tuyen bo khong phai co quan nha
   nuoc). Mot tuyen bo mien tru ma nguoi doc khong thay thi mat tac dung. */
.chq-disclaimer{
  padding:20px 0;
  line-height:1.62;
  color:rgba(255,255,255,.80);          /* 10,7:1 tren nen navy — giu nguyen */
}
.chq-disclaimer p{margin-bottom:.62em}
.chq-disclaimer strong,
.chq-disclaimer .dis-lead{
  font-weight:500;                       /* 600 -> 500: bot cam giac het chu deu dam */
  color:rgba(255,255,255,.86);
}
.chq-disclaimer h5{
  font-size:11.5px;margin-bottom:8px;
  color:rgba(255,255,255,.62);           /* 6,3:1 — nhan phu, khong phai tieu de chinh */
  font-weight:600;
}
.chq-disclaimer h5::before{
  width:6px;height:6px;
  background:rgba(255,255,255,.38);      /* bo cham ho phach + vong sang */
  box-shadow:none;
}

/* ---------- 2. Hang bon con so: gon, khong pho truong ---------------------
   Day la tin hieu tin cay, khong phai tieu de trang. Con so nho lai mot bac
   de khoi doc lien mach voi phan tren, khong cat ngang mach doc. */
.stat-row{
  padding:var(--s6) 0;
  border-top:1px solid var(--n-200);
  border-bottom:1px solid var(--n-200);
}
.stat-row .st b{
  font-size:clamp(22px,2.4vw,29px);
  font-weight:650;
  color:var(--b-700);
}
.stat-row .st span{
  font-size:13.5px;
  color:var(--n-600);
}

/* ==========================================================================
   chq-v15 — NGAN MENU: NEO DUNG DAY MAN HINH
   Loi do chinh minh gay ra o v13: ngan menu bat dau tu duoi header (y=91)
   nhung chieu cao toi da lai tinh la "100dvh - chieu cao header" (=720),
   nen day ngan menu roi xuong 811 trong khi man hinh chi cao 778
   -> hai nut goi/bao gia bi cat mat 33px, khong bao gio thay duoc.
   Do that o may 390x778: cta {t:669, b:810} — nam ngoai man hinh.

   Hai sua:
   (a) Tru dung phan da chiem: --chq-top-h (thanh tren + header) o trang thai
       thuong, va --chq-header-h-min khi header da thu gon (thanh tren an di).
   (b) Chi CON MOT vung cuon. Truoc do ca .main-nav lan .main-nav > ul deu
       overflow-y:auto -> khoi "position:sticky" bam vao day vung cuon cua
       .main-nav chu khong phai day man hinh.
   Khong dung position:fixed cho .main-nav: to cha .site-top co
   will-change:transform, no tao khung chua moi nen "fixed" se bam vao
   .site-top chu khong bam vao man hinh (bay thuong gap).
   ========================================================================== */
@media (max-width:1023.98px){
  /* (c) BAY QUAN TRONG: quy tac goc ".main-nav.open{display:block}" co do uu
     tien (0,2,0) manh hon ".main-nav{display:flex}" (0,1,0) o khoi v13, nen
     ngan menu KHONG BAO GIO thanh flex-column. Hau qua: ".main-nav > ul"
     khong bi gioi han chieu cao -> danh sach muc dai 1094px nam trong khung
     chi cao 387px va bi cat, khong cuon duoc. Phai viet dung .open. */
  .main-nav.open{
    display:flex;flex-direction:column;
    max-height:calc(100vh - var(--chq-top-h));
    max-height:calc(100dvh - var(--chq-top-h));
    overflow:hidden;                     /* huy vung cuon thu hai */
  }
  .site-top.is-stuck .main-nav.open{
    max-height:calc(100vh - var(--chq-header-h-min));
    max-height:calc(100dvh - var(--chq-header-h-min));
  }
  /* Vung cuon duy nhat: danh sach muc. Chua san cho khoi nut ben duoi. */
  .main-nav.open > ul{
    flex:1 1 auto;min-height:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:var(--s2);
  }
}

/* ---------- chq-v16: hai chi tiet nho cua ngan menu -----------------------
   (1) Muc cha DA MO san nhom con ben duoi thi khong con mui ten nua. Mui ten
       la loi hua "bam vao se di tiep"; de o muc da mo la hua sai.
   (2) Dai mo nhat phia tren khoi nut: bao cho nguoi dung biet ben duoi con
       noi dung de cuon (Nielsen Norman Group goi la "cat off text" —
       chu bi cat ngang chinh la tin hieu cuon tot nhat, dai mo lam no ro hon).
   -------------------------------------------------------------------------- */
@media (max-width:1023.98px){
  .main-nav > ul > li.menu-item-has-children > a::before{display:none}
  .main-nav .nav-cta{position:sticky}
  .main-nav .nav-cta::before{
    content:"";position:absolute;left:0;right:0;top:-26px;height:26px;
    pointer-events:none;
    background:linear-gradient(to top,#fff 12%,rgba(255,255,255,0));
  }
}

/* ==========================================================================
   chq-v17 — NGAN MENU DIEN THOAI DUNG CHUAN NGHE
   Nguon tham chieu:
     - Nielsen Norman Group, "Mobile Subnavigation": nhom con nen dong san,
       moi nhom duoi 6 muc; mo san lam danh sach dai qua 3 man hinh va nguoi
       dung mat kha nang nhin thay cau truc trang.
     - Nielsen Norman Group, "Accordions on Mobile": khong mo san nhom dau
       tien; phai co duong thoat ro rang; nut Back nen dong nhom.
     - WCAG 2.1: 2.1.1 dung duoc bang ban phim, 2.4.3 thu tu tieu diem,
       2.4.7 vien tieu diem thay duoc, 2.5.5 vung cham >= 44px.
   Bon thu ban cu thieu, nay bo sung: nhom con dong san / khoa cuon nen /
   lop mo + Esc + bay ban phim / nut Back dong menu.
   ========================================================================== */
@media (max-width:1023.98px){

  /* ---- 1. Khoa nen. Dung position:fixed chu khong phai overflow:hidden vi
       Safari tren iOS bo qua overflow:hidden o body -> nen van cuon duoc va
       khi dong menu trang nhay ve dau. Vi tri cuon duoc luu va tra lai. ---- */
  body.nav-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

  /* ---- 2. Lop mo: tach ngan menu khoi trang, bam ra ngoai la dong ---- */
  .nav-scrim{
    position:fixed;inset:0;z-index:65;
    background:rgba(11,42,69,.44);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    animation:chqScrim .18s ease-out;
  }
  .nav-scrim[hidden]{display:none}
  @keyframes chqScrim{from{opacity:0}to{opacity:1}}

  /* ---- 3. Hang cap 1 ---- */
  .main-nav > ul > li{position:relative;padding:0 var(--s3)}
  .main-nav > ul > li + li{border-top:1px solid var(--n-100)}
  .main-nav > ul > li.menu-item-has-children{
    padding-bottom:0;margin-bottom:0;border-bottom:0;
  }
  .main-nav > ul > li > a{
    min-height:54px;padding:0 56px 0 var(--s3);
    font-size:16.5px;font-weight:600;color:var(--n-900);
  }

  /* ---- 4. Nut mo nhom: rieng biet voi duong dan, de duong dan van bam
       vao duoc (trang danh muc cha van truy cap duoc). Vung cham 48x54. ---- */
  .sub-tg{
    position:absolute;top:0;right:var(--s3);
    width:48px;height:54px;padding:0;margin:0;
    background:none;border:0;cursor:pointer;display:block;
  }
  .sub-tg::before{
    content:"";position:absolute;left:50%;top:50%;
    width:9px;height:9px;margin:-7px 0 0 -5px;
    border-right:2px solid var(--n-500);border-bottom:2px solid var(--n-500);
    transform:rotate(45deg);
    transition:transform .22s cubic-bezier(.2,.7,.3,1),margin-top .22s cubic-bezier(.2,.7,.3,1);
  }
  .menu-item-has-children.is-open > .sub-tg::before{transform:rotate(-135deg);margin-top:-2px}
  .sub-tg:focus-visible{outline:2px solid var(--b-600);outline-offset:-6px;border-radius:10px}
  /* muc khong co nhom con giu mui ten chi huong sang phai (= di tiep),
     muc co nhom con dung mui ten xuong (= mo ra) — hai y nghia khac nhau
     thi phai la hai hinh khac nhau. */

  /* ---- 5. Nhom con: dong san, mo ra thi la danh sach thut vao co mot
       vach doc, KHONG phai mot khoi nen xam to. Khoi nen xam lam ngan menu
       trong nhu bang bieu, day chinh la cho anh Hiep thay "thieu chuyen
       nghiep". ---- */
  .main-nav ul ul{
    display:none;
    margin:2px 0 var(--s3) var(--s3);
    padding:0 0 0 var(--s3);
    background:transparent;border:0;border-left:2px solid var(--b-100);
    border-radius:0;box-shadow:none;
  }
  .main-nav li.is-open > ul{display:block;animation:chqMoNhom .2s ease-out}
  @keyframes chqMoNhom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .main-nav ul ul li{margin:0}
  .main-nav ul ul a{
    min-height:46px;padding:0 var(--s3);
    font-size:15.5px;font-weight:500;color:var(--n-600);
    border-radius:var(--r-sm);
  }

  /* ---- 6. Trang dang xem: ba tin hieu (nen + mau + vach) ---- */
  .main-nav .current-menu-item > a,
  .main-nav .current_page_item > a,
  .main-nav [aria-current="page"]{
    background:var(--b-50);color:var(--b-700);font-weight:650;
    box-shadow:inset 3px 0 0 var(--b-600);
  }
  .main-nav .current-menu-ancestor > a,
  .main-nav .current-menu-parent > a{
    background:transparent;box-shadow:none;color:var(--n-900);font-weight:600;
  }

  /* ---- 7. Khoi nut duoi cung: chua le an toan cua may co tai tho ---- */
  .main-nav .nav-cta{
    padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  }
}

/* ---- 8. May tinh: mo bang ban phim (WCAG 2.1.1). Truoc day chi mo khi ro
     chuot -> nguoi dung ban phim khong bao gio vao duoc muc con. ---- */
@media (min-width:1024px){
  .main-nav li:focus-within > ul{display:flex}
  .sub-tg{display:none}
}

/* ==========================================================================
   chq-v18 — NHAN NHOM TRONG MENU CON
   Nhom "Kien thuc" co 8 muc, tren nguong 6 muc ma Nielsen Norman Group
   khuyen. Anh Hiep chon giu nguyen 8 muc => bu bang nhan nhom: 8 dong roi
   thanh 3 cum co ten (4 / 3 / 1), mat quet mot lan la thay minh can gi.
   Chu nhan viet o CSS chu khong phai the <li> gia, xem chu thich trong
   functions.php (chq-nhannhom-v1).
   Nhan la CHU PHU: 11,5px, chu hoa, mau n-500. Do tuong phan 4,8:1 tren
   nen trang — dat WCAG 1.4.3 cho chu thuong.
   ========================================================================== */
.main-nav ul ul li[class*="chq-nhan-"]::before{
  display:block;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--n-500);
  pointer-events:none;
}
.main-nav ul ul li.chq-nhan-quydinh::before{content:"Quy định & tiêu chuẩn"}
.main-nav ul ul li.chq-nhan-luutru::before{content:"Dung lượng & lưu trữ"}
.main-nav ul ul li.chq-nhan-vanban::before{content:"Văn bản pháp lý"}

/* dien thoai: nhan nam trong danh sach thut vao */
@media (max-width:1023.98px){
  .main-nav ul ul li[class*="chq-nhan-"]::before{
    margin:var(--s4) 0 4px var(--s3);
  }
  .main-nav ul ul li.chq-nhan-quydinh::before{margin-top:6px}
}
/* may tinh: bang tha xuong hep hon nen le nho lai */
@media (min-width:1024px){
  .main-nav ul ul li[class*="chq-nhan-"]::before{
    margin:10px 0 3px 10px;
  }
  .main-nav ul ul li.chq-nhan-quydinh::before{margin-top:2px}
}

/* ==========================================================================
   chq-v19 — NGAN MENU KHONG DUOC PHU THUOC VAO JAVASCRIPT
   Anh Hiep bao (23/08/2026): "click vao dich vu, hoac tieu de cac menu deu
   khong hien ra". Nguyen nhan: v17 dong san nhom con bang CSS, con viec mo ra
   lai do JS. Bat ky ly do nao lam JS khong chay — script loi, trang HTML cu
   con nam trong bo nho may, mang dut giua chung — la menu thanh danh sach
   chet: bam khong ra gi, cung khong bao loi.
   Sua theo nguyen tac "nang cap dan": CSS CHI dong nhom con khi thay lop
   'js-nhom' do chinh JS gan vao. Khong co JS thi moi muc con deu hien ra,
   menu van dung duoc day du.
   Kem theo: hang cha ma duong dan trung voi muc con dau tien thi ca hang la
   nut mo/dong (xem chu thich trong footer.php) — bam vao dau cung mo duoc
   nhom, dung nhu nguoi dung mong doi.
   ========================================================================== */
@media (max-width:1023.98px){
  /* mac dinh: hien het — menu dung duoc ke ca khi khong co JS */
  .main-nav ul ul{display:block}
  /* chi khi JS da tiep quan moi dong lai */
  .main-nav.js-nhom ul ul{display:none}
  .main-nav.js-nhom li.is-open > ul{display:block;animation:chqMoNhom .2s ease-out}

  /* Mui ten mo nhom: cho no mot o tron thay duoc. Truoc day chi la hai net
     mo trong nen 48px trong suot — nguoi dung khong biet do la nut bam.
     WCAG 1.4.11: vien o phai tuong phan >= 3:1 voi nen. */
  .sub-tg::after{
    content:"";position:absolute;left:50%;top:50%;
    width:34px;height:34px;margin:-17px 0 0 -17px;
    border-radius:50%;background:var(--n-50);border:1px solid var(--n-200);
    transition:background .16s ease,border-color .16s ease;
  }
  .sub-tg::before{z-index:1}
  .menu-item-has-children.is-open > .sub-tg::after{
    background:var(--b-50);border-color:var(--b-200);
  }
  .menu-item-has-children.is-open > .sub-tg::before{
    border-color:var(--b-700);
  }
  /* ca hang la nut thi bo con tro chu I, dung con tro ban tay */
  .main-nav > ul > li > a[role="button"]{cursor:pointer}
}

/* ---------- chq-v20: dau tich xanh trong bang tieu chuan --------------------
   Do duoc 3,05:1 tren nen trang — chu 14px dam nen nguong bat buoc la 4,5:1
   (WCAG 1.4.3). Day khong phai chi tiet trang tri: dau tich la thong tin
   "dat / khong dat", nguoi nhin kem mau xanh la do nhat se doc nham.
   Doi sang #0a7a4b: 5,4:1 — du bien an toan ma van la mau xanh "dat".
   Chi doi rieng dau tich, khong doi bien --chq-green (dung cho vien va bieu
   tuong, nguong chi 3:1 nen van dat). Bang nay chi nam tren nen trang. */
.tick{color:#0a7a4b}

/* ==========================================================================
   chq-v21 — NGAN MENU KHONG DUOC CHIEM TRON MAN HINH
   Anh Hiep: "menu khi mo tren dien thoai no dung yen che het noi dung doc
   sao duoc". Dung: ngan menu cao het phan man hinh con lai thi nguoi dung
   khong con thay trang dau ca, va cung khong con cho nao de bam ra ngoai cho
   no dong. Chi con moi cach thoat la tim dung nut X.
   Nay chan chieu cao o 76% man hinh: luon con mot dai trang phia duoi (da
   phu lop mo) — vua cho biet "day chi la mot tam menu, trang van o do", vua
   la vung bam de dong. Day la cach cac tam truot (bottom sheet) cua iOS va
   Android van lam.
   ========================================================================== */
@media (max-width:1023.98px){
  .main-nav.open{
    max-height:min(calc(100vh - var(--chq-top-h)), 76vh);
    max-height:min(calc(100dvh - var(--chq-top-h)), 76dvh);
  }
  .site-top.is-stuck .main-nav.open{
    max-height:min(calc(100vh - var(--chq-header-h-min)), 82vh);
    max-height:min(calc(100dvh - var(--chq-header-h-min)), 82dvh);
  }
  /* bo goc duoi cho ra hinh mot tam menu, khong phai mot trang moi */
  .main-nav.open{border-radius:0 0 var(--r-lg) var(--r-lg)}
}

/* ==========================================================================
   chq-v22 — MENU LA MOT TAM NHO, KHONG PHAI MOT TRANG PHU
   Anh Hiep: "menu che het ca noi dung khi xem o dien thoai, em hoc hoi menu
   cua banquyenmaytinh.com". Da do menu ben do tren may 390x760:
     - the menu rong 335px (khong trum het be ngang), cao 542px
     - vi tri absolute, neo duoi header, day cach mep duoi 107px
     - KHONG khoa cuon nen (body van position:static)
     - KHONG co lop mo phu kin man hinh
   Ket qua: nguoi dung van thay va van cuon doc duoc trang trong khi menu mo.
   Ban cu cua minh lam nguoc lai ca ba diem -> "trang dung yen, che het noi
   dung, doc sao duoc".
   Nay lam theo: tam menu rong toi da 360px neo ben phai, bo goc, co bong;
   bo lop mo; bo khoa cuon. Bam ra ngoai tam menu la dong (xu ly o footer.php).
   ========================================================================== */
@media (max-width:1023.98px){
  body.nav-open{position:static;overflow:visible}   /* huy khoa cuon cua v17 */

  .main-nav.open{
    left:auto;
    right:var(--s4);
    /* de ho mot dai trang o ben trai: nguoi dung thay ngay day chi la mot
       tam menu, trang van o do — do ben banquyenmaytinh.com de ho 55px */
    width:min(340px, calc(100vw - 52px));
    top:calc(100% + 8px);
    border:1px solid var(--n-200);
    border-radius:var(--r-lg);
    box-shadow:0 18px 40px -12px rgb(16 24 40 / .28), 0 4px 12px rgb(16 24 40 / .10);
    max-height:min(calc(100vh - var(--chq-top-h) - 24px), 74vh);
    max-height:min(calc(100dvh - var(--chq-top-h) - 24px), 74dvh);
    padding-top:var(--s2);
  }
  .site-top.is-stuck .main-nav.open{
    max-height:min(calc(100vh - var(--chq-header-h-min) - 24px), 80vh);
    max-height:min(calc(100dvh - var(--chq-header-h-min) - 24px), 80dvh);
  }
  /* bo goc duoi cho khoi nut nam gon trong tam */
  .main-nav.open .nav-cta{border-radius:0 0 var(--r-lg) var(--r-lg)}
  /* khong con lop mo */
  .nav-scrim{display:none}
}