/* ===========================================================
   TẦNG 1 — TOKEN NGUYÊN THUỶ
   Màu lấy BẰNG MÁY từ card chuan.jpg (đếm pixel), không lấy bằng mắt:
   #1F1A17 = 170.144px · #DA251C = 72.696px · #FFFFFF = 55.694px
   =========================================================== */
:root{
  /* ---------- TẦNG 1: BẢNG MÀU (palette) — phần DUY NHẤT đổi khi sang thương hiệu khác ---------- */
  --brand:#1F1A17;        /* than của Trường Thành, đo bằng máy từ card visit */
  --brand-soft:#382F2A;
  --brand-deep:#16120F;
  --accent:#DA251C;       /* ⛔ CHỈ dùng làm NỀN (nút, thẻ, gạch chân). Trắng trên nó = 4,93:1 */
  --accent-strong:#B81D15;/* ⛔ CHỈ dùng làm CHỮ trên nền sáng = 5,41-6,51:1 */
  --on-accent:#FFFFFF;

  --bg:#F7F3F0;           /* giấy ấm, ngả về phía --brand chứ không trắng trung tính */
  --surface:#FFFFFF;
  --surface-2:#EFE9E4;
  --text:#1F1A17;
  --muted:#4A403A;        /* chữ phụ */
  --muted-2:#6B5F58;       /* nhãn, chú thích */
  --line:#DFD7D0;         /* kẻ TRANG TRÍ — 1,41:1, không đạt và KHÔNG CẦN đạt */
  --line-strong:#877C74;  /* ⛔ viền Ô NHẬP và NÚT — 4,08:1, WCAG 1.4.11 đòi ≥3:1 */
  --ok:#0E6E3C;
  --shadow:31 26 23;      /* RGB rời để đổ bóng theo alpha: rgb(var(--shadow)/.18) */

  /* ---------- TẦNG 2: NGỮ NGHĨA ---------- */
  --nen:var(--bg);
  --nen-khoi:var(--surface);
  --nen-lom:var(--surface-2);
  --chu:var(--text);
  --chu-phu:var(--muted);
  --chu-nhat:var(--muted-2);
  --nhan:var(--accent);
  --nhan-chu-nho:var(--accent-strong);
  --nhan-chu:var(--on-accent);
  --nhan-dam:var(--accent-strong);
  --do-500:var(--accent);
  --do-300:var(--accent-strong);
  --vien:var(--line);
  --vien-dam:var(--line-strong);
  --vien-input:var(--line-strong);

  /* Khối TỐI trên trang sáng: bảng đồng hồ + chân trang */
  --panel-nen:var(--brand);
  --panel-vien:var(--brand-soft);
  --panel-vien-mo:#4A3F39;

  /* ---------- BÁN KÍNH BO — thang chuẩn, không gõ số lẻ ---------- */
  --r-sm:6px; --r:8px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-tron:999px;

  /* ---------- KHOẢNG CÁCH — cơ sở 4, nhịp chính bội số 8 ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s20:80px; --s28:112px;

  --khung:1180px;
  --le:clamp(16px, 4vw, 40px);
  --font-hien:Lora,Georgia,"Times New Roman",serif;
  --font-chu:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-so:"IBM Plex Mono",Consolas,ui-monospace,monospace;
}

/* Trong hai khối tối, định nghĩa lại TẦNG 2 — con cháu tự lấy đúng màu */
.dong-ho,.chan{
  --chu:#F4EFEC;
  --chu-phu:#B0A49D;
  --chu-nhat:#9C8F87;
  --nen-khoi:var(--panel-nen);
  --nen-lom:var(--panel-nen);
  --vien:var(--panel-vien);
  --vien-dam:var(--panel-vien-mo);
  --do-300:#FF6A5E;
  --nhan-chu-nho:#FF6A5E;
  --ok:#3FBF74;
  color:var(--chu);
}

*,*::before,*::after{box-sizing:border-box}

/* Thanh đầu dính cao 68px — không có dòng này thì mọi liên kết #neo đưa mục tiêu chui xuống dưới thanh */
html{scroll-padding-top:84px}

.bo-qua{position:absolute;left:-9999px;top:0;z-index:100;background:var(--do-500);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:600;text-decoration:none}
.bo-qua:focus{left:0;color:#fff}

body{
  margin:0;
  background:var(--nen);
  color:var(--chu);
  font-family:var(--font-chu);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

a{color:var(--nhan-chu-nho);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--chu)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

.khung{max-width:var(--khung);margin-inline:auto;padding-inline:var(--le)}

/* ---------- Kiểu chữ ---------- */
/* ⛔ ĐÃ GỠ text-wrap:balance.
   balance cố ý bẻ dòng SỚM để hai dòng dài bằng nhau — trái luật "dùng hết đất".
   Muốn tránh dòng cuối trơ một từ mà vẫn dùng hết bề ngang thì dùng
   text-wrap:pretty, KHÔNG dùng balance. */
.hien{
  font-family:var(--font-hien);font-weight:600;
  letter-spacing:-.005em;line-height:1.14;margin:0;
}
.h-lon{font-size:clamp(2.1rem,5.6vw,3.9rem)}
/* Đỏ trên than đạt 3,5:1 — chỉ dùng được cho chữ CỠ LỚN (≥24px), không dùng cho chữ thường */
.h-do{color:var(--nhan);display:block}
.h-vua{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.h-nho{font-family:var(--font-chu);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.35;margin:0}

.nhan-mo{
  font-family:var(--font-so);font-weight:500;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chu-nhat);
  display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s4);
}
.nhan-mo::before{content:"»";color:var(--nhan);font-size:1rem;letter-spacing:0}

.so{font-family:var(--font-so);font-variant-numeric:tabular-nums}
/* Phần tử nội dung dùng HẾT bề ngang khung. Mọi max-width chặn chữ đã gỡ. */
.dan{color:var(--chu-phu);margin:0}

/* ---------- Nút ---------- */
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-chu);font-weight:700;font-size:.9rem;line-height:1.2;
  padding:12px 20px;border:1px solid transparent;border-radius:var(--r-md);
  cursor:pointer;text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.nut-chinh{background:var(--do-500);color:var(--nhan-chu);border-color:var(--do-500)}
.nut-chinh:hover{background:var(--nhan-dam);border-color:var(--nhan-dam);color:var(--nhan-chu)}
.nut-vien{background:transparent;color:var(--chu);border-color:var(--vien-input)}
.nut-vien:hover{border-color:var(--do-500);color:var(--chu)}

/* ---------- Đầu trang ---------- */
.dau{
  position:sticky;top:0;z-index:40;
  background:rgba(31,26,23,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--vien);
}
.dau-trong{display:flex;align-items:center;gap:var(--s6);min-height:68px}
.hieu{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--chu);
  margin-right:auto;min-width:0}
.hieu img{height:38px;width:auto}
.hieu-phu{font-family:var(--font-so);font-size:.62rem;letter-spacing:.2em;color:var(--chu-nhat);
  text-transform:uppercase;white-space:nowrap;padding-left:12px;border-left:1px solid var(--vien)}
.dieu-huong{display:flex;gap:var(--s6);list-style:none;margin:0;padding:0}
.dieu-huong a{color:var(--chu-phu);text-decoration:none;font-size:.9375rem}
.dieu-huong a:hover{color:var(--chu)}
.dt-dau{font-family:var(--font-so);font-weight:500;font-size:.9375rem;color:var(--chu);text-decoration:none;white-space:nowrap}
.dt-dau:hover{color:var(--do-300)}
/* Viền nút phải đạt 3:1 (WCAG 1.4.11) — #4A3F39 chỉ được 1,69:1 nên đổi sang --vien-input */
.mo-menu{display:none;background:none;border:1px solid var(--line-strong);color:var(--chu);border-radius:var(--r);padding:9px 12px;font-family:var(--font-so);font-size:.75rem;letter-spacing:.1em;cursor:pointer}

/* Thanh gọi dính đáy — chỉ hiện dưới 720px, xem lý do ở media query cuối file */
.thanh-goi{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  grid-template-columns:1fr 1fr;gap:var(--s2);padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom));
  background:rgba(22,18,15,.96);backdrop-filter:blur(8px);border-top:1px solid var(--vien)}
.thanh-goi .nut{padding:13px var(--s3);font-size:.875rem}

/* ---------- Hero: dải chéo đỏ lấy từ card visit ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--vien)}
/* Dải bắt đầu ở 58% và lệch tối đa ±6% do skew — luôn nằm bên phải cột chữ,
   nên chữ không bao giờ đặt trên nền đỏ (đỏ/kem chỉ đạt 4,0:1, đủ cho chữ lớn chứ không đủ cho chữ thường) */
.dai-cheo{
  position:absolute;left:58%;right:-12%;top:-14%;height:128%;
  background:var(--do-500);transform:skewX(-11deg);z-index:0;
}
.hero-trong{position:relative;z-index:1;display:grid;gap:var(--s12);padding-block:var(--s20) var(--s16)}
.hero-chu{min-width:0}
.hero-chu .dan{margin-top:var(--s6);font-size:1.0625rem}
.hero-nut{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.hero-them{font-family:var(--font-so);font-size:.75rem;letter-spacing:.1em;color:var(--chu-nhat);text-transform:uppercase;margin:var(--s6) 0 0}

/* Bảng đồng hồ — thứ đặc trưng nhất của nghề hạ tầng */
.dong-ho{
  background:var(--panel-nen);border:1px solid var(--panel-vien);border-top:3px solid var(--do-500);
  border-radius:var(--r-lg);padding:var(--s6);font-family:var(--font-so);font-size:.8125rem;line-height:1.85;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.dh-dau{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--chu-nhat)}
.cham{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;animation:tho 2.4s ease-in-out infinite}
@keyframes tho{0%,100%{opacity:1}50%{opacity:.3}}
.dh-ma{margin:0;overflow-x:auto;color:var(--chu-phu);white-space:pre}
.dh-ma .c1{color:var(--chu-nhat)}
.dh-ma .c2{color:var(--do-300)}
.dh-ma .c3{color:var(--chu)}
.dh-giai{font-family:var(--font-chu);font-size:.8125rem;line-height:1.55;color:var(--chu-phu);margin:var(--s4) 0 0}

/* ---------- Dải cam kết ---------- */
.cam-ket{border-bottom:1px solid var(--vien);background:var(--nen-lom)}
.ck-luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--vien)}
/* padding-inline đặt cả hai bên — dùng -start/-end để chỉ nới đúng mép ngoài,
   nếu không ô đầu thừa 40px lề trong còn ô giữa chỉ có 16px, nhìn lệch nhịp */
.ck-o{background:var(--nen-lom);padding:var(--s6) var(--s4)}
.ck-luoi > .ck-o:first-child{padding-inline-start:var(--le)}
.ck-luoi > .ck-o:last-child{padding-inline-end:var(--le)}
.ck-so{font-family:var(--font-so);font-variant-numeric:tabular-nums;font-size:clamp(1.5rem,3.4vw,2rem);
  color:var(--chu);line-height:1.1;display:block}
.ck-nhan{font-family:var(--font-so);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--chu-nhat);display:block;margin-top:var(--s2)}

/* ---------- Khối chung ---------- */
.muc{padding-block:var(--s20);border-bottom:1px solid var(--vien)}
.muc-dau{margin-bottom:var(--s12)}
.muc-dau .dan{margin-top:var(--s4)}

/* ---------- Dịch vụ ---------- */
.dv-luoi{display:grid;gap:var(--s4)}
.dv{background:var(--nen-khoi);border:1px solid var(--vien);border-radius:var(--r-lg);padding:var(--s8) var(--s6);
  display:flex;flex-direction:column;gap:var(--s3)}
.dv-chinh{background:var(--nen-lom);border-color:var(--vien-dam)}
.dv-ma{font-family:var(--font-so);font-size:.6875rem;letter-spacing:.14em;color:var(--nhan-chu-nho);text-transform:uppercase}
.dv p{margin:0;color:var(--chu-phu);font-size:.9375rem}
.dv p.dv-ma{font-size:.6875rem;color:var(--nhan-chu-nho)}
.dv ul{margin:var(--s2) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.dv li{position:relative;padding-left:20px;font-size:.9375rem;color:var(--chu-phu)}
.dv li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--do-500)}

/* ---------- Ghi chú tên miền ---------- */
.ghi-chu{margin:var(--s4) 0 0;font-size:.875rem;color:var(--chu-nhat)}

/* ---------- SEO ---------- */
.seo-luoi{display:grid;gap:var(--s12)}
.chi-so{display:grid;gap:var(--s4)}
.cs{background:var(--nen-lom);border:1px solid var(--vien);border-left:3px solid var(--accent);
  border-radius:var(--r-lg);padding:var(--s4) var(--s6)}
.cs-ten{font-family:var(--font-so);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chu-nhat)}
.cs-gt{font-family:var(--font-so);font-variant-numeric:tabular-nums;font-size:1.5rem;color:var(--chu);line-height:1.2;margin-top:2px}
.cs p{margin:var(--s1) 0 0;font-size:.875rem;color:var(--chu-phu)}
.cs p.cs-ten{margin:0;font-size:.6875rem;color:var(--chu-nhat)}
.cs p.cs-gt{font-size:1.5rem;color:var(--chu)}

/* ---------- Quy trình ---------- */
.qt{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--vien);
  border-block:1px solid var(--vien)}
.qt li{background:var(--nen);padding:var(--s6) 0;display:grid;gap:var(--s3);align-items:start}
.qt-so{font-family:var(--font-so);font-variant-numeric:tabular-nums;font-size:.875rem;color:var(--nhan-chu-nho);letter-spacing:.1em}
.qt p{margin:var(--s1) 0 0;color:var(--chu-phu);font-size:.9375rem}

/* ---------- Câu hỏi ---------- */
.ch{border-top:1px solid var(--vien)}
.ch:last-of-type{border-bottom:1px solid var(--vien)}
.ch summary{cursor:pointer;padding:var(--s6) 40px var(--s6) 0;position:relative;list-style:none;
  font-family:var(--font-chu);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
.ch summary::-webkit-details-marker{display:none}
.ch summary::after{content:"+";position:absolute;right:var(--s2);top:50%;transform:translateY(-50%);
  font-family:var(--font-so);font-size:1.25rem;color:var(--nhan-chu-nho)}
.ch[open] summary::after{content:"–"}
.ch p{margin:0 0 var(--s6);color:var(--chu-phu)}

/* ---------- Liên hệ ---------- */
.lh{position:relative;overflow:hidden}
.lh .dai-cheo{left:62%;right:-20%;top:-30%;height:160%}
.lh-luoi{position:relative;z-index:1;display:grid;gap:var(--s12);padding-block:var(--s20)}
.lh-tin{list-style:none;margin:var(--s8) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.lh-tin div{font-family:var(--font-so);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--chu-nhat)}
.lh-tin a,.lh-tin span{font-family:var(--font-chu);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--chu);text-decoration:none}
.lh-tin a{text-decoration:underline;text-underline-offset:3px}
.lh-tin a:hover{color:var(--do-300)}

/* ---------- Chân trang ---------- */
.chan{background:var(--panel-nen);border-top:1px solid var(--vien);padding-block:var(--s12)}
.chan-logo{height:44px;width:auto;margin-bottom:var(--s4)}
.chan p.chan-mxh{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s3);max-width:none}
.chan-mxh a{color:var(--chu-phu);font-weight:600;text-decoration:none}
.chan-mxh a:hover{color:var(--nhan-chu-nho);text-decoration:underline}
.chan-trong{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:space-between;align-items:flex-start}
.chan p{margin:0;font-size:.875rem;color:var(--chu-nhat)}
.chan p.chan-ten{font-family:var(--font-chu);font-weight:800;font-size:.9375rem;color:var(--chu);letter-spacing:.02em;margin-bottom:var(--s2);max-width:none}

@media (min-width:720px){
  .ck-luoi{grid-template-columns:repeat(4,1fr)}
  .dv-luoi{grid-template-columns:repeat(2,1fr)}
  .dv-chinh{grid-column:span 2;display:grid;grid-template-columns:1.3fr 1fr;
    gap:var(--s8);align-items:start}
  .dvc-trai{display:flex;flex-direction:column;gap:var(--s6)}
  .chi-so{grid-template-columns:repeat(3,1fr)}
  .qt li{grid-template-columns:72px 1fr;gap:var(--s6)}
  .qt-so{padding-top:4px}
}
@media (min-width:960px){
  .hero-trong{grid-template-columns:1.05fr .95fr;align-items:center;gap:var(--s16);padding-block:var(--s28) var(--s20)}
  .dv-luoi{grid-template-columns:repeat(3,1fr)}
  /* Khối trái gom [giới thiệu | gạch đầu dòng] */
  .dv-chinh{grid-column:span 3;display:grid;grid-template-columns:1.45fr 1fr;
    gap:var(--s12);align-items:start}
  .dvc-trai{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
  .seo-luoi{grid-template-columns:1fr 1.15fr;gap:var(--s16);align-items:start}
  .lh-luoi{grid-template-columns:1fr 1.05fr;gap:var(--s16);align-items:start}
}
/* Dưới 960px bố cục dồn về một cột — dải chéo phải lui xuống đáy, nấp sau
   bảng đồng hồ và biểu mẫu (hai khối duy nhất có nền đặc), nếu không nó sẽ
   nằm dưới chữ thường. Media query KHÔNG cộng specificity nên phải ghi đủ
   left/top ở đây, không dựa vào rule gốc. */
@media (max-width:959px){
  /* Hình học đã tính lại: bottom:-10% + height:30% đẩy mép TRÊN của dải xuống 0,80×H.
     Bảng đồng hồ (nền đặc) bắt đầu ở H−384px, mà 0,80H > H−384 với mọi H < 1920px,
     nên mép dải luôn rơi vào trong bảng — chữ không bao giờ đè lên đỏ.
     Bản trước để height:46% thì mép dải nhô lên trên bảng ~75px, đè dưới dòng
     "Bàn giao kèm mã nguồn" (kem trên đỏ = 1,42:1). */
  .hero .dai-cheo{left:auto;right:-26%;width:74%;top:auto;bottom:-10%;height:30%}
  .lh .dai-cheo{left:auto;right:-32%;width:78%;top:auto;bottom:-6%;height:26%}
}
@media (max-width:719px){
  .dieu-huong,.dt-dau{display:none}
  /* Số điện thoại bị ẩn ở thanh đầu vì không đủ bề ngang — bù lại bằng thanh
     gọi dính đáy, luôn thấy trong suốt lượt cuộn. Điện thoại là thiết bị DUY NHẤT
     bấm gọi được, không được để khách phải cuộn hết trang mới tìm ra số. */
  .thanh-goi{display:grid}
  body{padding-bottom:76px}
  .mo-menu{display:block}
  .dau-trong.mo .dieu-huong{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    gap:0;background:var(--nen-lom);border-bottom:1px solid var(--vien);padding:var(--s2) var(--le) var(--s4)}
  .dau-trong.mo .dieu-huong a{display:block;padding:12px 0;border-top:1px solid var(--vien)}
  .dau{position:relative}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ================= RIÊNG BẢN NỀN SÁNG ================= */
.dau{background:rgba(247,243,240,.93);border-bottom:2px solid var(--do-500)}
.thanh-goi{background:rgba(255,255,255,.96)}
.dong-ho{box-shadow:0 18px 44px rgba(31,26,23,.20)}

/* ═══════════════════ NÂNG CẤP 2026-09-20 ═══════════════════ */

/* ---------- Bóng đổ: thang chuẩn, dựng từ --shadow dạng RGB rời ---------- */
:root{
  --bong-the:0 4px 20px rgb(var(--shadow)/.08);
  --bong-nang:0 14px 40px rgb(var(--shadow)/.16);
  --bong-to:0 24px 56px rgb(var(--shadow)/.22);
}

/* ---------- Nhịp nền xen kẽ giữa các mục ---------- */
.muc-trang{background:var(--surface)}
.muc-xam{background:var(--surface-2)}

/* ---------- Thẻ: luôn có bóng, hover nhấc lên ---------- */
.dv,.goi,.cs{box-shadow:var(--bong-the);transition:box-shadow .3s ease,transform .3s ease}
.dv:hover,.goi:hover{box-shadow:var(--bong-nang);transform:translateY(-4px)}
.dau{box-shadow:0 1px 3px rgb(var(--shadow)/.10)}

/* ---------- 5. Icon cho 4 dịch vụ ---------- */
.dv-icon{width:48px;height:48px;flex:none;border-radius:var(--r-lg);display:grid;place-items:center;
  background:var(--nen-lom);color:var(--accent);margin-bottom:var(--s2)}
.dv-icon svg{width:26px;height:26px}
.dv-chinh .dv-icon{margin-bottom:var(--s3)}

/* ---------- 1. Mockup thiết bị trong hero ---------- */
.hero-phai{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.thiet-bi{position:relative;padding-bottom:18px}
.laptop{background:var(--brand);border-radius:var(--r-lg) var(--r-lg) 4px 4px;padding:9px 9px 0;
  box-shadow:var(--bong-to)}
.laptop-man{aspect-ratio:16/10;background:var(--surface);border-radius:5px;overflow:hidden;max-width:100%}
.laptop-de{height:9px;width:114%;margin-left:-7%;background:var(--brand-soft);
  border-radius:0 0 var(--r) var(--r)}
.laptop-de::after{content:"";display:block;width:16%;height:3px;margin:0 auto;
  background:rgb(var(--shadow)/.55);border-radius:0 0 3px 3px}

/* Giao diện giả lập bên trong màn hình */
.gd{height:100%;display:flex;flex-direction:column;background:var(--surface)}
.gd-thanh{height:20px;flex:none;background:var(--surface-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:4px;padding:0 7px}
.gd-cham{width:5px;height:5px;border-radius:50%;background:var(--line-strong);flex:none}
.gd-cham.do{background:var(--accent)}
.gd-url{flex:1;height:7px;border-radius:999px;background:var(--line);margin-left:5px}
.gd-than{flex:1;padding:8px;display:flex;flex-direction:column;gap:7px;min-height:0}
.gd-hero{flex:1.25;border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;
  justify-content:center;gap:5px;
  background:linear-gradient(112deg,var(--brand) 0%,var(--brand-soft) 52%,var(--accent) 165%)}
.gd-d1{width:62%;height:7px;border-radius:3px;background:rgb(255 255 255/.92)}
.gd-d2{width:40%;height:5px;border-radius:3px;background:rgb(255 255 255/.5)}
.gd-nut{width:26%;height:10px;border-radius:3px;background:var(--accent);margin-top:4px}
.gd-luoi{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;min-height:0}
.gd-luoi > i{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;
  display:block;position:relative}
.gd-luoi > i::after{content:"";position:absolute;left:6px;right:32%;bottom:7px;height:4px;
  border-radius:2px;background:var(--line-strong);opacity:.6}

/* Điện thoại chồng lên góc trái laptop */
.dienthoai{position:absolute;left:-10px;bottom:0;width:22%;max-width:104px;min-width:62px;
  background:var(--brand);border-radius:13px;padding:4px;box-shadow:var(--bong-to)}
.dt-man{aspect-ratio:9/18.5;background:var(--surface);border-radius:10px;overflow:hidden;
  padding:5px;display:flex;flex-direction:column;gap:4px;max-width:100%}
.dt-tai{width:34%;height:3px;border-radius:999px;background:var(--brand);margin:1px auto 2px}
.dt-hero{height:34%;flex:none;border-radius:4px;
  background:linear-gradient(140deg,var(--brand) 0%,var(--accent) 180%)}
.dt-dong{height:4px;flex:none;border-radius:2px;background:var(--line)}
.dt-dong.ngan{width:62%}
.dt-nut{height:9px;flex:none;border-radius:3px;background:var(--accent);width:66%;margin-top:auto}

/* Bảng DNS thu nhỏ khi nằm dưới mockup */
.hero-phai .dong-ho{font-size:.7rem;line-height:1.7;padding:var(--s4)}
.hero-phai .dh-giai{font-size:.76rem}

.muc-chan{margin-top:var(--s12);display:flex;justify-content:center}

/* ---------- 7. FAQ dạng accordion, trượt mượt bằng max-height ---------- */
.ch-de{margin:0}
.ch-nut{display:flex;align-items:flex-start;gap:var(--s4);width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:var(--s6) 0;color:var(--text);
  font-family:var(--font-chu);font-weight:600;font-size:1.0625rem;line-height:1.45}
.ch-nut:hover{color:var(--accent-strong)}
.ch-dau{flex:1;min-width:0}
.ch-icon{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--nen-lom);color:var(--accent);position:relative;margin-top:-1px;
  transition:background .25s ease,color .25s ease,transform .3s ease}
.ch-icon::before,.ch-icon::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.ch-icon::before{width:12px;height:2px}
.ch-icon::after{width:2px;height:12px}
.ch-nut[aria-expanded="true"] .ch-icon{background:var(--accent);color:var(--on-accent);
  transform:rotate(135deg)}
.ch-than{overflow:hidden}
.js .ch-than{max-height:0;transition:max-height .35s ease}
.ch-than > div{padding-bottom:var(--s6)}
.ch-than p{margin:0;color:var(--muted)}

@keyframes song{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.6);opacity:0}}

/* ---------- 6. Hiện dần khi cuộn vào khung nhìn ---------- */
.js .fade-up{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.fade-up.da-hien{opacity:1;transform:none}
.fade-up[data-tre="1"]{transition-delay:.1s}
.fade-up[data-tre="2"]{transition-delay:.2s}
.fade-up[data-tre="3"]{transition-delay:.3s}
.fade-up[data-tre="4"]{transition-delay:.4s}
.fade-up[data-tre="5"]{transition-delay:.5s}

/* ⛔ Người đặt hệ điều hành ở chế độ GIẢM CHUYỂN ĐỘNG: tắt hết.
   fade-up phải hiện SẴN — không được nằm ở opacity:0 chờ observer,
   vì với họ observer vẫn chạy nhưng chuyển động thì không nên có. */
@media (prefers-reduced-motion:reduce){
  .js .fade-up{opacity:1;transform:none;transition:none}
  .dv:hover{transform:none}
  .ch-than{transition:none}
}

/* ═══════════════ NÚT LIÊN HỆ NỔI ═══════════════ */

.lh-noi{position:fixed;right:24px;bottom:24px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.lh-nut{width:58px;height:58px;flex:none;border-radius:50%;border:0;cursor:pointer;position:relative;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
  box-shadow:0 12px 30px rgb(218 37 28/.40);
  transition:transform .25s ease,box-shadow .25s ease}
.lh-nut:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgb(218 37 28/.52)}
.lh-nut svg{width:26px;height:26px;grid-area:1/1;position:relative;z-index:1;
  transition:opacity .2s ease,transform .3s ease}
.lh-nut::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--accent);animation:song 2.4s ease-out infinite}

@media (max-width:719px){
  /* Trên di động, thanh gọi dính đáy cao 76px — đẩy cụm nổi lên trên nó */
  .lh-noi{right:16px;bottom:88px}
  .lh-nut{width:52px;height:52px}
  .lh-nut svg{width:23px;height:23px}
}

@media (prefers-reduced-motion:reduce){
  .lh-nut::after{animation:none}
  .lh-nut:hover{transform:none}
  .lh-nut svg{transition:none}
}

/* ---------- Khối chuyển từ nhà cung cấp cũ ---------- */
.chuyen{display:grid;gap:var(--s6);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r-lg);box-shadow:var(--bong-the);padding:var(--s8) var(--s6)}
.chuyen h2{margin:0 0 var(--s2);font-family:var(--font-hien);font-weight:600;font-size:1.3rem;
  line-height:1.3}
.chuyen p{margin:0;color:var(--muted);font-size:.95rem}
.chuyen ul{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:10px}
.chuyen li{position:relative;padding-left:26px;font-size:.92rem;color:var(--muted)}
.chuyen li svg{position:absolute;left:0;top:3px;width:17px;height:17px;color:var(--ok)}

@media (min-width:640px){
  .chuyen{grid-template-columns:1.1fr 1fr}
}

/* ═══ CĂN ĐỀU — chuẩn cho HỘP TEXT NỘI DUNG ═══
   Mép phải thẳng thì không còn cảm giác "chữ xuống dòng mà vẫn thừa đất".
   ⛔ CHỈ áp cho chữ chạy nhiều dòng. KHÔNG áp cho: tiêu đề, nhãn, nút,
   ô bảng, số liệu, điều hướng — căn đều ở đó làm giãn chữ vô nghĩa.
   Dòng cuối và dòng trước <br> vẫn căn trái, đó là đúng chuẩn. */
.dan,
.dv p, .dv li,
.chuyen p, .chuyen li,
.cs p,
.ch-than p,
.ghi-chu,
.chan p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* ---------- Lưới tiện ích (dùng chung cho mục dịch vụ thư) ---------- */
.ti-luoi{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
.ti-luoi li{display:flex;gap:var(--s4);background:var(--nen-khoi);border:1px solid var(--vien);
  border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--bong-the);
  transition:box-shadow .3s ease,transform .3s ease}
.ti-luoi li:hover{box-shadow:var(--bong-nang);transform:translateY(-4px)}
.ti-o{width:44px;height:44px;flex:none;border-radius:var(--r-lg);display:grid;place-items:center;
  background:var(--nen-lom);color:var(--accent)}
.ti-o svg{width:22px;height:22px}
.ti-luoi b{display:block;font-size:1rem;font-weight:600;line-height:1.35;margin-bottom:4px}
.ti-luoi span:not(.ti-o){display:block;font-size:.9rem;color:var(--chu-phu);line-height:1.6;
  text-align:justify}
.ti-gia{margin-top:var(--s8);display:grid;gap:var(--s4);align-items:center;
  background:var(--nen-lom);border:1px solid var(--vien);border-left:4px solid var(--accent);
  border-radius:var(--r-lg);padding:var(--s6)}
.ti-nhan{margin:0 0 var(--s2);font-family:var(--font-so);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chu-nhat)}
.ti-mo{margin:0;font-size:.92rem;color:var(--chu-phu);text-align:justify}
.ti-gia .nut{justify-self:start}
@media (min-width:640px){ .ti-luoi{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){
  .ti-luoi{grid-template-columns:repeat(3,1fr)}
  .ti-gia{grid-template-columns:1fr auto}
  .ti-gia .nut{justify-self:end}
}
@media (prefers-reduced-motion:reduce){ .ti-luoi li:hover{transform:none} }

/* ═══════════════════════════════════════════════════════════
   BỔ SUNG CHO THEME WORDPRESS — các luật thêm mới: bố cục đã đổi,
   trang thường (the_content) và danh sách bài.
   ═══════════════════════════════════════════════════════════ */

/* Thẻ dịch vụ chính không còn cột phải → một cột, hết khoảng trống */
@media (min-width:720px){
  .dv-chinh{grid-template-columns:1fr}
}

/* Hộp thông tin liên hệ: nền đặc để che dải chéo đỏ, thay chỗ biểu mẫu cũ */
.lh-hop{background:var(--nen-lom);border:1px solid var(--vien);border-top:3px solid var(--do-500);
  border-radius:var(--r-lg);padding:var(--s8) var(--s6)}
.lh-hop .lh-tin{margin-top:0}

/* Nút nổi giờ là thẻ a — giữ màu chữ khi rê chuột */
a.lh-nut,a.lh-nut:hover{color:var(--on-accent)}

/* Tên pháp nhân ở chân trang in hoa như bản thiết kế */
.chan p.chan-ten{text-transform:uppercase}

/* Thanh quản trị WordPress che mất thanh đầu dính (thanh đầu chỉ dính từ 720px) */
@media (min-width:720px){ .admin-bar .dau{top:46px} }
@media (min-width:783px){ .admin-bar .dau{top:32px} }

/* ---------- Nội dung trang thường: the_content() ---------- */
.trang-dau{margin-bottom:var(--s8)}
.noi-dung{color:var(--chu-phu)}
.noi-dung > *:first-child{margin-top:0}
.noi-dung > *:last-child{margin-bottom:0}
.noi-dung p{margin:0 0 var(--s4)}
.noi-dung h2,.noi-dung h3,.noi-dung h4{color:var(--chu);line-height:1.3;margin:var(--s8) 0 var(--s3)}
.noi-dung h2{font-family:var(--font-hien);font-weight:600;font-size:clamp(1.35rem,2.4vw,1.75rem)}
.noi-dung h3{font-family:var(--font-chu);font-weight:600;font-size:1.1875rem}
.noi-dung h4{font-family:var(--font-chu);font-weight:600;font-size:1.0625rem}
.noi-dung ul,.noi-dung ol{margin:0 0 var(--s4);padding-left:var(--s6)}
.noi-dung li{margin-bottom:var(--s2)}
.noi-dung li::marker{color:var(--nhan-chu-nho)}
.noi-dung a{color:var(--nhan-chu-nho);text-decoration:underline}
.noi-dung a:hover{color:var(--chu)}
.noi-dung strong,.noi-dung b{color:var(--chu);font-weight:600}
.noi-dung img{height:auto;border-radius:var(--r-lg)}
.noi-dung figure{margin:var(--s6) 0}
.noi-dung figcaption{font-size:.875rem;color:var(--chu-nhat);margin-top:var(--s2)}
.noi-dung blockquote{margin:var(--s6) 0;padding:var(--s2) 0 var(--s2) var(--s6);border-left:3px solid var(--accent);color:var(--chu)}
.noi-dung hr{border:0;border-top:1px solid var(--vien);margin:var(--s8) 0}
.noi-dung table{border-collapse:collapse;width:100%;margin:0 0 var(--s4);font-size:.9375rem}
.noi-dung th,.noi-dung td{padding:var(--s3) var(--s4);border:1px solid var(--vien);text-align:left}
.noi-dung th{background:var(--nen-lom);color:var(--chu);font-weight:600}

/* Danh sách bài (index.php) */
.bai{padding-block:var(--s6);border-top:1px solid var(--vien)}
.bai:last-of-type{border-bottom:1px solid var(--vien)}
.bai h2{font-family:var(--font-chu);font-weight:600;font-size:1.1875rem;line-height:1.35;margin:0 0 var(--s2)}
.bai h2 a{color:var(--chu);text-decoration:none}
.bai h2 a:hover{color:var(--nhan-chu-nho)}
.bai p{margin:0;color:var(--chu-phu)}
.phan-trang{margin-top:var(--s8)}
.phan-trang .nav-links{display:flex;flex-wrap:wrap;gap:var(--s2)}
.phan-trang .page-numbers{display:inline-block;padding:var(--s2) var(--s3);border:1px solid var(--vien-input);
  border-radius:var(--r);color:var(--chu);text-decoration:none;font-family:var(--font-so);font-size:.875rem}
.phan-trang .page-numbers.current{background:var(--do-500);border-color:var(--do-500);color:var(--nhan-chu)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}