/*
Theme Name: DOMI
Description: Giao dien nen tang khao sat truc tuyen DOMI. Dung tu 4 mau thiet ke da duyet.
Author: Truong Thanh Design
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: domi
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
/* Huong A - "Xanh dam, tin cay", ap ngay 21/09/2026.
   Ba viec bo mau nay lam: nen trang va the trang tach han nhau (truoc kia
   chenh chua toi 3% nen ca trang phang li), chu dam het muc, va them mot mau
   cam duy nhat lam nut chinh. Bo mau cu giu o cuoi tep, trong khoi ghi chu. */
:root{
  --bg:#f2f5f8;
  --surface:#ffffff;
  --tint:#e8eef5;
  --tint-2:#f7f9fb;
  --ink:#0c1c2c;
  --ink-2:#3d4f62;
  --ink-3:#6b7c8f;
  --line:#d9e1ea;
  --line-2:#e7edf3;
  --brand:#1a5794;
  --brand-700:#0a2440;
  --brand-050:#e6edf5;
  --accent:#e2891b;
  --accent-700:#c77613;
  --accent-ink:#10263f;
  --teal:#1f8a6d;
  --teal-050:#e4f1ec;
  --navy:#0a2440;
  --navy-2:#11375e;
  --warn:#c98216;
  --crit:#d9506a;
  --shadow-sm:0 1px 2px rgba(10,36,64,.07), 0 1px 3px rgba(10,36,64,.06);
  --shadow-md:0 10px 30px rgba(10,36,64,.09);
  --shadow-lg:0 20px 50px rgba(10,36,64,.16);
  --r-sm:8px; --r-md:12px; --r-lg:18px;
  --maxw:1180px;
  --font-display:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1520; --surface:#152232; --tint:#101b28; --tint-2:#131f2e;
    --ink:#e8eff7; --ink-2:#b2c3d6; --ink-3:#8296ac;
    --line:#26384e; --line-2:#1e2d40;
    --brand:#59a5f0; --brand-700:#8cc3fa; --brand-050:#17293e;
    --accent:#f0a44a; --accent-700:#f7bd77; --accent-ink:#10263f;
    --teal:#4cbb99; --teal-050:#16302a;
    --navy:#0a1624; --navy-2:#13293f;
    --warn:#e0a445; --crit:#ef7d92;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 6px 20px rgba(0,0,0,.45);
    --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#0d1520; --surface:#152232; --tint:#101b28; --tint-2:#131f2e;
  --ink:#e8eff7; --ink-2:#b2c3d6; --ink-3:#8296ac;
  --line:#26384e; --line-2:#1e2d40;
  --brand:#59a5f0; --brand-700:#8cc3fa; --brand-050:#17293e;
  --accent:#f0a44a; --accent-700:#f7bd77; --accent-ink:#10263f;
  --teal:#4cbb99; --teal-050:#16302a;
  --navy:#0a1624; --navy-2:#13293f;
  --warn:#e0a445; --crit:#ef7d92;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px rgba(0,0,0,.45);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
}

/* ============================================================
   2. NEN CHUNG
   ============================================================ */
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display); color:var(--ink); margin:0; text-wrap:balance; line-height:1.25}
p{margin:0}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
img{max-width:100%; height:auto}
button{font:inherit}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
.band{padding-block:64px}
/* Nen trang la mau xam nhat, nen dai "tint" phai la mau trang moi noi len.
   Truoc kia nguoc lai nen hai mang gan nhu bang nhau. */
.band--tint{background:var(--surface); border-block:1px solid var(--line)}

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:100; width:auto; height:auto; clip:auto;
  background:var(--surface); color:var(--brand); padding:10px 16px; border-radius:var(--r-sm);
  box-shadow:var(--shadow-md); font-family:var(--font-display); font-weight:600;
}

.eyebrow{
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:30px}
.sec-head h2{font-size:clamp(26px,2.6vw,34px); font-weight:800; letter-spacing:-.015em}
.sec-head p{margin-top:8px; color:var(--ink-2); font-size:15.5px}
.more{
  font-family:var(--font-display); font-size:14px; font-weight:500; color:var(--brand);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.more:hover{color:var(--brand-700)}

/* ============================================================
   3. NUT
   ============================================================ */
.btn{
  font-family:var(--font-display); font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  /* min-height 44px: nguong vung bam toi thieu tren dien thoai. Truoc day nut
     cao 37px nen bon nut "Tham gia khao sat" o trang chu khong dat nguong. */
  padding:12px 20px; min-height:44px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active{transform:translateY(1px)}
/* Nut chinh khap he thong: xanh navy dac. Mau cam chi danh cho hai cho keu goi
   hanh dong o trang chu (.btn--light o banner, .btn--teal o dai CTA), de mau cam
   giu duoc suc nang. */
.btn--primary{background:var(--navy); color:#fff}
.btn--primary:hover{background:var(--navy-2); color:#fff}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn--ghost:hover{background:var(--brand-050)}
.btn--teal{background:var(--accent); color:var(--accent-ink)}
.btn--teal:hover{background:var(--accent-700); color:var(--accent-ink)}
.btn--light{background:var(--accent); color:var(--accent-ink)}
.btn--light:hover{background:var(--accent-700); color:var(--accent-ink)}
.btn--outline{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55)}
.btn--outline:hover{background:rgba(255,255,255,.18); color:#fff}
.btn--sm{font-size:13.5px; padding:9px 14px; min-height:38px}
.btn--block{width:100%; justify-content:center}
.arr{width:14px; height:14px; flex:none}

/* ============================================================
   3b. O NHAP — MOT DINH DANG DUY NHAT CHO CA TRANG WEB
   ============================================================
   Truoc ngay 21/09/2026 moi man hinh tu dinh nghia lai o nhap cua rieng no:
   bang dieu khien 14px, .ksform 14.5px, trang dang nhap them dem trai 38px,
   trang tra loi khao sat .qv__nhap 14.5px, o "y kien khac" 14px dem 7px,
   bieu mau lien he 15px dem 11/14, o tim kiem 14.5px dem 9/12 — sau kieu khac
   nhau cho cung mot thu. Gio tat ca lay kieu o day; cac tep CSS rieng chi con
   duoc dat nhung gi that su rieng (be ngang, dem trai cho bieu tuong, chieu
   cao toi thieu cua o nhieu dong).

   Doi kieu o nhap toan trang web thi sua DUY NHAT khoi nay. */
:root{
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236b7c8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 10l4-4 4 4' stroke='%231a5794' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394a9bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"]{
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394a9bf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
select,
textarea{
  font:inherit; font-size:14.5px; line-height:1.45; color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; min-height:44px; max-width:100%;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

/* O chon: bo mui ten mac dinh cua he dieu hanh, ve mui ten rieng cho giong
   moi trinh duyet. Danh sach xo xuong van la cua he dieu hanh, khong to mau
   duoc — do la gioi han cua trinh duyet, khong phai thieu sot cua theme. */
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:36px; cursor:pointer;
  background-image:var(--chevron);
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:14px 14px;
}
select::-ms-expand{display:none}

/* --- Danh sach xo xuong cua o chon ---
   Xua nay danh sach nay do he dieu hanh ve, CSS khong voi toi duoc. Chrome 135
   tro len mo ra co che "base-select": khai bao appearance:base-select thi ca cai
   danh sach thanh phan tu cua trang, to mau duoc.

   Khoi nay nam trong @supports nen trinh duyet chua ho tro (Firefox, Safari,
   Chrome cu) don gian la bo qua va van dung danh sach mac dinh nhu truoc — o
   chon van chay binh thuong, khong hong gi. */
@supports (appearance: base-select){
  select,
  ::picker(select){appearance:base-select}

  /* Giu nguyen mui ten tu ve o muc tren; bo mui ten rieng cua base-select di
     de trang thai dong cua o chon khong doi so voi trinh duyet cu. */
  select::picker-icon{display:none}

  /* Vo danh sach xo xuong. */
  ::picker(select){
    border:1px solid var(--line); border-radius:var(--r-md);
    background:var(--surface); box-shadow:var(--shadow-lg);
    /* margin-block chu khong phai margin-top: khong du cho phia duoi thi Chrome
       xo danh sach len tren, luc do van con khe ho dung bang. */
    padding:6px; margin-block:6px;
    font-family:var(--font-body);
  }

  /* Tung dong trong danh sach. Cao 44px cho de bam bang ngon tay. */
  option{
    font-size:14.5px; line-height:1.45; color:var(--ink);
    padding:11px 14px; border-radius:var(--r-sm);
    min-height:44px; align-items:center;
    cursor:pointer;
  }
  option:hover{background:var(--tint)}
  option:focus{background:var(--tint); outline:none}
  /* Muc dang chon: nen navy chu trang, giong kieu o trang hanoirealestate. */
  option:checked{background:var(--navy); color:#fff; font-weight:600}
  option:checked:hover{background:var(--navy-2); color:#fff}
  /* Bo dau tich mac dinh, da co nen dam danh dau muc dang chon roi. */
  option::checkmark{display:none}
  /* Nhom muc (optgroup) neu co. */
  optgroup{
    font-family:var(--font-display); font-size:11.5px; font-weight:700;
    letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
    padding:10px 14px 4px;
  }

  /* Dang mo thi vien o doi mau va mui ten lat len, de biet danh sach dang xo. */
  select:open{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}
  select:open{background-image:var(--chevron-up)}
}

/* O ngay thang / gio cua trinh duyet tu chen bo dieu khien ben trong nen cao
   hon cac o khac 8px. Ep cung chieu cao cho bang voi phan con lai. */
input[type="date"],
input[type="time"]{height:45px}

textarea{resize:vertical; min-height:84px; line-height:1.55}

input:hover:not([disabled]),
select:hover:not([disabled]),
textarea:hover:not([disabled]){border-color:var(--ink-3)}

input:focus,
select:focus,
textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-050)}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
textarea[readonly]{background:var(--tint); color:var(--ink-3); cursor:not-allowed; opacity:1}

::placeholder{color:var(--ink-3); opacity:.85}

/* O tich va o tron: chi dat mau cho dong bo. KHONG dat width/height o day —
   nhieu cho (the chon pham vi, thang diem Likert) co y trai o tron ra kin ca
   the bang position:absolute; inset:0, dat be ngang se lam hong vung bam do. */
input[type="checkbox"],
input[type="radio"]{accent-color:var(--brand)}

/* ============================================================
   4. DAU TRANG
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(1.6) blur(6px);
}

/* --- Trang chu: thanh dau trang nhap vao mang xanh cua banner thanh mot khoi.
   Chi ap cho trang chu, cac trang khac van giu thanh trang nhu cu. Logo doi
   sang ban chu sang (domi_logo_mark( true ) trong header.php). --- */
body.home .hdr{background:var(--navy); border-bottom-color:rgba(255,255,255,.10)}
body.home .hdr .brand__name{color:#fff}
body.home .hdr .brand__sub{color:#8ea9c6}
body.home .nav a{color:#c6d6e6}
body.home .nav a:hover{color:#fff; background:rgba(255,255,255,.10)}
body.home .nav .current-menu-item > a,
body.home .nav .current_page_item > a{color:#fff}
body.home .nav .sub-menu{background:var(--surface); border-color:var(--line)}
body.home .nav .sub-menu a{color:var(--ink-2)}
body.home .nav .sub-menu a:hover{color:var(--brand); background:var(--brand-050)}
body.home .hdr .iconbtn{color:#c6d6e6}
body.home .hdr .iconbtn:hover{background:rgba(255,255,255,.12); color:#fff}
body.home .hdr .btn--ghost{color:#fff; border-color:rgba(255,255,255,.34); background:transparent}
body.home .hdr .btn--ghost:hover{background:rgba(255,255,255,.12)}
body.home .hdr .btn--primary{background:var(--accent); color:var(--accent-ink)}
body.home .hdr .btn--primary:hover{background:var(--accent-700); color:var(--accent-ink)}
body.home .navmob{background:var(--navy); border-top-color:rgba(255,255,255,.12)}
body.home .navmob__list a{color:#c6d6e6}
body.home .navmob__list a:hover{background:rgba(255,255,255,.10); color:#fff}
body.home .navmob .sub-menu{border-left-color:rgba(255,255,255,.18)}
body.home .navmob__xo{color:#8ea9c6}
body.home .navmob__xo:hover{background:rgba(255,255,255,.10); color:#fff}
body.home .navmob .searchform input{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.24); color:#fff;
}
body.home .navmob .searchform input::placeholder{color:#8ea9c6}
body.admin-bar .hdr{top:32px}
.hdr__in{display:flex; align-items:center; gap:20px; height:68px; flex-wrap:nowrap}

.brand{display:flex; align-items:center; gap:10px; flex:none}
.brand__mark{width:34px; height:34px; flex:none}

/* Logo dang anh: cao co dinh, ngang tu co lai theo ti le */
.brand__logo{height:42px; width:auto; max-width:230px; flex:none; display:block; object-fit:contain}
.ft .brand__logo{height:38px}
@media (max-width:900px){ .brand__logo{height:36px; max-width:180px} }
.brand__name{font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--navy); letter-spacing:.02em; line-height:1.1}
:root[data-theme="dark"] .brand__name{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand__name{color:var(--ink)}}
.brand__sub{font-size:11px; color:var(--ink-3); line-height:1.2}

/* --- menu chinh: dung dung cau truc ma WordPress xuat ra --- */
.nav__wrap{flex:1 1 auto; min-width:0; display:flex}
.nav{display:flex; align-items:center; gap:2px; flex-wrap:nowrap; min-width:0}
.nav li{position:relative; display:flex; align-items:center; height:68px}
.nav a{
  font-family:var(--font-display); font-size:14.5px; font-weight:500; color:var(--ink-2);
  padding:8px 11px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap;
}
.nav a:hover{color:var(--brand); background:var(--brand-050)}
.nav .current-menu-item > a,
.nav .current_page_item > a{color:var(--brand); font-weight:600}

/* mui ten cho muc co menu con */
.nav .menu-item-has-children > a::after{
  content:""; width:9px; height:9px; flex:none; margin-left:2px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); opacity:.6; transition:transform .18s;
}
.nav .menu-item-has-children:hover > a::after,
.nav .menu-item-has-children:focus-within > a::after{transform:rotate(-135deg) translate(-3px,-3px)}

.nav .sub-menu{
  position:absolute; top:100%; left:0; min-width:236px; z-index:5; display:block;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-md); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{opacity:1; visibility:visible; transform:none}
.nav .sub-menu li{display:block; height:auto}
.nav .sub-menu a{display:block; white-space:normal; font-size:14px; font-weight:400; padding:9px 11px}

.hdr__act{display:flex; align-items:center; gap:10px; flex:none}
.iconbtn{
  width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-sm);
  border:0; background:transparent; color:var(--ink-2); cursor:pointer;
}
.iconbtn:hover{background:var(--brand-050); color:var(--brand)}
.burger{display:none}

/* --- menu tren dien thoai --- */
.navmob{display:none; border-top:1px solid var(--line); background:var(--surface); padding:12px 20px 18px}
.navmob.is-open{display:block}
.navmob ul{display:grid; gap:2px}
.navmob .sub-menu{margin-left:12px; padding-left:10px; border-left:1px solid var(--line-2)}
/* Chi nhuom cac muc menu. Truoc day viet la ".navmob a" nen an ca hai nut
   tai khoan o cuoi khung: chu bi xam lai va mat dang nut. */
.navmob__list a{
  display:block; font-family:var(--font-display); font-size:15px; font-weight:500;
  color:var(--ink-2); padding:10px 12px; border-radius:var(--r-sm);
}
.navmob__list a:hover{background:var(--tint); color:var(--brand)}

/* muc co menu con: nhan ben trai, nut mui ten ben phai, menu con xuong dong duoi.
   Khong co JavaScript thi menu con hien san; co JavaScript thi gap lai. */
.navmob .menu-item-has-children{display:flex; flex-wrap:wrap; align-items:center; gap:2px}
.navmob .menu-item-has-children > a{flex:1 1 auto; min-width:0}
.navmob .menu-item-has-children > ul{flex:1 0 100%}
.navmob ul[hidden]{display:none}
.navmob__xo{
  flex:none; width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border:0; background:transparent; color:var(--ink-3); border-radius:var(--r-sm);
}
.navmob__xo:hover{background:var(--tint); color:var(--brand)}
.navmob__xo svg{transition:transform .18s}
.navmob__xo[aria-expanded="true"] svg{transform:rotate(180deg)}

/* hai nut tai khoan trong khung menu — chi dung khi thanh tren da giau chung di */
.navmob__act{display:none; gap:8px; margin-top:12px}
.navmob__act .btn{flex:1 1 0; justify-content:center}

/* --- o tim kiem --- */
.searchform{display:flex; gap:8px; margin-top:12px}
/* Kieu o nhap lay o muc 3b, o day chi dat be ngang. */
.searchform input{flex:1; min-width:0}

/* ============================================================
   5. CUOI TRANG
   ============================================================ */
.ft{background:var(--navy); color:#c7d8e8; padding-block:48px 0; margin-top:0}
.ft a{color:#c7d8e8}
.ft a:hover{color:#fff}
.ft__grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,1.3fr); gap:28px}
.ft h4{color:#fff; font-size:14.5px; font-weight:600; margin-bottom:14px}
.ft ul{display:grid; gap:9px; font-size:14px}
.ft__about p{font-size:14px; line-height:1.6; margin-top:14px; max-width:30ch}
.ft .brand__name{color:#fff}
.ft .brand__sub{color:#9fb6cc}
.ft__contact li{display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.5}
.ft__contact svg{width:16px; height:16px; flex:none; margin-top:4px; opacity:.8}
.ft__bar{
  margin-top:36px; border-top:1px solid rgba(255,255,255,.14); padding-block:18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:#9fb6cc;
}
.social{display:flex; gap:12px}
.social a{display:grid; place-items:center; width:30px; height:30px; border-radius:6px; background:rgba(255,255,255,.1)}
.social a:hover{background:rgba(255,255,255,.2)}
.social svg{width:15px; height:15px}

/* ============================================================
   6. TRANG NOI DUNG THUONG (page.php / single.php / 404)
   ============================================================ */
/* Nen trang web gio la xam nhat, nen ruot trang noi dung phai nam tren mot to
   trang co vien, khong tha chu thang len nen xam. */
.entry{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:44px 48px; margin-block:32px;
}
.entry__head{margin-bottom:26px; padding-bottom:20px; border-bottom:2px solid var(--line)}
.entry__head h1{font-size:clamp(26px,3.4vw,34px); font-weight:700}
.entry__meta{font-size:13.5px; color:var(--ink-3); margin-top:8px}
.entry__body{max-width:70ch}

/* --- trang mot bai chu: cot chu vua tam mat, muc luc ben phai --- */
.entry--doc .entry__head,
.entry--doc .entry__grid{max-width:1020px; margin-inline:auto}
.entry__grid{display:grid; gap:44px; align-items:start}
.entry--doc .entry__body{max-width:72ch; margin-inline:auto}
.entry--doc .entry__body h2{scroll-margin-top:96px}

/* chi khi co muc luc that su moi chia hai cot */
@media (min-width:1080px){
  .entry__grid.co-muc-luc{grid-template-columns:minmax(0,1fr) 248px}
  .entry__grid.co-muc-luc .entry__body{max-width:none; margin-inline:0}
  .entry__toc{position:sticky; top:96px}
}
body.admin-bar .entry__toc{top:128px}

.entry__toc__nhan{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.entry__toc ul{display:grid; gap:2px; border-left:2px solid var(--line); padding-left:2px}
.entry__toc a{
  display:block; font-size:13.5px; line-height:1.45; color:var(--ink-2);
  padding:6px 10px; border-left:2px solid transparent; margin-left:-4px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.entry__toc a:hover{color:var(--brand); background:var(--tint)}
.entry__toc a.is-on{color:var(--brand); font-weight:600; border-left-color:var(--brand)}

/* man hinh hep: muc luc thanh mot khoi gon o dau bai */
@media (max-width:1079px){
  .entry__toc{
    order:-1; background:var(--tint); border:1px solid var(--line);
    border-radius:var(--r-md); padding:14px 16px;
  }
  .entry__toc ul{border-left:0; padding-left:0}
  /* tren dien thoai cho nhan to hon va moi dong cao hon cho de bam */
  .entry__toc__nhan{font-size:12.5px}
  .entry__toc a{padding:9px 0; margin-left:0; border-left:0}
}
.entry__body > * + *{margin-top:18px}
.entry__body h2{font-size:22px; font-weight:700; margin-top:34px}
.entry__body h3{font-size:18px; font-weight:600; margin-top:26px}
.entry__body ul,.entry__body ol{list-style:revert; padding-left:22px; display:grid; gap:7px}
.entry__body a{color:var(--brand); font-weight:600}
.entry__body a:hover{text-decoration:underline}
.entry__body img{border-radius:var(--r-md)}
.entry__body blockquote{
  border-left:3px solid var(--brand); background:var(--tint); padding:14px 18px;
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--ink-2);
}
.entry__body code{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--tint); border:1px solid var(--line-2); border-radius:5px; padding:1px 5px;
}

.postlist{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.postcard{
  display:flex; flex-direction:column; gap:10px; padding:20px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  transition:transform .18s, box-shadow .18s;
}
.postcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.postcard h2{font-size:17px; font-weight:600}
.postcard .meta{font-size:12.5px; color:var(--ink-3)}
.postcard p{font-size:14.5px; color:var(--ink-2)}
.postcard .more{margin-top:auto}

.pager{display:flex; gap:8px; margin-top:32px; flex-wrap:wrap}
.pager .page-numbers{
  font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 13px; background:var(--surface);
}
.pager .page-numbers:hover{border-color:var(--brand); color:var(--brand)}
.pager .page-numbers.current{background:var(--brand); border-color:var(--brand); color:#fff}

.empty{
  text-align:center; padding:60px 20px; border:1px dashed var(--line);
  border-radius:var(--r-lg); background:var(--tint-2);
}
.empty h1{font-size:26px; font-weight:700; margin-bottom:8px}
.empty p{color:var(--ink-3); margin-bottom:20px}

/* ============================================================
   7. MAN HINH NHO
   ============================================================ */
@media (max-width:1080px){
  .nav__wrap{display:none}
  .burger{display:grid}
  /* menu ngang an di, khong con gi day nhom nut sang phai nua */
  .hdr__act{margin-left:auto}
  .ft__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px}
  .postlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Duoi 560px thi thanh dau trang khong con cho cho ca hai nut tai khoan lan nut
   menu — nut menu bi day ra ngoai man hinh. Giau hai nut di, chung da co mat
   san trong khung menu. */
@media (max-width:560px){
  .hdr__act .btn{display:none}
  .navmob__act{display:flex}
}
@media (max-width:680px){
  .band{padding-block:40px}
  .hdr__act .btn{font-size:13.5px; padding:9px 13px}
  .ft__grid{grid-template-columns:1fr}
  .postlist{grid-template-columns:1fr}
  .entry{padding:26px 20px; margin-block:18px; border-radius:var(--r-md)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ============================================================
   TRANG NOI DUNG — hoi dap, blog, lien he
   ============================================================ */
.entry__trong{color:var(--ink-3); font-size:15px; padding:18px 0}

/* --- Hoi dap --- */
.hoidap{display:grid; gap:10px; margin-top:24px; max-width:860px}
.hoidap__o{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); overflow:hidden;
}
.hoidap__o[open]{border-color:var(--brand)}
.hoidap__o summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--ink);
}
.hoidap__o summary::-webkit-details-marker{display:none}
.hoidap__o summary:hover{color:var(--brand)}
.hoidap__o summary svg{width:20px; height:20px; flex:none; transition:transform .18s ease}
.hoidap__o[open] summary svg{transform:rotate(180deg)}
.hoidap__dap{padding:0 18px 18px; color:var(--ink-2); line-height:1.7}
.hoidap__dap p{margin:0 0 10px}
.hoidap__dap p:last-child{margin-bottom:0}

/* --- Danh sach bai viet --- */
.bvlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-top:26px}
.bvcard{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); overflow:hidden;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.bvcard:hover{border-color:var(--brand); box-shadow:0 12px 28px -18px rgba(26,107,196,.55)}
.bvcard__anh{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--tint)}
.bvcard__anh img{width:100%; height:100%; object-fit:cover; display:block}

/* Bai chua co anh dai dien: mot mang navy dac kem bieu tuong trang. Truoc day
   la mang chuyen mau pastel - chinh la kieu mang nhat lam ca trang bi nhoe. */
.bvcard__nen{
  width:100%; height:100%; display:grid; place-items:center;
  background:var(--navy);
}
.bvcard__nen svg{width:42px; height:42px; color:#fff; opacity:.85}
.bvcard__than{display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1}
.bvcard__than h2{font-size:18px; line-height:1.35; font-weight:600; margin:0}
.bvcard__than h2 a{color:var(--ink)}
.bvcard__than h2 a:hover{color:var(--brand)}
.bvcard__luc{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-3); margin:0}
.bvcard__video{display:inline-flex; align-items:center; gap:5px; color:var(--brand); font-weight:600}
.bvcard__video svg{width:16px; height:16px}
.bvcard__tom{font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0}
.bvcard__doc{
  margin-top:auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--brand);
}
.bvcard__doc .arr{width:15px; height:15px}

.entry__video{margin:22px 0; max-width:860px}
.entry__video iframe{width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:var(--r-md)}
.entry__ve{margin-top:30px; padding-top:18px; border-top:1px solid var(--line)}
.entry__ve a{color:var(--brand); font-weight:600}

/* --- Bieu mau lien he --- */
.lhform{margin-top:26px}
.lhform__bao{
  margin:0 0 22px; padding:13px 18px; border-radius:var(--r-md);
  font-weight:500; font-size:15px;
}
.lhform__bao--ok{background:color-mix(in oklab, var(--teal) 14%, var(--surface)); color:var(--teal)}
.lhform__bao--err{background:color-mix(in oklab, var(--crit) 12%, var(--surface)); color:var(--crit)}
.lhform__luoi{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:40px; align-items:start}
.lhform__trai{display:grid; gap:26px; align-content:start}
.lhform__mo{max-width:none}
.lhform__mo > :first-child{margin-top:0}

/* khoi thong tin lien he dong khung nhat cho can voi the bieu mau ben phai */
.lhform__tin{
  background:var(--tint); border:1px solid var(--line);
  border-radius:var(--r-md); padding:22px 24px;
}
/* Chi hai tieu de cua khoi lien he. Viet ".lhform h2" thi de lan sang tieu de
   trong phan mo dau, lam mat khoang cach tren cua no. */
.lhform__tin h2,
.lhform__form h2{font-size:20px; font-weight:600; margin:0 0 16px}
.lhform__ds{display:grid; gap:14px; list-style:none; padding:0; margin:0}
.lhform__ds li{display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ink-2); line-height:1.55}
.lhform__ds svg{width:20px; height:20px; flex:none; color:var(--brand); margin-top:1px}
.lhform__ds a{color:var(--brand)}
.lhform__form{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); padding:26px 28px;
}
.lhform__hang{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.lhform__o{display:grid; gap:6px; margin:0 0 16px}
.lhform__o label{font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--ink)}
.lhform__o .req{color:var(--crit)}
/* Kieu o nhap lay o muc 3b, o day chi dat be ngang. */
.lhform__o input, .lhform__o textarea{width:100%}
.lhform__nut{margin:4px 0 0}
.lhform__bay{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

@media (max-width:900px){
  .lhform__luoi{grid-template-columns:1fr; gap:24px}
  .lhform__hang{grid-template-columns:1fr}
  .lhform__form{padding:20px}
}