/* ==========================================================================
   NEN GIAO DIEN DUNG CHUNG - website bat dong san
   Truong Thanh Design
   File nay KHONG chua ma mau cua site nao. Mau, phong chu, logo nam o
   style.css cua giao dien con. Thanh phan chi duoc dung token tang ngu nghia.
   ========================================================================== */

/* ---------- 1. Token mac dinh (site se ghi de) ---------- */
:root{
  /* thuong hieu */
  --brand:#33415c; --brand-soft:#4a5a78; --brand-deep:#1f2a3d;
  --accent:#a33; --accent-hover:#822; --on-accent:#fff; --on-brand:#fff;
  --accent-strong:#a33;            /* chi lam CHU tren nen sang */
  --link:#33415c;
  /* mat nen va chu */
  --bg:#f5f6f8; --surface:#fff; --surface-2:#e9ecf1;
  --text:#1b2330; --muted:#4f5967; --muted-2:#5e6876;
  --line:#dde2e8;                  /* ke trang tri */
  --line-strong:#77818e;           /* vien o nhap, nut: >= 3:1 */
  --focus:var(--brand);
  --shadow:20 30 45;
  /* chu tren khoi toi */
  --on-dark:#fff; --on-dark-muted:#d5dce6; --on-dark-accent:#ffe08a; --on-dark-line:#9fb0c6;
  /* phong chu */
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  --font-tieu-de:var(--font);
  --font-ma:ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
  /* thang co chu: 5 co */
  --c-xs:.8125rem; --c-sm:.9rem; --c-base:1rem; --c-lg:1.3rem;
  --c-xl:clamp(1.55rem,1.1rem + 1.7vw,2.25rem);
  /* thang khoang cach */
  --k1:4px; --k2:8px; --k3:12px; --k4:16px; --k6:24px; --k8:32px; --k12:48px; --k18:72px;
  /* thang bo goc */
  --r-sm:6px; --r:8px; --r-md:9px; --r-lg:12px; --r-xl:16px; --r-tron:999px;
  --cham:44px;                     /* vung bam toi thieu */
}

/* Khoi toi: dinh nghia lai token ngay tren phan tu, con chau tu lay dung mau */
.toi{
  --text:var(--on-dark); --muted:var(--on-dark-muted); --muted-2:var(--on-dark-muted);
  --link:var(--on-dark); --accent-strong:var(--on-dark-accent);
  --surface-2:var(--brand-soft); --line:var(--brand-soft); --line-strong:var(--on-dark-line);
  --focus:var(--on-dark);
  background:var(--brand); color:var(--text);
}

/* ---------- 2. Nen tang ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-bottom:96px}
body{margin:0; background:var(--bg); color:var(--text); font:400 var(--c-base)/1.6 var(--font); overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,dl,dd,figure,table,fieldset{margin:0; padding:0}
ul,ol{list-style:none}
fieldset{border:0; min-width:0}
img{display:block; max-width:100%; height:auto}
a{color:var(--link); text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button,input,textarea{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--font-tieu-de); line-height:1.25; font-weight:600; text-wrap:pretty}
h1{font-size:var(--c-xl); letter-spacing:-.01em}
h2{font-size:var(--c-lg)}
h3{font-size:var(--c-base)}
svg{flex:none}
.icon{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.an-thi-giac{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.bo-qua{position:absolute; left:-9999px}
.bo-qua:focus{position:fixed; left:16px; top:16px; z-index:99; padding:10px 16px; background:var(--surface); color:var(--text); border-radius:var(--r); outline:2px solid var(--focus)}
.khung{width:min(1180px,100% - 32px); margin-inline:auto}
.kho-icon{position:absolute}
.so{font-variant-numeric:tabular-nums}
.ma{font-family:var(--font-ma); font-variant-numeric:tabular-nums; letter-spacing:.02em}

/* Hop chu noi dung nhieu dong: can deu theo chuan */
.van-ban p{text-align:justify; text-justify:inter-word; hyphens:auto}
.van-ban p + p{margin-top:var(--k4)}
.van-ban h3{margin:var(--k6) 0 var(--k2)}

/* ---------- 3. Nut, o nhap, nhan ---------- */
.nut{display:inline-flex; align-items:center; justify-content:center; gap:var(--k2); min-height:var(--cham); padding:12px 20px;
  border:1px solid transparent; border-radius:var(--r-md); font-weight:700; font-size:.9rem; line-height:1.2; text-decoration:none; white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.nut--nhan{background:var(--accent); color:var(--on-accent)}
.nut--nhan:hover{background:var(--accent-hover)}
.nut--chinh{background:var(--brand); color:var(--on-brand)}
.nut--chinh:hover{background:var(--brand-soft)}
.nut--vien{background:var(--surface); color:var(--text); border-color:var(--line-strong)}
.nut--vien:hover{background:var(--surface-2)}
.nut--rong{width:100%}
.nhan{display:block; font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted-2); margin-bottom:5px}
.o-nhap{display:block; width:100%; min-height:var(--cham); padding:11px 12px; background:var(--surface); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--r-md); font-size:.92rem}
.o-nhap::placeholder{color:var(--muted-2); opacity:1}
textarea.o-nhap{min-height:92px; resize:vertical}

/* Nhom chon mot (Nhu cau): radio that, ve lai thanh thanh chia doan */
.doan{display:flex; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--surface); overflow:hidden}
.doan label{flex:1; position:relative; display:flex}
.doan input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.doan span{flex:1; display:flex; align-items:center; justify-content:center; min-height:calc(var(--cham) - 2px); padding:0 14px; font-size:.92rem; font-weight:600; white-space:nowrap; color:var(--muted)}
.doan label + label span{border-left:1px solid var(--line)}
.doan input:checked + span{background:var(--brand); color:var(--on-brand)}
.doan input:focus-visible + span{outline:2px solid var(--focus); outline-offset:-4px}

/* ---------- 4. Hop chon tu dung (khong dung select mac dinh) ---------- */
.chon{position:relative; min-width:0}
.chon__nut{display:flex; align-items:center; justify-content:space-between; gap:var(--k2); width:100%; min-height:var(--cham); padding:11px 12px;
  background:var(--surface); color:var(--text); border:1px solid var(--line-strong); border-radius:var(--r-md); font-size:.92rem; text-align:left}
.chon__gia-tri{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chon__nut .icon{width:16px; height:16px; color:var(--muted-2); transition:transform .15s ease}
.chon__nut[aria-expanded="true"] .icon{transform:rotate(180deg)}
.chon__ds{position:absolute; z-index:30; top:calc(100% + 6px); left:0; min-width:100%; width:max-content; max-width:min(340px,calc(100vw - 32px)); max-height:336px; overflow:auto;
  padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 12px 32px rgb(var(--shadow)/.18)}
.chon--phai .chon__ds{left:auto; right:0}
.chon__ds[hidden]{display:none}
.chon__ds li{display:flex; align-items:center; gap:var(--k3); min-height:var(--cham); padding:8px 10px 8px 7px; border-left:3px solid transparent; border-radius:var(--r-sm); cursor:pointer}
.chon__ds li.dang-tro,.chon__ds li:hover{background:var(--surface-2); border-left-color:var(--accent)}
.chon__o{display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--link)}
.chon__ds li.dang-tro .chon__o,.chon__ds li:hover .chon__o{background:var(--surface)}
.chon__o .icon{width:18px; height:18px}
.chon__chu{flex:1; min-width:0; display:grid}
.chon__ten{font-weight:600; font-size:.92rem; line-height:1.3}
.chon__mo-ta{font-size:.78rem; color:var(--muted-2); line-height:1.35}
.chon__tich{width:18px; height:18px; color:var(--accent-strong); visibility:hidden; stroke-width:2.4}
.chon__ds li[aria-selected="true"] .chon__tich{visibility:visible}

/* ---------- 5. Dau trang ---------- */
.dau{position:relative; z-index:40; background:var(--surface); border-bottom:1px solid var(--line)}
.dau__trong{display:flex; align-items:center; gap:var(--k4); min-height:76px}
.dau__logo{display:flex; align-items:center; min-height:var(--cham)}
.dau__logo img{height:var(--logo-cao,52px); width:auto}
.menu{margin-left:auto}
.menu__ds{display:flex; gap:2px}
.menu__ds > li{position:relative}
.menu a{display:flex; align-items:center; gap:6px; min-height:var(--cham); padding:0 12px; border-radius:var(--r); font-weight:600; font-size:.94rem; color:var(--text); text-decoration:none; white-space:nowrap}
.menu a:hover{background:var(--surface-2)}
.menu a[aria-current]{color:var(--link); box-shadow:inset 0 -3px 0 var(--accent)}
.menu__con a[aria-current]{box-shadow:inset 3px 0 0 var(--accent)}
.menu a .icon{width:14px; height:14px; color:var(--muted-2)}
.menu__con{display:none; position:absolute; top:100%; left:0; min-width:230px; padding:6px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 12px 32px rgb(var(--shadow)/.18)}
.menu__ds > li:hover > .menu__con,.menu__ds > li:focus-within > .menu__con{display:block}
.menu__con a{font-weight:400}
.goi{display:flex; align-items:center; gap:10px; min-height:var(--cham); padding:4px 4px 4px 12px; text-decoration:none; color:var(--text); border-left:1px solid var(--line)}
.goi .icon{width:22px; height:22px; color:var(--accent-strong)}
.goi__chu{display:grid; line-height:1.2}
.goi__nhan{font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted-2)}
.goi__so{font-size:1.06rem; font-weight:700; color:var(--accent-strong); font-variant-numeric:tabular-nums; white-space:nowrap}
.dau__mo{display:none; align-items:center; gap:var(--k2); min-height:var(--cham); padding:0 12px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-md); font-weight:600; font-size:.9rem}

@media (max-width:1099px){
  .dau__trong{flex-wrap:wrap; min-height:64px; padding-block:6px; gap:var(--k2)}
  .dau__logo img{height:var(--logo-cao-dt,44px)}
  .goi{border-left:0; padding-left:4px}
  .dau__mo{display:inline-flex; margin-left:auto}
  .menu{order:5; flex-basis:100%; margin:0; padding-bottom:var(--k2)}
  .js .menu:not(.mo){display:none}
  .menu__ds{display:block; border-top:1px solid var(--line); padding-top:var(--k2)}
  .menu a{padding:0 10px; white-space:normal}
  .menu a .icon{display:none}
  .menu__con{display:block; position:static; min-width:0; padding:0 0 4px 16px; border:0; box-shadow:none; background:none}
}
@media (max-width:419px){
  .goi__nhan{display:none}
  .goi__so{font-size:.98rem}
  .dau__mo span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
}

/* ---------- 6. Trang chu: trinh chieu anh, khoi tim kiem, loi mo dau ---------- */
/* Trinh chieu nam ngay duoi menu. Khung co ty le dat san nen anh tai ve khong xo lech bo cuc.
   Khong co JS: anh dau tien hien san, cac nut dieu khien an di. */
.trinh{position:relative; margin-top:var(--k4); --chong:56px}
.trinh__khung{position:relative; aspect-ratio:1180/480; border-radius:var(--r-xl); overflow:hidden; background:var(--surface-2)}
.trinh__muc{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease,visibility 0s linear .5s}
.trinh__muc.hien{opacity:1; visibility:visible; transition:opacity .5s ease}
.trinh__muc img{width:100%; height:100%; object-fit:cover}
.trinh__muc--tren img{object-position:50% 28%}
.trinh__muc--duoi img{object-position:50% 68%}
.trinh__thanh{position:absolute; left:var(--k4); right:var(--k4); bottom:calc(var(--chong) + var(--k4)); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--k4)}
.trinh__chu{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-height:var(--cham); padding:9px 14px; background:#fff; color:#1b2330; border-radius:var(--r); font-size:var(--c-sm); text-decoration:none; box-shadow:0 6px 18px rgb(var(--shadow)/.22)}
.trinh__chu b{font-weight:700}
.trinh__chu:hover span:last-child{text-decoration:underline}
.trinh__dk{display:none; flex:none; align-items:center; gap:2px; padding:0 4px; background:#fff; color:#1b2330; border-radius:var(--r-tron); box-shadow:0 6px 18px rgb(var(--shadow)/.22)}
.js .trinh__dk{display:flex}
.trinh__dk button{display:grid; place-items:center; width:var(--cham); height:var(--cham); padding:0; border:0; border-radius:var(--r-tron); background:none; color:inherit}
.trinh__dk button:hover{background:#e9ecf1}
.trinh__dk button:focus-visible{outline:2px solid #1b2330; outline-offset:-4px}
.trinh__cham{display:flex}
.trinh__cham button{width:24px}
.trinh__cham button::before{content:""; width:10px; height:10px; border-radius:var(--r-tron); border:2px solid #1b2330}
.trinh__cham button[aria-current="true"]::before{background:#1b2330; width:22px}
.trinh__dung .icon--chay,.trinh.dang-dung .trinh__dung .icon--dung{display:none}
.trinh.dang-dung .trinh__dung .icon--chay{display:block}

.mo-dau{padding:var(--k8) 0 0}
.mo-dau__luoi{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--k4) var(--k12); align-items:start}
.mo-dau__loi p{color:var(--muted)}
.mo-dau__loi .mo-dau__so{margin-top:var(--k3); color:var(--text)}
.mo-dau__so a{font-weight:600}

.tim{position:relative; z-index:20; margin:calc(var(--chong,56px) * -1) var(--k6) 0; padding:var(--k6); background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 14px 36px rgb(var(--shadow)/.14)}
.tim__luoi{display:grid; grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto; gap:var(--k4); align-items:end}

@media (max-width:1023px){
  /* man hep: khoi tim kiem cao len nen khong chong len anh nua, dat ngay duoi trinh chieu */
  .trinh{--chong:0px}
  .trinh__khung{aspect-ratio:16/9}
  .tim{margin:var(--k4) 0 0; padding:var(--k4)}
  .tim__luoi{grid-template-columns:1fr 1fr}
  .tim__luoi > :nth-child(1),.tim__luoi > :nth-child(2),.tim__luoi > :last-child{grid-column:1 / -1}
}
@media (max-width:819px){
  .mo-dau{padding-top:var(--k6)}
  .mo-dau__luoi{grid-template-columns:1fr}
}
@media (max-width:699px){
  /* dien thoai: thanh chu thich va nut dieu khien roi khoi anh, nam ngay duoi anh de khong che anh */
  .trinh__khung{aspect-ratio:3/2; border-radius:var(--r-lg) var(--r-lg) 0 0}
  .trinh__thanh{position:static; flex-direction:column; align-items:stretch; gap:0; background:var(--surface); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-lg) var(--r-lg)}
  .trinh__chu{box-shadow:none; background:none; color:var(--text); padding:10px 12px 6px}
  .trinh__dk{box-shadow:none; background:none; color:var(--text); justify-content:space-between; padding:0 4px 4px; border-top:1px solid var(--line)}
  .trinh__dk button:hover{background:var(--surface-2)}
  .trinh__dk button:focus-visible{outline-color:var(--focus)}
  .trinh__cham button::before{border-color:var(--text)}
  .trinh__cham button[aria-current="true"]::before{background:var(--text)}
}
@media (max-width:479px){
  .tim__luoi{grid-template-columns:1fr}
  .tim__luoi > *{grid-column:auto}
}

/* ---------- 7. Muc noi dung ---------- */
.muc{padding-block:var(--k12)}
.muc + .muc{padding-top:0}
.muc--nen{background:var(--surface); border-block:1px solid var(--line); padding-block:var(--k12)}
.muc--nen + .muc{padding-top:var(--k12)}
.muc__dau{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--k2) var(--k6); margin-bottom:var(--k6)}
.muc__dau a{display:inline-flex; align-items:center; min-height:var(--cham); font-weight:600; font-size:var(--c-sm)}
.muc__td{margin-bottom:var(--k6)}

/* ---------- 8. The tin dang ---------- */
.luoi-tin{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--k6)}
.luoi-tin > li{display:flex; min-width:0}
.tin{flex:1; min-width:0}
.tin{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .15s ease,box-shadow .15s ease}
.tin:hover{border-color:var(--line-strong); box-shadow:0 8px 22px rgb(var(--shadow)/.10)}
.tin:focus-within{outline:2px solid var(--focus); outline-offset:2px}
.tin__anh{position:relative; background:var(--surface-2)}
.tin__anh img{width:100%; aspect-ratio:3/2; object-fit:cover}
.tin__nhu-cau{position:absolute; left:10px; top:10px; padding:3px 9px; border-radius:var(--r-sm); background:var(--brand-deep); color:var(--on-brand); font-size:.75rem; font-weight:600; line-height:1.5}
.tin__than{flex:1; display:flex; flex-direction:column; gap:var(--k2); padding:14px var(--k4) var(--k4)}
.tin__hang{display:flex; align-items:baseline; justify-content:space-between; gap:var(--k3)}
.tin__gia{font-size:1.14rem; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums; white-space:nowrap}
.tin__gia span{font-size:var(--c-xs); font-weight:400; color:var(--muted-2)}
.tin__ma{font-size:var(--c-xs); color:var(--muted-2); white-space:nowrap}
.tin__ten{font-family:var(--font); font-size:.97rem; font-weight:600; line-height:1.4}
.tin__ten a{color:var(--text); text-decoration:none}
.tin__ten a::after{content:""; position:absolute; inset:0}
.tin__ten a:focus-visible{outline:none}
.tin:hover .tin__ten a{color:var(--link); text-decoration:underline}
.tin__tt{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:var(--k1)}
.tin__tt li{padding:2px 8px; border-radius:var(--r-sm); background:var(--surface-2); font-size:var(--c-xs); color:var(--muted); line-height:1.6}

@media (max-width:1099px){ .luoi-tin{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--k4)} }
@media (max-width:819px){ .luoi-tin{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:559px){
  /* dien thoai: the nam ngang, quet duoc nhieu tin tren mot man */
  .luoi-tin{grid-template-columns:1fr; gap:var(--k3)}
  .tin{flex-direction:row}
  .tin__anh{flex:0 0 38%}
  .tin__anh img{height:100%; aspect-ratio:auto; min-height:118px}
  .tin__nhu-cau{left:6px; top:6px; padding:1px 7px; font-size:.72rem}
  .tin__than{padding:10px 12px; gap:5px}
  .tin__hang{flex-wrap:wrap; gap:0 var(--k2)}
  .tin__gia{font-size:1.04rem}
  .tin__ten{font-size:.92rem; line-height:1.35}
}

/* The bai tu van */
.luoi-bai{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--k6)}
.bai{position:relative; display:flex; flex-direction:column; gap:var(--k3)}
.bai img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-lg); background:var(--surface-2)}
.bai time{font-size:var(--c-xs); color:var(--muted-2); font-variant-numeric:tabular-nums}
.bai h3{font-family:var(--font); font-weight:600; line-height:1.4; margin-top:-6px}
.bai h3 a{color:var(--text); text-decoration:none}
.bai h3 a::after{content:""; position:absolute; inset:0}
.bai:hover h3 a{color:var(--link); text-decoration:underline}
.bai:focus-within{outline:2px solid var(--focus); outline-offset:4px; border-radius:var(--r-lg)}
.bai h3 a:focus-visible{outline:none}
@media (max-width:1023px){ .luoi-bai{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--k4)} }
@media (max-width:559px){
  .luoi-bai{grid-template-columns:1fr}
  .bai{display:grid; grid-template-columns:38% minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:var(--k3); row-gap:2px}
  .bai img{grid-row:1 / 3; aspect-ratio:4/3}
  .bai h3{margin:0; font-size:.94rem}
}

/* ---------- 9. Loi vao nhanh: bang gia, du an, phan khu ---------- */
.hai-cot{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--k8); align-items:start}
.hai-cot--deu{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bang__duoi{margin-top:var(--k3)}
.trang-ds{display:block; padding-bottom:var(--k12)}
.bang-bao{overflow-x:auto}
.bang{width:100%; border-collapse:collapse; font-size:var(--c-sm)}
.bang caption{text-align:left; padding-bottom:var(--k3); font-family:var(--font-tieu-de); font-size:1.06rem; font-weight:600; color:var(--text)}
.bang th,.bang td{padding:11px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.bang thead th{font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted-2); border-bottom:1px solid var(--line-strong); white-space:nowrap}
.bang tbody th{font-weight:600}
.bang .so{text-align:right; white-space:nowrap}
.bang a{font-weight:600}
.bang__phu{display:block; padding-block:5px; font-weight:400; font-size:var(--c-xs)}
.ghi-chu{margin-top:var(--k4); font-size:var(--c-xs); color:var(--muted-2)}

.du-an{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line-strong)}
.du-an li{padding:var(--k4) var(--k4) var(--k4) 0; border-bottom:1px solid var(--line)}
.du-an li + li{padding-left:var(--k4); border-left:1px solid var(--line)}
.du-an h3{font-size:1.1rem}
.du-an p{margin-top:var(--k1); font-size:var(--c-sm); color:var(--muted)}
.du-an__lk{display:flex; flex-wrap:wrap; gap:0 var(--k4); margin-top:var(--k2)}
.du-an__lk a{display:inline-flex; align-items:center; min-height:var(--cham); font-weight:600; font-size:var(--c-sm)}
.khu{display:flex; flex-wrap:wrap; align-items:center; gap:var(--k2); margin-top:var(--k6)}
.khu__nhan{margin:0 var(--k2) 0 0}
.khu a{display:inline-flex; align-items:center; gap:6px; min-height:var(--cham); padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r-tron); background:var(--surface); color:var(--text); font-size:var(--c-sm); font-weight:600; text-decoration:none}
.khu a:hover{background:var(--surface-2)}
.khu a span{font-weight:400; color:var(--muted-2); font-variant-numeric:tabular-nums}
@media (max-width:1023px){
  .hai-cot{grid-template-columns:1fr}
  .du-an{grid-template-columns:1fr 1fr}
  .du-an li:nth-child(odd){padding-left:0; border-left:0}
}
@media (max-width:559px){
  .du-an{grid-template-columns:1fr}
  .du-an li + li{padding-left:0; border-left:0}
  .bang{font-size:.84rem}
  .bang th,.bang td{padding:10px 6px}
  .bang thead th{white-space:normal; letter-spacing:.05em}
  .bang tbody th{width:27%}
}

/* Khoi mo/dong noi dung dai (the details goc cua trinh duyet) */
.gap{border-top:1px solid var(--line)}
.gap:last-of-type{border-bottom:1px solid var(--line)}
.gap summary{display:flex; align-items:center; justify-content:space-between; gap:var(--k4); min-height:52px; padding:var(--k2) 0; font-family:var(--font-tieu-de); font-weight:600; font-size:1.06rem; cursor:pointer; list-style:none}
.gap summary::-webkit-details-marker{display:none}
.gap summary::after{content:""; flex:none; width:9px; height:9px; margin-right:6px; border-right:2px solid var(--muted-2); border-bottom:2px solid var(--muted-2); transform:rotate(45deg); transition:transform .15s ease}
.gap[open] summary::after{transform:rotate(-135deg)}
.gap .van-ban{padding:0 0 var(--k4)}

/* ---------- 10. Duong dan, tieu de trang ---------- */
.duong-dan{padding-top:var(--k4); font-size:var(--c-sm)}
.duong-dan ol{display:flex; flex-wrap:wrap; align-items:center}
.duong-dan li{display:flex; align-items:center; color:var(--muted)}
.duong-dan li + li::before{content:"/"; margin:0 var(--k2); color:var(--muted-2)}
.duong-dan a{display:inline-flex; align-items:center; min-height:var(--cham)}
.dau-trang{padding:var(--k2) 0 var(--k6)}
.dau-trang p{margin-top:var(--k2); color:var(--muted)}

/* ---------- 11. Trang danh sach: bo loc ---------- */
.loc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--k4)}
.loc__mo{display:none}
.loc__luoi{display:grid; grid-template-columns:auto repeat(4,minmax(0,1fr)) auto; gap:var(--k4); align-items:end}
.loc__luoi--5{grid-template-columns:auto repeat(3,minmax(0,1fr)) auto}
.loc__nut{display:flex; gap:var(--k2)}
.ket-qua{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--k3) var(--k6); margin:var(--k6) 0 var(--k4)}
.ket-qua__so{font-size:var(--c-sm); color:var(--muted)}
.ket-qua__so b{color:var(--text); font-weight:700}
.ket-qua__xep{display:flex; align-items:center; gap:var(--k3)}
.ket-qua__xep .nhan{margin:0}
.ket-qua__xep .chon{width:230px}
@media (max-width:1099px){
  .loc__luoi,.loc__luoi--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loc__luoi > :first-child,.loc__nut{grid-column:1 / -1}
  .loc__nut .nut{flex:1}
}
@media (max-width:819px){
  .js .loc__mo{display:inline-flex; width:100%}
  .js .loc:not(.mo) .loc__luoi{display:none}
  .js .loc.mo .loc__luoi{margin-top:var(--k4)}
  .js .loc{padding:var(--k3)}
  .ket-qua{margin-top:var(--k4)}
  .ket-qua__xep{width:100%}
  .ket-qua__xep .chon{flex:1; width:auto}
}
@media (max-width:479px){ .loc__luoi,.loc__luoi--5{grid-template-columns:1fr} }

/* Phan trang */
.trang{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:var(--k8)}
.trang a,.trang span{display:inline-flex; align-items:center; justify-content:center; min-width:var(--cham); min-height:var(--cham); padding:0 12px; border-radius:var(--r); font-weight:600; font-size:var(--c-sm); font-variant-numeric:tabular-nums; text-decoration:none}
.trang a{background:var(--surface); border:1px solid var(--line-strong); color:var(--text)}
.trang a:hover{background:var(--surface-2)}
.trang a[aria-current="page"],.trang .current{background:var(--brand); border:1px solid var(--brand); color:var(--on-brand)}
.trang span{color:var(--muted-2)}
.trang .trang__mo{color:var(--muted-2); border-color:var(--line); background:transparent}

/* Trang thai khong co ket qua */
.rong{display:grid; justify-items:center; gap:var(--k3); padding:var(--k8) var(--k4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); text-align:center}
.rong > .icon{width:40px; height:40px; color:var(--muted-2); stroke-width:1.5}
.rong h2{font-size:1.15rem}
.rong p{color:var(--muted)}
.rong__loc{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.rong__loc li{padding:3px 10px; border-radius:var(--r-tron); background:var(--surface-2); font-size:var(--c-sm)}
.rong__nut{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--k3); margin-top:var(--k2)}

/* ---------- 12. Trang chi tiet ---------- */
.ct{display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:var(--k8); align-items:start; padding-bottom:var(--k12)}
.ct__chinh{display:grid; gap:var(--k8); min-width:0}
.ct__tom{display:flex; flex-wrap:wrap; align-items:center; gap:var(--k3) var(--k6); padding:var(--k4) 0; border-block:1px solid var(--line)}
.ct__gia{font-size:1.75rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.ct__gia span{font-size:1rem; font-weight:400; color:var(--muted)}
.ct__tom dl{display:flex; flex-wrap:wrap; gap:var(--k2) var(--k6)}
.ct__tom dl div{display:grid}
.ct__tom dt{font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted-2)}
.ct__tom dd{font-weight:600}

.tv__chinh{position:relative; background:var(--surface-2); border-radius:var(--r-lg); overflow:hidden}
.tv__chinh img{width:100%; aspect-ratio:856/560; object-fit:cover}
.tv__dem{position:absolute; right:12px; bottom:12px; padding:3px 10px; border-radius:var(--r-tron); background:rgb(20 26 34/.82); color:#fff; font-size:var(--c-xs); font-variant-numeric:tabular-nums}
.tv__lui,.tv__toi{position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:var(--cham); height:var(--cham); border:0; border-radius:var(--r-tron); background:rgb(255 255 255/.92); color:#1b2330; box-shadow:0 2px 8px rgb(var(--shadow)/.25)}
.tv__lui{left:12px} .tv__toi{right:12px}
.tv__lui:focus-visible,.tv__toi:focus-visible{outline-color:#fff; box-shadow:0 0 0 4px #1b2330}
.tv__nho{display:flex; gap:var(--k2); margin-top:var(--k2); padding-bottom:6px; overflow-x:auto; scrollbar-width:thin}
.tv__nho button{flex:none; padding:0; border:2px solid transparent; border-radius:var(--r); background:none; overflow:hidden}
.tv__nho img{width:92px; height:62px; object-fit:cover}
.tv__nho button[aria-current="true"]{border-color:var(--brand)}
.tv__nho button:focus-visible{outline-offset:-2px}

.ct h2{margin-bottom:var(--k3)}
.ct .bang tbody th{width:38%; font-size:inherit; font-weight:400; color:var(--muted)}
.ct .bang td{font-weight:600}

.lh{position:sticky; top:var(--k4); display:grid; gap:var(--k4); padding:var(--k6); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 8px 24px rgb(var(--shadow)/.08)}
.lh h2{margin:0}
.lh__ten{color:var(--muted); font-size:var(--c-sm); margin-top:-10px}
.lh__goi{display:grid; gap:var(--k2)}
.lh form{display:grid; gap:var(--k3); padding-top:var(--k4); border-top:1px solid var(--line)}
.lh__bat-buoc{color:var(--accent-strong)}
.lh__ghi{font-size:var(--c-xs); color:var(--muted-2)}

.thanh-day{display:none}
@media (max-width:1023px){
  .ct{grid-template-columns:1fr; gap:var(--k6)}
  .ct__chinh{gap:var(--k6)}
  .lh{position:static; padding:var(--k4)}
  .ct__gia{font-size:1.5rem}
  .tv__nho img{width:76px; height:52px}
  /* thanh lien he co dinh duoi day man hinh */
  .thanh-day{display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:var(--k2); position:fixed; z-index:50; left:0; right:0; bottom:0; padding:var(--k2) var(--k3) calc(var(--k2) + env(safe-area-inset-bottom));
    background:var(--surface); border-top:1px solid var(--line-strong); box-shadow:0 -6px 18px rgb(var(--shadow)/.12)}
  .thanh-day .nut{padding-inline:8px; font-size:.86rem}
  .co-thanh-day .chan__day{padding-bottom:calc(var(--k4) + 64px)}
}

/* ---------- 13. Chan trang ---------- */
.chan{border-top:4px solid var(--chan-vach,var(--brand-soft))}
.chan__luoi{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--k8); padding-block:var(--k12)}
.chan h2{font-size:1.02rem; margin-bottom:var(--k3)}
.chan__tt{display:grid; gap:6px; font-size:var(--c-sm)}
.chan__tt b{font-weight:600}
.chan a{color:var(--text)}
.chan__lk a,.chan__tt a{display:inline-flex; align-items:center; min-height:var(--cham)}
.chan__tt li{display:flex; flex-wrap:wrap; align-items:center; gap:0 6px}
.chan__lk{font-size:var(--c-sm)}
.chan__day{background:var(--brand-deep); padding-block:var(--k4); font-size:var(--c-xs); color:var(--muted)}
.chan__day .khung{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--k2) var(--k6); align-items:center}
@media (max-width:819px){
  .chan__luoi{grid-template-columns:1fr 1fr; gap:var(--k6); padding-block:var(--k8)}
  .chan__luoi > :first-child{grid-column:1 / -1}
}

@media (max-width:559px){
  .chan__luoi{grid-template-columns:1fr}
  .trang .trang__mo{display:none}
  .muc,.muc--nen{padding-block:var(--k8)}
  .muc--nen + .muc{padding-top:var(--k8)}
  .muc__dau{margin-bottom:var(--k4)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- 14. Bo sung cho ban WordPress ---------- */
.dau__ten{font-family:var(--font-tieu-de); font-weight:700; font-size:1.1rem; color:var(--text)}
.dau__logo{text-decoration:none}
.trinh--trong + .tim{margin:var(--k6) 0 0}
a.trinh__chu:not([href]):hover span:last-child{text-decoration:none}
.tin__hang time{font-size:var(--c-xs)}

/* Thanh loc: so cot theo so hop chon dang co */
.loc__luoi--o1{grid-template-columns:minmax(0,1fr) auto}
.loc__luoi--o2{grid-template-columns:repeat(2,minmax(0,1fr)) auto}
.loc__luoi--o3{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.loc__luoi--o4{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
.loc__luoi--tim{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.loc__luoi--tim > .loc__tu-khoa{grid-column:1 / 3}
.loc__luoi--tim > fieldset{grid-column:3 / -1; justify-self:start}
.loc__luoi--tim.loc__luoi--o0{grid-template-columns:minmax(0,1fr) auto}
.loc__luoi--tim.loc__luoi--o0 > .loc__tu-khoa{grid-column:auto}
@media (max-width:1099px){
  .loc__luoi[class*="loc__luoi--o"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loc__luoi--tim > .loc__tu-khoa,.loc__luoi--tim > fieldset{grid-column:1 / -1}
}
@media (max-width:479px){ .loc__luoi[class*="loc__luoi--o"]{grid-template-columns:1fr} }
.ket-qua{min-height:var(--cham)}

.trang .dots{min-width:0; padding:0 4px}

/* Trang thai rong, trang 404 */
.rong__td{font-family:var(--font-tieu-de); font-size:1.15rem; font-weight:600; color:var(--text)}
.rong__tim{display:grid; gap:var(--k1); width:min(520px,100%); text-align:left}
.rong__tim-hang{display:flex; gap:var(--k2)}
.rong__tim-hang .o-nhap{flex:1; min-width:0}
.trang-404{padding-bottom:var(--k12)}
.gioi-thieu-muc{margin-top:var(--k12); padding-top:var(--k6); border-top:1px solid var(--line)}

/* Khoi gioi thieu trang chu: anh ben trai, chu + nut lien he ben phai */
.gt{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--k12); align-items:stretch}
.gt--khong-anh{grid-template-columns:minmax(0,1fr)}
.gt__anh{margin:0}
.gt__anh img{display:block; width:100%; height:100%; min-height:320px; object-fit:cover; border-radius:var(--r-xl)}
.gt__nd .muc__td{margin-top:0}
.gt__nut{display:flex; flex-wrap:wrap; gap:var(--k3); margin:var(--k6) 0 0}
@media (max-width:1023px){
  .gt{grid-template-columns:minmax(0,1fr); gap:var(--k6)}
  .gt__anh img{height:auto; min-height:0; aspect-ratio:16/9}
}
@media (max-width:479px){ .gt__nut .nut{flex:1 1 100%} }

/* Bai doc */
.bai-doc{padding-bottom:var(--k12)}
.bai-doc .dau-trang{padding-bottom:var(--k4)}

/* Khoi lien he: thong bao, loi tung o, bay bot */
.o-nhap[aria-invalid="true"]{border-color:var(--accent-strong); box-shadow:inset 0 0 0 1px var(--accent-strong)}
.lh__bao{display:grid; gap:var(--k1); padding:var(--k3) var(--k4); border:1px solid var(--line-strong); border-left-width:4px; border-radius:var(--r); background:var(--surface-2); font-size:var(--c-sm)}
.lh__bao--loi{border-color:var(--accent-strong)}
.lh__bao--xong{border-color:var(--brand); margin-top:var(--k2)}
.lh__loi{margin-top:var(--k1); font-size:var(--c-xs); font-weight:600; color:var(--accent-strong)}
.lh__bay{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Bieu mau Contact Form 7 (trang lien he, hoac khoi lien he khi site chon dung) */
.wpcf7 form{display:grid; gap:var(--k3)}
.wpcf7 form p{margin:0; text-align:left}
.wpcf7 label{display:block; font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--muted-2)}
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),.wpcf7 textarea,.wpcf7 select{display:block; width:100%; min-height:var(--cham); margin-top:5px; padding:11px 12px; background:var(--surface); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--r-md); font-size:.92rem; letter-spacing:0; text-transform:none; font-weight:400}
.wpcf7 textarea{min-height:120px; resize:vertical}
.wpcf7 input[type="submit"]{display:inline-flex; align-items:center; justify-content:center; min-height:var(--cham); padding:12px 20px; border:1px solid transparent; border-radius:var(--r-md); background:var(--brand); color:var(--on-brand); font-weight:700; font-size:.9rem; cursor:pointer}
.wpcf7 input[type="submit"]:hover{background:var(--brand-soft)}
.wpcf7 .wpcf7-not-valid{border-color:var(--accent-strong)}
.wpcf7 .wpcf7-not-valid-tip{display:block; margin-top:var(--k1); font-size:var(--c-xs); font-weight:600; letter-spacing:0; text-transform:none; color:var(--accent-strong)}
.wpcf7 form .wpcf7-response-output{margin:0; padding:var(--k3) var(--k4); border:1px solid var(--line-strong); border-left-width:4px; border-radius:var(--r); background:var(--surface-2); font-size:var(--c-sm)}
.wpcf7 form.init .wpcf7-response-output{display:none}
.wpcf7 .screen-reader-response{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0)}
.wpcf7 .wpcf7-spinner{display:none}
.lh__cf7{padding-top:var(--k4); border-top:1px solid var(--line)}

/* Bai doc thuong: noi dung ben trai, cot canh ben phai */
.bd{display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:var(--k8); align-items:start}
.canh{display:grid; gap:var(--k6); padding-bottom:var(--k12)}
.canh .lh{position:static}
.canh__khoi{display:grid; gap:var(--k4); padding:var(--k6); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.canh__khoi h2{margin:0}
.tin-nho{display:grid; gap:var(--k4); margin:0; padding:0; list-style:none}
.tin-nho__muc{position:relative; display:grid; grid-template-columns:88px minmax(0,1fr); gap:var(--k3); align-items:start}
.tin-nho__muc + .tin-nho__muc{padding-top:var(--k4); border-top:1px solid var(--line)}
.tin-nho__anh{display:block; width:88px; height:66px; object-fit:cover; border-radius:var(--r-sm)}
.tin-nho__ten{display:block; font-weight:600; font-size:var(--c-sm); line-height:1.4; color:var(--text); text-decoration:none}
.tin-nho__ten::after{content:""; position:absolute; inset:0}
.tin-nho__muc:hover .tin-nho__ten{color:var(--link); text-decoration:underline}
.tin-nho__gia{margin-top:var(--k1); font-weight:700; font-variant-numeric:tabular-nums}
.tin-nho__gia span{font-weight:400; font-size:var(--c-xs); color:var(--muted)}
@media (max-width:1023px){
  .bd{grid-template-columns:minmax(0,1fr); gap:var(--k6)}
  .bd .bai-doc{padding-bottom:0}
}

/* Hieu ung tai trang: thanh tien trinh tren dinh + khoi hien dan khi cuon toi.
   Khong co JS hoac nguoi dung bat "giam chuyen dong" thi moi thu hien ngay nhu binh thuong. */
.tien-trinh{position:fixed; top:0; left:0; z-index:120; width:0; height:3px; background:var(--accent); opacity:0; pointer-events:none; transition:width .35s ease, opacity .3s ease .15s}
.tien-trinh--chay{opacity:1; transition:width 8s cubic-bezier(.1,.6,.2,1), opacity .15s ease}
.tien-trinh--xong{width:100%; opacity:0}
@media (prefers-reduced-motion:no-preference){
  .cho-hien{opacity:0; transform:translateY(18px); transition:opacity .45s ease, transform .45s ease; transition-delay:var(--hien-tre,0ms)}
  .cho-hien.da-hien{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){ .tien-trinh{display:none} }

/* Dong so dien thoai phu trong khoi lien he */
.lh__phu{margin:0; font-weight:600}
.lh__phu a{font-variant-numeric:tabular-nums; white-space:nowrap}

/* Trang chu: khoi tu van du an (hotline, so phu, nut nhan tin). May tinh: thong tin ben trai, nut ben phai; dien thoai: xep doc */
.tvda__the{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--k4) var(--k8); padding:var(--k6); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg)}
.tvda__tt{display:grid; gap:var(--k1); min-width:0}
.tvda__da{color:var(--muted); font-size:var(--c-sm); margin-bottom:var(--k1)}
.tvda__dong{font-weight:600}
.tvda__dong a{font-size:1.15rem; font-weight:700; color:var(--accent-strong); white-space:nowrap}
.tvda__nut{display:flex; flex-wrap:wrap; gap:var(--k3)}
.tvda__nut .nut{min-width:128px}
@media (max-width:699px){
  .tvda__the{flex-direction:column; align-items:stretch; padding:var(--k4)}
  .tvda__nut{flex-direction:column}
  .tvda__nut .nut{width:100%}
}

/* Khoi "Tu van du an" ban noi bat: nua trai nen mau thuong hieu (so dien thoai lon + 3 nut nhan tin co mau rieng),
   nua phai la bieu mau dang ky. Cac luat duoi day ghi de bo luat cu cua khoi nay o tren. */
.tvda__the{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:stretch; gap:0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:0 14px 36px rgb(var(--shadow)/.12)}
.tvda__tt{display:grid; gap:var(--k3); align-content:center; padding:var(--k8)}
.tvda__tt h2{margin:0; font-size:1.6rem; line-height:1.2}
.tvda__da{margin:calc(var(--k2) * -1) 0 var(--k2); font-size:var(--c-sm); color:var(--muted)}
.tvda__dong{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--k1) var(--k3); margin:0; font-weight:600}
.tvda__dong span{min-width:9.5em; color:var(--muted)}
.tvda__dong a{display:inline-flex; align-items:center; gap:var(--k2); font-size:1.5rem; font-weight:700; line-height:1.2; color:var(--text); text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums}
.tvda__dong a:hover{text-decoration:underline}
.tvda__dong a .icon{width:22px; height:22px; color:var(--accent-strong)}
.tvda__nut{display:flex; flex-direction:row; flex-wrap:wrap; gap:var(--k3); margin:var(--k3) 0 0; padding:0; list-style:none}
.tvda__kenh{display:inline-flex; align-items:center; gap:var(--k2); min-height:48px; padding:6px 20px 6px 6px; border-radius:var(--r-tron); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 6px 16px rgb(0 0 0/.22); transition:transform .15s ease, box-shadow .15s ease}
.tvda__kenh:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgb(0 0 0/.3); color:#fff}
.tvda__kenh:focus-visible{outline:3px solid #fff; outline-offset:2px}
.tvda__kenh-icon{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fff}
.tvda__kenh-icon .icon{width:20px; height:20px}
.tvda__kenh--zalo{background:#0058d6}
.tvda__kenh--zalo .icon{color:#0058d6}
.tvda__kenh--viber{background:#6a4fd8}
.tvda__kenh--viber .icon{color:#6a4fd8}
.tvda__kenh--whatsapp{background:#0f7a5a}
.tvda__kenh--whatsapp .icon{color:#0f7a5a}
.tvda__bm{display:grid; gap:var(--k3); align-content:center; padding:var(--k8)}
.tvda__bm h3{margin:0; font-family:var(--font-tieu-de); font-size:1.2rem}
.tvda__dan{margin:calc(var(--k2) * -1) 0 0; color:var(--muted); font-size:var(--c-sm)}
.tvda__bm form{display:grid; gap:var(--k3)}
.tvda__o{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--k3)}
.tvda__o-rong{grid-column:1 / -1}
@media (prefers-reduced-motion:reduce){ .tvda__kenh{transition:none} .tvda__kenh:hover{transform:none} }
@media (max-width:899px){
  .tvda__the{grid-template-columns:minmax(0,1fr); padding:0}
  .tvda__tt,.tvda__bm{padding:var(--k6) var(--k4)}
  .tvda__dong a{font-size:1.3rem}
  .tvda__nut{flex-direction:row}
  .tvda__nut li{flex:1 1 30%}
  .tvda__kenh{width:100%}
}
@media (max-width:479px){
  .tvda__o{grid-template-columns:minmax(0,1fr)}
  .tvda__nut li{flex:1 1 100%}
}

/* Bang gia trang chu tren dien thoai: moi muc gia thanh mot dong hai tang, khong truot ngang.
   Tang tren: nhom (so phong ngu) ben trai, dien tich ben phai. Tang duoi: tinh trang ben trai, gia in dam ben phai. */
@media (max-width:699px){
  .bang--xep{display:block}
  .bang--xep caption{display:block}
  .bang--xep thead{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .bang--xep tbody{display:block}
  .bang--xep tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--k3); padding:var(--k3) 0; border-bottom:1px solid var(--line)}
  .bang--xep tbody tr:first-child{border-top:1px solid var(--line-strong)}
  .bang--xep tbody th,.bang--xep tbody td{display:block; width:auto; padding:0; border:0; font-size:var(--c-sm)}
  .bang--xep tbody th,.bang--xep tbody tr[data-nhom]::before{font-weight:600; color:var(--text)}
  .bang--xep tbody tr[data-nhom]::before{content:attr(data-nhom); font-size:var(--c-sm)}
  .bang--xep tbody th + td,.bang--xep tbody tr[data-nhom] td:first-child{text-align:right; color:var(--muted); white-space:nowrap}
  .bang--xep tbody td.so{grid-column:2; text-align:right; font-weight:700; font-size:1rem; color:var(--text); white-space:nowrap}
}