/* =====================================================================
* yp_home2.css — LOP PHU trang chu yellowpages.vn
* Nap SAU css_home.css => thang o cung do dac hieu.
* KHONG sua css_home.css (dung chung, tranh bay D5).
* Tien to lop moi: .ypx-* | Bien: --ypx-*
* L3: go anh nen hero, chuyen sang nen trang, chu doc duoc.
* YPVN-BUILD: home-V105 | muc luc A-Z 25 chu | 2026-08-26
* ===================================================================== */
/* =====================================================================
* V46 — KHOI `:root` CU DA DUOC GO KHOI TEP NAY.
*
* Truoc V46 tep nay giu mot ban sao `:root` cua toan bo token, va vi no nap
* SAU yp_tokens.css nen no THANG. Hau qua: moi lan doi token thi trang chu
* am tham khong theo — chi rieng trang chu.
*
* Do duoc luc go (2026-08-23), ba token dang bi keo nguoc:
* --ypx-canvas #F4F3F1 -> #FAF8F2 (lat V45)
* --ypx-line #E7E5E1 -> #EAE6DD (lat V45)
* --ypx-head-h 74px -> 62px (lat V20 — dau trang cao hon cls
* dung 12px, chinh la cho nay)
*
* Da doi chieu tung token truoc khi go: ban sao nay khai 40 token, yp_tokens
* .css cung khai 40, va KHONG token nao chi co o day. Go di khong mat gi.
*
* ⛔ DUNG KHAI LAI `:root` trong tep nay. Token la tang thap nhat cua he; mot
* tep CSS CUA MOT TRANG khong duoc quyen ghi de no. Muon doi mot token thi
* sua yp_tokens.css — mot cho, ca ba trang theo.
* Chinh dau tep yp_tokens.css da viet dieu nay tu ngay no ra doi.
* ===================================================================== */
/* ---- 1. GO ANH NEN HERO -------------------------------------------
.div_topsection goc: height:619px + background:url(...jpg)
Ghi de bang chinh selector do, khong dung !important. */
.div_topsection{
height:auto;
background:var(--ypx-surface);
background-image:none;
padding-bottom:34px;
border-bottom:1px solid var(--ypx-line);
}
/* Modal tim kiem mobile cung dung anh nen do */
.yp_timkiemtrangvang_div{
height:auto;
background:var(--ypx-surface);
background-image:none;
}
/* ---- 2. KHOI "NGANH NOI BAT" KHONG CON PHAI DE LEN ANH ------------
.margin_top-80 goc keo len -80px de chong len anh nen. */
.margin_top-80{ margin-top:26px }
/* ---- 3. CHU HEADER: tu trang sang muc ------------------------------
css_home.css dat .head_link a:link{color:#FFF} — ghi de cung
do dac hieu (0,2,1), file nay nap sau nen thang. */
.head_link a:link,
.head_link a:visited{ color:var(--ypx-ink) }
.head_link a:hover{ color:var(--ypx-action)!important; text-decoration:none }
/* Nut menu mobile (menuopen / menuclose) */
#menuopen, #menuclose{
color:var(--ypx-ink);
border-color:var(--ypx-line)!important;
}
#menuopen:hover, #menuclose:hover{ background:var(--ypx-canvas) }
/* ---- 4. KHOI TIEU DE HERO (tam thoi — hoan chinh o L5) ------------- */
.khoangcach_tren{ margin-top:44px }
.khoangcach_tren h1{ color:var(--ypx-ink) }
.khoangcach_tren .ypx-sub{ color:var(--ypx-muted) }
/* ---- 5. O TIM KIEM: tren nen trang phai co vien de ton tai ---------
.yp_box_timkiem goc: background:#FFFFFF, khong vien. */
.yp_box_timkiem{
border:1.5px solid var(--ypx-ink);
box-shadow:0 6px 26px rgba(23,21,15,.10);
}
.yp_timgi_div{ border-right-color:var(--ypx-line) }
.yp_input_timgi, .yp_input_odau{ color:var(--ypx-ink) }
.yp_input_timgi::placeholder, .yp_input_odau::placeholder{ color:var(--ypx-muted) }
/* Khoi "chi tim theo ten cong ty": bo opacity de doc duoc tren trang */
.timcongty{ opacity:1; background:var(--ypx-canvas) }
@media screen and (max-width:991px){
.div_topsection{ padding-bottom:24px }
.khoangcach_tren{ margin-top:28px }
.margin_top-80{ margin-top:18px }
.yp_box_timkiem{ border:0; box-shadow:none }
.yp_input_timgi, .yp_input_odau{ border:1.5px solid var(--ypx-ink)!important }
}
/* ===================== L5 — KHOI CHU HERO ===================== */
.khoangcach_tren{ text-align:center; max-width:1000px; margin-left:auto; margin-right:auto }
.ypx-eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-size:12px; font-weight:700; letter-spacing:.09em;
color:var(--ypx-muted); margin:0 0 14px;
}
.ypx-eyebrow::before, .ypx-eyebrow::after{
content:""; width:24px; height:3px; background:var(--ypx-brand); border-radius:2px; flex:0 0 auto;
}
.ypx-h1{
font-size:clamp(27px,3.5vw,42px); line-height:1.14; font-weight:700;
letter-spacing:-.026em; color:var(--ypx-ink);
margin:0 auto 14px; max-width:29ch;
}
.ypx-hl{
background:var(--ypx-brand); color:var(--ypx-ink);
-webkit-box-decoration-break:clone; box-decoration-break:clone;
padding:.04em .16em; border-radius:3px;
}
.ypx-lede{
font-size:clamp(15px,1.35vw,17px); line-height:1.55;
color:var(--ypx-muted); margin:0 auto 24px; max-width:var(--ypx-prose);
}
.ypx-lede b{ color:var(--ypx-ink); font-weight:600 }
@media screen and (max-width:991px){
.ypx-h1{ max-width:22ch }
.ypx-eyebrow{ font-size:12px; letter-spacing:.07em }
.ypx-eyebrow::before, .ypx-eyebrow::after{ width:16px }
}
@media screen and (max-width:575px){
.ypx-eyebrow::before, .ypx-eyebrow::after{ display:none }
}
/* ===================== L6 — O TIM KIEM + CHIPS ===================== */
.yp_box_timkiem{
width:100%; max-width:1000px; height:auto;
display:flex; align-items:stretch;
background:#fff; border:2px solid var(--ypx-ink); border-radius:var(--ypx-r-card)!important;
overflow:hidden; box-shadow:0 6px 26px rgba(23,21,15,.10);
}
.yp_box_timkiem:focus-within{ box-shadow:0 6px 26px rgba(23,21,15,.14), 0 0 0 4px rgba(14,107,115,.16) }
.yp_timgi_div{
height:auto; width:auto; flex:1 1 55%; display:flex; align-items:center; min-width:0;
border-right:1px solid var(--ypx-line); float:none;
}
.yp_odau_div{
height:auto; width:auto; flex:1 1 33%; display:flex; align-items:center; min-width:0;
background-image:none; float:none; position:relative;
}
.ypx-ico{ padding:0 11px 0 19px; flex:0 0 auto; display:flex; align-items:center; color:var(--ypx-ink) }
.ypx-ico svg{ display:block }
.yp_timgi_div > p, .yp_odau_div > p{ margin:0; flex:1; min-width:0 }
.yp_input_timgi, .yp_input_odau{
width:100%!important; height:auto; border:0; background:none;
font-family:inherit; font-size:17px; line-height:1.3;
padding:21px 40px 21px 0!important; border-radius:0;
}
.yp_timkiem_div{ height:auto; width:auto; flex:0 0 auto; padding:0; float:none }
.yp_submit_timkiem{
height:100%; width:auto; padding:0 32px;
background:var(--ypx-brand); color:var(--ypx-ink);
border:0; border-radius:0; font-size:16px; font-weight:600;
display:flex; align-items:center; gap:9px; white-space:nowrap;
}
.yp_submit_timkiem:hover{ background:var(--ypx-brand-deep) }
/* nut xoa: giu id/JS cu, chi doi vi tri cho khop o moi */
.xoakey_what, .xoakey_where{ top:50%; transform:translateY(-50%); right:11px;
height:24px; width:24px; font-size:20px; line-height:1 }
/* checkbox: can giua duoi o tim kiem */
.timcongty{ width:auto; max-width:1000px; background:none!important; opacity:1;
margin:13px auto 0!important; padding:0!important; text-align:center }
.timcongty .timcongty_check{ float:none; display:inline-block; vertical-align:middle; height:auto; width:auto }
.timcongty .timcongty_text{ float:none; display:inline-block!important; vertical-align:middle;
height:auto; margin-left:7px; color:var(--ypx-muted) }
.timcongty .timcongty_text p{ margin:0; font-size:14.5px }
.timcongty_check input{ margin:0; width:17px; height:17px; accent-color:var(--ypx-ink) }
/* dai chips */
.ypx-chips{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
gap:8px; margin-top:20px }
.ypx-chips-lb{ font-size:12.5px; color:var(--ypx-muted) }
.ypx-chip{ display:inline-block; padding:6px 13px; border-radius:999px;
border:1px solid var(--ypx-line); background:#fff;
font-size:14px; color:var(--ypx-action)!important; font-weight:500; text-decoration:none }
.ypx-chip:hover{ border-color:var(--ypx-action); background:var(--ypx-action-tint);
color:var(--ypx-action-deep)!important; text-decoration:none }
@media screen and (max-width:767px){
.yp_box_timkiem{ flex-direction:column; border-radius:var(--ypx-r-card)!important }
.yp_timgi_div{ border-right:0; border-bottom:1px solid var(--ypx-line); flex:1 1 auto }
.yp_odau_div{ flex:1 1 auto }
.yp_input_timgi, .yp_input_odau{ font-size:16px; padding:17px 38px 17px 0!important;
background:none!important; border:0!important; border-radius:0!important; height:auto }
.yp_timkiem_div{ flex:1 1 auto }
.yp_submit_timkiem{ width:100%; justify-content:center; padding:16px; border-radius:0 }
}
/* ===================== L7 — BAC NEN =====================
* PagesJaunes do duoc: nen trang #F2F3F5 (48,40%) + the trang #FFFFFF (34,24%),
* 0 vien, 0 bong, bo goc ~8px. Cau truc den tu BAC NEN, khong tu duong ke.
* Pham vi hoa bang body[data-yp-page="home"] — khong ro ri sang trang khac.
* ======================================================== */
body[data-yp-page="home"]{ background:var(--ypx-canvas) }
/* v28-L3 | HERO XUONG CANVAS.
Do tren anh chup sau L2: dai hero la 470x1920px TRANG, dong gop nhieu
nhat vao ti le 0,73. Ha xuong canvas la mot dong doi ~18% luong trang
cua ca trang. O tim kiem thanh vat the trang duy nhat cua vung nay. */
body[data-yp-page="home"] .div_topsection{
background:var(--ypx-canvas); border-bottom:0;
/* flow-root tao BFC: chan margin-top cua .khoangcach_tren thoat ra ngoai.
Can tu khi topbar tach thanh include va roi khoi khoi nay. */
display:flow-root;
}
/* Moi khoi noi dung: the trang, BO VIEN, BO BONG, bo goc 8px.
Bootstrap dat .border va .shadow-sm co !important nen buoc phai dung !important. */
body[data-yp-page="home"] .rounded-4,
body[data-yp-page="home"] .rounded-5{ border-radius:var(--ypx-r-card)!important }
body[data-yp-page="home"] .border{ border:0!important }
body[data-yp-page="home"] .shadow-sm{ box-shadow:none!important }
body[data-yp-page="home"] .bg-opacity-75{ --bs-bg-opacity:1 }
/* duong chia BEN TRONG the van giu, chi bo vien NGOAI */
body[data-yp-page="home"] .border-bottom{ border-bottom:1px solid var(--ypx-line-soft)!important }
body[data-yp-page="home"] .border-top{ border-top:1px solid var(--ypx-line-soft)!important }
/* chan trang: hoa vao canvas */
body[data-yp-page="home"] .bg_chantrang{ background:var(--ypx-canvas) }
/* o tim kiem la NGOAI LE duy nhat duoc noi khoi (§ mockup v18) */
body[data-yp-page="home"] .yp_box_timkiem{
border:2px solid var(--ypx-ink)!important;
box-shadow:0 6px 26px rgba(23,21,15,.10)!important;
}
/* khoang tho giua cac khoi */
body[data-yp-page="home"] .margin_top-80{ margin-top:26px }
body[data-yp-page="home"] .margin_top26{ margin-top:26px }
/* ===================== L8 — TIEU DE MUC + LUOI NGANH NOI BAT ===================== */
body[data-yp-page="home"] .ypx-sech{
display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
margin:0 0 18px; padding:0 2px;
}
body[data-yp-page="home"] .ypx-sech h2{
font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--ypx-ink); margin:0;
}
body[data-yp-page="home"] .ypx-sech p:not(.ypx-eb){ margin:4px 0 0; font-size:16px; color:var(--ypx-muted) }
body[data-yp-page="home"] .ypx-sech a{
font-size:15px; font-weight:500; color:var(--ypx-action)!important;
white-space:nowrap; text-decoration:none;
}
body[data-yp-page="home"] .ypx-sech a:hover{ text-decoration:underline }
/* 1 panel -> luoi 8 THE TRANG rieng biet tren canvas */
body[data-yp-page="home"] .ypx-hotgrid{
display:grid; grid-template-columns:repeat(8,1fr); gap:12px;
background:none!important; border-radius:0!important;
}
body[data-yp-page="home"] .ypx-hotgrid > .yp_sanphamhot{
width:auto!important; float:none!important; margin:0;
background:var(--ypx-surface); border-radius:var(--ypx-r-card);
/* tren 28 / duoi 8: can bang QUANG HOC, khong phai hinh hoc. Chu co
leading duoi va dau tieng Viet nen mat thay day "day" hon dinh. */
padding:28px 12px 8px!important; text-align:center; transition:background .12s;
/* luoi grid da lam moi hang cao bang nhau; can giua theo chieu doc de
the co ten 1 dong khong bi don khoang trong xuong duoi. */
display:flex; flex-direction:column; justify-content:center;
}
body[data-yp-page="home"] .ypx-hotgrid > .yp_sanphamhot:hover{ background:var(--ypx-brand-tint) }
body[data-yp-page="home"] .ypx-hotgrid .w68{ width:76px!important; max-width:100%; margin:0 auto 10px }
/* v28-L4 | TRA VIEN CHO ANH O NGANH NOI BAT.
Anh san pham co NEN TRANG chim vao the trang. Vien dung --ypx-line
(#E7E5E1) = 1,10:1 so voi trang — dung bac ma the trang noi tren
canvas (1,11:1), tuc muc "vua du thay" da chot cua ca he. */
body[data-yp-page="home"] .ypx-hotgrid .bo_tron{
border:1px solid var(--ypx-line)!important; box-shadow:none!important;
background:var(--ypx-surface);
}
body[data-yp-page="home"] .ypx-hotgrid small{ font-size:13px; font-weight:500; line-height:1.45 }
body[data-yp-page="home"] .ypx-hotgrid small a{ color:var(--ypx-ink)!important; text-decoration:none }
body[data-yp-page="home"] .ypx-hotgrid small a:hover{ color:var(--ypx-action)!important }
/* p clearfix cu khong con vai tro trong luoi */
body[data-yp-page="home"] .ypx-hotgrid > p{ display:none }
@media screen and (max-width:1199px){
body[data-yp-page="home"] .ypx-hotgrid{ grid-template-columns:repeat(4,1fr) }
body[data-yp-page="home"] .ypx-hotgrid > .yp_sanphamhot.yp_sanphamhot_hienthi{ display:block }
}
@media screen and (max-width:767px){
body[data-yp-page="home"] .ypx-hotgrid{ grid-template-columns:repeat(2,1fr) }
body[data-yp-page="home"] .ypx-sech{ flex-direction:column; align-items:flex-start; gap:8px }
}
/* ===================== L9 — 4 THE DICH VU ===================== */
body[data-yp-page="home"] .ypx-svc{
display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
body[data-yp-page="home"] .ypx-it{
display:block; background:var(--ypx-surface); border-radius:var(--ypx-r-card);
padding:20px 20px 22px; text-decoration:none; transition:background .12s;
}
body[data-yp-page="home"] .ypx-it:hover{ background:var(--ypx-brand-tint); text-decoration:none }
body[data-yp-page="home"] .ypx-it h3{
font-size:16px; font-weight:600; color:var(--ypx-ink); margin:0 0 7px;
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
body[data-yp-page="home"] .ypx-it p{
margin:0; font-size:15px; line-height:1.6; color:var(--ypx-muted);
}
body[data-yp-page="home"] .ypx-it p b{ color:var(--ypx-ink); font-weight:600 }
body[data-yp-page="home"] .ypx-tag{
font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px;
background:var(--ypx-action-tint); color:var(--ypx-action-deep); white-space:nowrap;
}
body[data-yp-page="home"] .ypx-tag-free{ background:#EAF6EE; color:var(--ypx-verify) }
@media screen and (max-width:1199px){
body[data-yp-page="home"] .ypx-svc{ grid-template-columns:repeat(2,1fr) }
}
@media screen and (max-width:575px){
body[data-yp-page="home"] .ypx-svc{ grid-template-columns:1fr }
}
/* ===================== L10 — SUA LOI + CAN BANG =====================
* 1) LOI L6: .yp_box_timkiem{overflow:hidden} cat mat dropdown TVAC.
* Dropdown la absolute BEN TRONG #auto, ma #auto nam trong o tim kiem
* -> overflow:hidden cat sach. Bo di, bu lai bang bo goc cho nut vang.
* ==================================================================== */
body[data-yp-page="home"] .yp_box_timkiem{ overflow:visible!important }
/* nut vang tu bo goc phai cho khop vien ngoai (8px - 2px vien = 6px) */
body[data-yp-page="home"] .yp_submit_timkiem{ border-radius:0 6px 6px 0 }
/* o dau tien bo goc trai */
body[data-yp-page="home"] .yp_timgi_div{ border-radius:6px 0 0 6px }
/* dropdown phai noi len tren moi thu trong hero */
body[data-yp-page="home"] .tvac-list{ z-index:1200 }
/* 2) Nhan nganh noi bat: nho lai, va DAT CHIEU CAO TOI THIEU de moi the
* bang nhau ke ca khi ten dai phai xuong dong (ten lay tu DB). */
body[data-yp-page="home"] .ypx-hotgrid small{
font-size:13px; line-height:1.4; display:block;
letter-spacing:-.005em;
}
body[data-yp-page="home"] .ypx-hotgrid .pt-2{ padding-top:6px!important }
/* 3) Khoang cach hero: o tim kiem sat cau dan hon.
* Bootstrap .mt-5 = 3rem!important, .pt-3 = 1rem!important
* -> phai dung do dac hieu cao hon + !important. */
body[data-yp-page="home"] .div_topsection .mt-5{ margin-top:8px!important }
body[data-yp-page="home"] .div_topsection .pt-3{ padding-top:0!important }
/* 4) "Chỉ tìm theo tên công ty" LUON HIEN.
* Truoc: display:none, JS bat len khi go phim -> layout nhay (CLS)
* va nguoi dung chi thay tuy chon SAU khi da go.
* !important de thang ca style inline do JS dat. */
body[data-yp-page="home"] #timcty{
display:block!important; visibility:visible!important;
margin:14px auto 0!important;
}
/* chips cach checkbox deu nhau */
body[data-yp-page="home"] .ypx-chips{ margin-top:18px }
@media screen and (max-width:767px){
body[data-yp-page="home"] .yp_submit_timkiem{ border-radius:0 0 6px 6px }
body[data-yp-page="home"] .yp_timgi_div{ border-radius:6px 6px 0 0 }
body[data-yp-page="home"] .ypx-hotgrid small{ min-height:0 }
}
/* ===================== L11 — VIEN FOCUS + CHECKBOX + TIEU DE MUC ===================== */
/* 1) VIEN KEP: o ben trong tu ve outline mac dinh -> "hop trong hop".
* Tat outline ben trong. GIU mot vach mong o khung ngoai de nguoi dung
* ban phim van biet dang o o nao (bo han la loi a11y). */
body[data-yp-page="home"] .yp_input_timgi:focus,
body[data-yp-page="home"] .yp_input_odau:focus,
body[data-yp-page="home"] .yp_input_timgi:focus-visible,
body[data-yp-page="home"] .yp_input_odau:focus-visible{
outline:none!important; box-shadow:none!important; border:0!important;
}
/* vong focus cu qua day -> thay bang mot vach mong, khong doi kich thuoc hop */
body[data-yp-page="home"] .yp_box_timkiem:focus-within{
box-shadow:0 6px 26px rgba(23,21,15,.12)!important;
border-color:var(--ypx-action)!important;
}
/* 2) Checkbox + nhan: flex can giua, bo margin thua cua
ben trong */
body[data-yp-page="home"] #timcty{
display:flex!important; justify-content:center; align-items:center; gap:9px;
width:auto; max-width:1000px; margin:14px auto 0!important; padding:0!important;
}
body[data-yp-page="home"] #timcty .timcongty_check{
float:none!important; display:flex; align-items:center; height:auto; width:auto; margin:0;
}
body[data-yp-page="home"] #timcty .timcongty_check input{
width:16px; height:16px; margin:0; accent-color:var(--ypx-ink); cursor:pointer;
}
body[data-yp-page="home"] #timcty .timcongty_text{
float:none!important; display:flex!important; align-items:center;
height:auto; margin:0!important;
}
body[data-yp-page="home"] #timcty .timcongty_text p{ margin:0; line-height:1 }
body[data-yp-page="home"] #timcty label{
margin:0; font-size:14.5px; color:var(--ypx-muted); cursor:pointer; line-height:1;
}
body[data-yp-page="home"] #timcty label:hover{ color:var(--ypx-ink) }
/* 3) Tieu de muc khong con link ben phai -> khong can space-between */
body[data-yp-page="home"] .ypx-sech{ justify-content:flex-start }
/* ===================== L12 — TINH CHINH PHAN THAN =====================
* 1) Nhan nganh noi bat: "Phòng cháy chữa cháy" (20 ky tu) van wrap.
* The ~153px, padding ngang 12x2 -> 129px chu. Ha font 13->12.5px
* VA padding ngang 12->7px => ~139px chu, du cho 20-21 ky tu.
* ==================================================================== */
body[data-yp-page="home"] .ypx-hotgrid > .yp_sanphamhot{ padding:28px 7px 8px!important }
body[data-yp-page="home"] .ypx-hotgrid small{
font-size:13px; line-height:1.38; min-height:2.76em; letter-spacing:-.005em;
}
/* 2) Sidebar NIÊN GIÁM NGÀNH — theo mockup v18:
* bo duong ke giua cac muc, thay bang nen hover bo goc. */
body[data-yp-page="home"] .yp_niengiam_left{ padding:18px 6px 12px!important }
body[data-yp-page="home"] .yp_niengiam_left h2{
font-size:15px!important; font-weight:700; letter-spacing:.04em;
padding:0 14px 12px!important; margin:0 0 6px!important;
border-bottom:1px solid var(--ypx-line-soft); color:var(--ypx-muted);
}
body[data-yp-page="home"] .yp_niengiam_left h2 i{ color:var(--ypx-ink) }
/* moi muc: bo border-bottom, dung nen hover bo goc */
body[data-yp-page="home"] .yp_niengiam_left > div{
padding:0!important; border-bottom:0!important; margin:0;
}
body[data-yp-page="home"] .yp_niengiam_left > div > a{
display:block; padding:9px 14px; border-radius:var(--ypx-r-ctrl);
font-size:14.5px; line-height:1.4; color:var(--ypx-ink)!important; text-decoration:none;
}
body[data-yp-page="home"] .yp_niengiam_left > div > a:hover{
background:var(--ypx-action-tint); color:var(--ypx-action-deep)!important; text-decoration:none;
}
/* 3) 12 the nganh — theo mockup v18 */
body[data-yp-page="home"] .yp_niengiam_content > div{ padding:18px 18px 16px!important }
body[data-yp-page="home"] .yp_niengiam_content h3{
font-size:16px!important; font-weight:700!important; margin:0 0 12px!important;
}
body[data-yp-page="home"] .yp_niengiam_content h3 a{ color:var(--ypx-ink)!important; text-decoration:none }
body[data-yp-page="home"] .yp_niengiam_content h3 a:hover{ color:var(--ypx-action)!important }
body[data-yp-page="home"] .yp_niengiam_content img{
border:0!important; box-shadow:none!important;
border-radius:var(--ypx-r-ctrl)!important; height:104px; object-fit:cover;
}
body[data-yp-page="home"] .yp_niengiam_content .mb-3{ margin-bottom:14px!important }
/* danh sach 5 muc */
body[data-yp-page="home"] .yp_niengiam_content p,
body[data-yp-page="home"] .yp_niengiam_content div > a{ font-size:14px; line-height:1.5 }
body[data-yp-page="home"] .yp_niengiam_content a{ color:var(--ypx-ink)!important; text-decoration:none }
body[data-yp-page="home"] .yp_niengiam_content a:hover{ color:var(--ypx-action)!important; text-decoration:underline }
/* "Xem thêm" */
body[data-yp-page="home"] .yp_niengiam_content a[href*="/categ/"]:last-of-type{ font-weight:500 }
@media screen and (max-width:575px){
body[data-yp-page="home"] .ypx-hotgrid small{ min-height:0; font-size:13px }
body[data-yp-page="home"] .ypx-hotgrid > .yp_sanphamhot{ padding:24px 10px 8px!important }
}
/* ===================== L13 — A→Z · SIDEBAR · CTA ===================== */
/* 1) Chip chu cai A→Z: bo goc tron han (dang vien thuoc), nen canvas */
body[data-yp-page="home"] #muclucnganhnghe_link{
border:0!important; box-shadow:none!important;
background:var(--ypx-canvas)!important; color:var(--ypx-ink)!important;
border-radius:999px!important; min-width:38px; text-align:center;
padding:8px 12px!important; margin:0 4px 10px 0!important;
font-size:15px; font-weight:500; text-decoration:none;
}
body[data-yp-page="home"] #muclucnganhnghe_link:hover{
background:var(--ypx-action)!important; color:#fff!important; text-decoration:none;
}
body[data-yp-page="home"] .rounded-4 h2 i.fa-seedling{ color:var(--ypx-brand-deep) }
/* 2) Sidebar NIÊN GIÁM NGÀNH: gioi han chieu cao + cuon (nhu mockup v18)
* -> cot phai khong bi keo dai theo chieu dai cua sidebar */
body[data-yp-page="home"] .yp_niengiam_left{
max-height:648px; overflow-y:auto; overflow-x:hidden;
scrollbar-width:thin; scrollbar-color:#CBD0D6 transparent;
}
body[data-yp-page="home"] .yp_niengiam_left::-webkit-scrollbar{ width:6px }
body[data-yp-page="home"] .yp_niengiam_left::-webkit-scrollbar-thumb{
background:#CBD0D6; border-radius:999px;
}
body[data-yp-page="home"] .yp_niengiam_left::-webkit-scrollbar-track{ background:transparent }
/* 3) Nut "Đăng ký miễn phí" o dai doanh nghiep: vang -> cam CTA.
* Do duoc: chu den tren #ffde06 = 14,12:1 nhung tren NEN TRANG mang vang
* khong con noi len; cam #C2410C voi chu trang = 5,18:1 AA va cung ho
* mau voi nut CTA o header -> mot ngon ngu duy nhat cho "dang ky". */
body[data-yp-page="home"] .buttom_bg_footer_signup{
background:var(--ypx-cta)!important; color:#fff!important;
border-radius:var(--ypx-r-ctrl)!important; padding:11px 20px!important;
font-size:15px!important;
}
body[data-yp-page="home"] .buttom_bg_footer_signup:hover{ background:var(--ypx-cta-deep)!important }
body[data-yp-page="home"] .foot_signup3 a{ text-decoration:none }
@media screen and (max-width:1279px){
body[data-yp-page="home"] .yp_niengiam_left{ max-height:none; overflow:visible }
}
/* ===================== L14 — THE NGANH · CHAN TRANG =====================
* Doi chieu mockup v18: chan trang la mang TRANG co vien tren, khong phai
* canvas (L7 dat nham). Danh sach 5 muc trong the nganh co so thu tu mo.
* ====================================================================== */
/* 1) Chan trang: TRANG + vien tren (v18: .foot{background:#fff;border-top:1px}) */
body[data-yp-page="home"] .bg_chantrang{
background:var(--ypx-surface)!important;
border-top:1px solid var(--ypx-line);
margin-top:40px!important; padding:28px 0 40px;
}
body[data-yp-page="home"] .bg_chantrang .yp_chantrang{
border-bottom:1px solid var(--ypx-line-soft)!important;
padding-top:0!important; padding-bottom:22px!important;
}
body[data-yp-page="home"] .bg_chantrang .yp_chantrang a{
font-size:14.5px; font-weight:500; color:var(--ypx-ink)!important; text-decoration:none;
}
body[data-yp-page="home"] .bg_chantrang .yp_chantrang a:hover{ color:var(--ypx-action)!important }
body[data-yp-page="home"] .bg_chantrang p:last-child{
font-size:14px; line-height:1.85; color:var(--ypx-muted); padding-top:22px!important;
}
body[data-yp-page="home"] .bg_chantrang small{ font-size:13px; color:var(--ypx-muted) }
/* 2) Danh sach 5 muc trong the nganh: so thu tu mo, dong gian deu */
body[data-yp-page="home"] .yp_niengiam_content ol,
body[data-yp-page="home"] .yp_niengiam_content ul{
list-style:none; margin:0 0 12px; padding:0;
}
body[data-yp-page="home"] .yp_niengiam_content li{
font-size:14px; line-height:1.5; padding:5px 0; color:var(--ypx-ink);
}
/* markup hien dung
/
danh so san trong chuoi -> chi can gian dong */
body[data-yp-page="home"] .yp_niengiam_content .mb-3 ~ p,
body[data-yp-page="home"] .yp_niengiam_content .mb-3 ~ div{
font-size:14px; line-height:1.5; margin-bottom:0;
}
/* 3) "Xem thêm": teal, dam vua, tach khoi danh sach */
body[data-yp-page="home"] .yp_niengiam_content a[href*="/categ/"]{
color:var(--ypx-ink)!important;
}
body[data-yp-page="home"] .yp_niengiam_content a[href*="/categ/"]:hover{
color:var(--ypx-action)!important;
}
/* 4) Khoi A→Z: dem thoang hon, dung chuan .az cua mockup */
body[data-yp-page="home"] .rounded-4 > h2.text-center{ padding-top:8px }
/* =====================================================================
* L15 - VO 1480. Theo YPVN_HIENCHUONG_KHUNG_3TRANG.md
*
* Luat 1 - vo co gian co tran, KHONG bac thang.
* Fluid duoi 1480, dong tran tren 1480. Khong them truy van nao.
* padding-inline:24px can !important vi 5/7 container mang .p-2
* (padding .5rem !important = 8px). Do dac hieu (0,3,1) > .p-2 (0,1,0)
* nen ta thang. padding-inline KHONG dung toi padding-top/bottom,
* nen .p-2 va .pt-0 giu nguyen vai tro theo chieu doc.
*
* Luat 2 - ray Nien giam tu 20%% thanh 260px co dinh.
* Chi ap tu 1280 tro len: do la bac ma css_home.css dung 20/80.
* Bac 1279 (28/72), 968 (39/61), 765 (100/100) GIU NGUYEN - cham vao
* la vo mobile. Nguong 1280 la mat sau cua max-width:1279 DA CO trong
* ca css_home.css lan yp_home2.css => KHONG them so nao moi.
*
* Luat 3 - .ypx-lede 78ch -> var(--ypx-prose).
* ===================================================================== */
body[data-yp-page="home"] .container-xxl{
max-width:var(--ypx-shell);
padding-inline:24px!important;
}
@media screen and (min-width:1280px){
body[data-yp-page="home"] .yp_niengiam_left { width:var(--ypx-rail) }
body[data-yp-page="home"] .yp_niengiam_right{ width:calc(100% - var(--ypx-rail)) }
}
/* =====================================================================
* L18 — KHOI "MUC LUC NGANH NGHE A -> Z"
* Nguon chuan: ypvn_mockup_trangchu_v25.html §.az (dong 155-165, 543-553)
* Khong so nao tu che. Nguong 575 lay dung tu mockup.
*
* VI SAO BO id="muclucnganhnghe_link":
* id do duoc in ra 22 lan trong vong lap => 22 phan tu trung id, HTML sai.
* Luat cua no nam trong css_home.css (dung chung 5 site, CAM SUA). Go id
* khoi markup la cach duy nhat vo hieu hoa luat do ma khong dung file chung.
*
* .ypx-eb = eyebrow CAP MUC (teal, khong gach vang) — khac .ypx-eyebrow cua
* hero (co 2 gach vang). Dung lai duoc cho L19 / L20.
* ===================================================================== */
/* v28-L3 | A→Z BO THE.
22 o chu cai VON DA LA THE. O v25 chung la o xam nam trong mot the
trang lon hon — bac nen dao nguoc, nen khong o nao doc ra. Gio: o
TRANG noi tren canvas, the bao bien mat.
Rieng cho nay ruot 1320 mua duoc mot thu: long 1272 chia dung 22 o
(1272 - 21x8) / 22 = 50,2px — ca bang chu cai gon MOT hang cang het
be ngang, dung hinh gay rang cua mot cuon danh ba in. */
body[data-yp-page="home"] .ypx-az{
background:none; border-radius:0; padding:0;
}
body[data-yp-page="home"] .ypx-az-keys{
display:grid!important; grid-template-columns:repeat(25,minmax(0,1fr));
gap:8px; margin-top:22px;
}
body[data-yp-page="home"] .ypx-az-alt{
border-top:0; padding-top:0; margin-top:22px;
}
body[data-yp-page="home"] .ypx-eb{
font-size:12px; font-weight:700; letter-spacing:.11em;
color:var(--ypx-muted); margin:0 0 10px; text-transform:uppercase;
}
body[data-yp-page="home"] .ypx-az h2{
font-size:24px; font-weight:700; letter-spacing:-.015em;
color:var(--ypx-ink); margin:0;
}
body[data-yp-page="home"] .ypx-az-ld{
margin:8px 0 0; font-size:16px; line-height:1.55;
color:var(--ypx-muted); max-width:760px;
}
body[data-yp-page="home"] .ypx-az-ld b{ color:var(--ypx-ink); font-weight:600 }
/* o chu cai 44x44 — Luat 2: px co dinh, khong % */
body[data-yp-page="home"] .ypx-az-keys{
display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;
}
body[data-yp-page="home"] .ypx-az-keys a{
min-width:44px; height:44px; display:grid; place-items:center;
border-radius:var(--ypx-r-ctrl); background:var(--ypx-canvas);
font-size:16px; font-weight:600; text-decoration:none;
color:var(--ypx-ink)!important; transition:background .12s;
}
/* css_home.css dat a:hover{color:#ff6600!important} => buoc phai !important */
body[data-yp-page="home"] .ypx-az-keys a:hover{
background:var(--ypx-action); color:#fff!important; text-decoration:none;
}
body[data-yp-page="home"] .ypx-az-alt{
margin:20px 0 0; padding-top:16px;
border-top:1px solid var(--ypx-line-soft);
font-size:15px; line-height:1.6; color:var(--ypx-muted);
}
body[data-yp-page="home"] .ypx-az-alt b{ color:var(--ypx-ink); font-weight:600 }
body[data-yp-page="home"] .ypx-az-alt a{ color:var(--ypx-action)!important; font-weight:500 }
body[data-yp-page="home"] .ypx-az-alt a:hover{ text-decoration:underline }
@media screen and (max-width:575px){
body[data-yp-page="home"] .ypx-az{ padding:22px 18px }
}
/* =====================================================================
* L19 — KHOI "DANH CHO DOANH NGHIEP"
* Nguon chuan: ypvn_mockup_trangchu_v25.html §.biz (dong 168-186, 555-581)
* Nguong 1279 va 991 LAY DUNG tu mockup — khong nguong moi.
*
* VI SAO GO .foot_signup1/2/3 KHOI MARKUP:
* css_home.css dat width:22%/62%/16% co !important, dung chung 5 site nen
* CAM SUA. Go lop khoi markup la cach duy nhat vo hieu hoa ma khong dung
* file chung — cung cach da dung cho #muclucnganhnghe_link o L18.
* Luat .buttom_bg_footer_signup (dong ~514) va .foot_signup3 a (~520) tu
* nay thanh luat chet, VO HAI. Don o mot lat rieng, khong don o day.
* ===================================================================== */
/* v28-L3 | DAI DOANH NGHIEP BO THE + LAT BAC NEN DAO.
v25 co the XAM (.ypx-bizr) nam trong panel TRANG — bac nen lon nguoc.
Gio: noi dung nam thang tren canvas, .ypx-bizr la the TRANG noi len.
Tren canvas, the trang KHONG CAN VIEN de ton tai (1,11:1 la du). */
body[data-yp-page="home"] .ypx-biz{
background:none; border-radius:0;
padding:0;
display:grid; grid-template-columns:minmax(0,1fr) 380px;
gap:40px; align-items:start;
}
body[data-yp-page="home"] .ypx-biz h2{
font-size:24px; font-weight:700; letter-spacing:-.02em;
line-height:1.25; color:var(--ypx-ink); margin:0;
}
body[data-yp-page="home"] .ypx-biz-sub{
margin:9px 0 0; font-size:16px; line-height:1.55;
color:var(--ypx-muted); max-width:var(--ypx-prose);
}
/* khoi troi 1 -> 5 */
body[data-yp-page="home"] .ypx-once{
margin-top:22px; padding:16px 18px;
background:var(--ypx-action-tint); border-radius:var(--ypx-r-card);
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
body[data-yp-page="home"] .ypx-once-b{
font-size:28px; font-weight:700; color:var(--ypx-action-deep);
letter-spacing:-.03em; line-height:1; flex:0 0 auto;
}
body[data-yp-page="home"] .ypx-once-t{
font-size:15px; color:var(--ypx-action-deep); line-height:1.45;
}
/* 4 gach dau dong — cham vuong vang, 2 cot */
body[data-yp-page="home"] .ypx-biz-ul{
list-style:none; margin:20px 0 0; padding:0;
display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px;
}
body[data-yp-page="home"] .ypx-biz-ul li{
font-size:15px; line-height:1.5; color:var(--ypx-muted);
padding-inline-start:22px; position:relative;
}
body[data-yp-page="home"] .ypx-biz-ul li::before{
content:""; position:absolute; inset-inline-start:0; top:7px;
width:8px; height:8px; border-radius:2px; background:var(--ypx-brand);
}
body[data-yp-page="home"] .ypx-biz-ul li b{ color:var(--ypx-ink); font-weight:600 }
/* the gia ben phai */
body[data-yp-page="home"] .ypx-bizr{
background:var(--ypx-surface); border-radius:var(--ypx-r-card); padding:24px;
}
body[data-yp-page="home"] .ypx-pr{ font-size:13px; color:var(--ypx-muted); margin:0 0 4px }
body[data-yp-page="home"] .ypx-mt{ margin-top:16px }
body[data-yp-page="home"] .ypx-p1{ font-size:16px; font-weight:700; color:var(--ypx-ink); margin:0 0 14px }
body[data-yp-page="home"] .ypx-or{
text-align:center; font-size:12.5px; color:var(--ypx-faint); margin:14px 0 10px;
}
body[data-yp-page="home"] .ypx-tel{ font-size:14px; color:var(--ypx-muted); line-height:1.7; margin:0 }
body[data-yp-page="home"] .ypx-tel a{ color:var(--ypx-action)!important; font-weight:600 }
body[data-yp-page="home"] .ypx-tel a:hover{ text-decoration:underline }
/* nut — dung chung, se tai su dung o L20 */
body[data-yp-page="home"] .ypx-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
border-radius:var(--ypx-r-ctrl); font-weight:600; font-size:15px;
padding:11px 20px; border:1px solid transparent; cursor:pointer;
line-height:1.2; text-decoration:none; width:100%; margin-bottom:10px;
}
body[data-yp-page="home"] .ypx-btn-cta{ background:var(--ypx-cta); color:#fff!important }
body[data-yp-page="home"] .ypx-btn-cta:hover{ background:var(--ypx-cta-deep); color:#fff!important; text-decoration:none }
body[data-yp-page="home"] .ypx-btn-gh{
background:var(--ypx-surface); color:var(--ypx-action)!important; border-color:var(--ypx-action);
}
body[data-yp-page="home"] .ypx-btn-gh:hover{ background:var(--ypx-action-tint); text-decoration:none }
@media screen and (max-width:1279px){
body[data-yp-page="home"] .ypx-biz{ grid-template-columns:1fr; gap:26px }
body[data-yp-page="home"] .ypx-bizr{ max-width:460px }
}
@media screen and (max-width:991px){
body[data-yp-page="home"] .ypx-biz{ padding:22px 18px }
body[data-yp-page="home"] .ypx-biz-ul{ grid-template-columns:1fr }
}
/* =====================================================================
* L21 — LINK DAY THE NIEN GIAM
* Thay style="color:#2b78c1" go cung trong markup (ngoai he token).
* Teal la mau HANH DONG cua nguoi tim (§4 ban giao, AA 6,23:1).
* ===================================================================== */
body[data-yp-page="home"] .ypx-ng-more a{
color:var(--ypx-action)!important; font-weight:500; text-decoration:none;
}
body[data-yp-page="home"] .ypx-ng-more a:hover{
color:var(--ypx-action-deep)!important; text-decoration:underline;
}
body[data-yp-page="home"] .ypx-ng-more b{ font-weight:700 }
/* =====================================================================
* L23a — LUOI THE NIEN GIAM: float -> CSS grid
*
* VI SAO: L21 bo cat chu 36 -> ten nganh dai xuong 2-3 dong -> the cao
* khong deu -> `float:left` vuong lai, de lai O TRONG giua luoi.
* Grid tu can bang chieu cao tung hang nen khong the thung.
*
* KHONG dung .border/.shadow-sm/.rounded-4 o day — chung da bi trung hoa
* tu L7/L15 roi (xem §5 ban va sau L18).
*
* Nguong 1279 va 991 la nguong DA CO trong he (§4.2) — khong them nguong moi.
* css_home.css dat .yp_niengiam_content{width:33.33%} + float trong markup,
* ca hai deu phai bi vo hieu hoa bang !important + do dac hieu cao hon.
*
* Con so cot van la 3 o lat nay. L23 doi thanh 4 khi bo ray — tach rieng
* de doi HE THONG DAN HANG va doi CAU TRUC khong lan vao nhau.
* ===================================================================== */
body[data-yp-page="home"] .yp_niengiam_right{
display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
align-items:stretch;
}
body[data-yp-page="home"] .yp_niengiam_content{
width:auto!important; float:none!important;
padding-left:0!important; margin-bottom:0!important;
display:flex;
}
/* the tu keo cao bang hang */
body[data-yp-page="home"] .yp_niengiam_content > div{
width:100%; display:flex; flex-direction:column;
}
/* danh sach nganh nghe an het khoang du -> link day the luon nam sat day */
body[data-yp-page="home"] .yp_niengiam_content .mb-3 ~ div:not(.ypx-ng-more){ flex:0 0 auto }
body[data-yp-page="home"] .yp_niengiam_content .ypx-ng-more{ margin-top:auto }
@media screen and (max-width:1279px){
body[data-yp-page="home"] .yp_niengiam_right{ grid-template-columns:repeat(2,1fr) }
}
@media screen and (max-width:991px){
body[data-yp-page="home"] .yp_niengiam_right{ grid-template-columns:1fr }
}
/* =====================================================================
* DEPLOY A — KHOI NIEN GIAM v25
* Nguon: mockup v25 §.grid/.gc/.ix (dong 118-152, 471-541)
*
* ANH: ti le THAT do duoc tu file la 250x76 = 3,2895:1, KHONG phai 3,4
* nhu dac ta doan. O 4 cot, long vo 1432 - 3x16 khe = 346px moi o.
* 346 x 76/250 = 105,18 -> 105px. Mockup ghi 346/102 la SAI, da sua.
* Phong to 346/250 = 1,384x — hien tai da la 1,327x nen chenh 4%, khong
* thay bang mat. Khung 346:105 = 3,295 gan trung nguon 3,289 nen HET CAT.
*
* Dem chu: o 4 cot the rong 346, dem 16px moi ben -> chu 314px.
* (Dem cu la 18px -> chi con 310px, qua sat.)
* ===================================================================== */
body[data-yp-page="home"] .ypx-ng-head{ margin-bottom:18px }
body[data-yp-page="home"] .ypx-ng-head h2{
font-size:24px; font-weight:700; letter-spacing:-.02em;
line-height:1.25; color:var(--ypx-ink); margin:0;
}
body[data-yp-page="home"] .ypx-ng-ld{
margin:8px 0 0; font-size:16px; line-height:1.55;
color:var(--ypx-muted); max-width:var(--ypx-prose);
}
body[data-yp-page="home"] .ypx-ng-ld b{ color:var(--ypx-ink); font-weight:600 }
/* luoi 4 cot — khe 16px, o 346px */
body[data-yp-page="home"] .ypx-nggrid{
display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
align-items:stretch;
}
body[data-yp-page="home"] .ypx-gc{
background:var(--ypx-surface); border-radius:var(--ypx-r-card);
overflow:hidden; display:flex; flex-direction:column;
}
/* anh tran het mep tren — overflow:hidden cua .ypx-gc bo goc cho no */
body[data-yp-page="home"] .ypx-gc-img{
display:block; aspect-ratio:346/105; background:var(--ypx-canvas);
}
body[data-yp-page="home"] .ypx-gc-img img{
width:100%; height:100%; object-fit:cover; display:block;
border:0!important; box-shadow:none!important; border-radius:0!important;
}
body[data-yp-page="home"] .ypx-gc-body{
padding:15px 16px 16px; display:flex; flex-direction:column; flex:1;
}
body[data-yp-page="home"] .ypx-gc h3{
font-size:18px; font-weight:700; line-height:1.3;
letter-spacing:-.012em; margin:0;
}
body[data-yp-page="home"] .ypx-gc h3 a{ color:var(--ypx-ink)!important; text-decoration:none }
body[data-yp-page="home"] .ypx-gc h3 a:hover{ color:var(--ypx-action)!important }
/* so lon + gach teal phia tren, chi rong bang chinh no */
body[data-yp-page="home"] .ypx-gc-n{
margin:11px 0 0; padding-top:11px;
border-top:2px solid var(--ypx-action); align-self:flex-start;
font-size:12.5px; color:var(--ypx-muted); line-height:1.2;
}
body[data-yp-page="home"] .ypx-gc-n b{
font-size:24px; font-weight:700; color:var(--ypx-ink);
font-variant-numeric:tabular-nums; letter-spacing:-.02em;
margin-inline-end:5px;
}
body[data-yp-page="home"] .ypx-gc-list{
list-style:none; margin:14px 0 0; padding:0; flex:1;
}
body[data-yp-page="home"] .ypx-gc-list li{ padding:4px 0 }
body[data-yp-page="home"] .ypx-gc-list a{
font-size:13px; line-height:1.5; color:var(--ypx-muted)!important;
display:block; text-decoration:none;
}
body[data-yp-page="home"] .ypx-gc-list a:hover{
color:var(--ypx-action)!important; text-decoration:underline;
}
/* link day the luon nam sat day du the cao khac nhau */
body[data-yp-page="home"] .ypx-gc-more{
margin-top:14px; padding-top:12px;
border-top:1px solid var(--ypx-line-soft);
font-size:13px; font-weight:500;
color:var(--ypx-action)!important; text-decoration:none;
}
body[data-yp-page="home"] .ypx-gc-more:hover{ text-decoration:underline }
body[data-yp-page="home"] .ypx-gc-more b{ font-weight:700 }
/* ---- muc luc toan bo nien giam ---- */
body[data-yp-page="home"] .ypx-ix{
margin-top:16px; background:var(--ypx-surface);
border-radius:var(--ypx-r-card); padding:22px 24px 24px;
}
body[data-yp-page="home"] .ypx-ix-h{
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
padding-bottom:14px; border-bottom:1px solid var(--ypx-line-soft);
margin-bottom:12px;
}
body[data-yp-page="home"] .ypx-ix-h h3{
font-size:15px; font-weight:700; letter-spacing:.02em;
color:var(--ypx-ink); margin:0;
}
body[data-yp-page="home"] .ypx-ix-sub{ font-size:12.5px; color:var(--ypx-muted) }
body[data-yp-page="home"] .ypx-ix-list{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(4,1fr); column-gap:24px;
}
body[data-yp-page="home"] .ypx-ix-list a{
display:flex; align-items:center; gap:9px; padding:6px 9px;
border-radius:var(--ypx-r-ctrl); text-decoration:none;
}
body[data-yp-page="home"] .ypx-ix-list a:hover{ background:var(--ypx-action-tint) }
body[data-yp-page="home"] .ypx-ix-list .nm{
flex:0 0 auto; font-size:14.5px; line-height:1.45; color:var(--ypx-ink);
}
body[data-yp-page="home"] .ypx-ix-list .dot{
flex:1 1 auto; min-width:10px; height:0;
border-bottom:1px dotted #C4C8CE; margin-bottom:3px;
}
body[data-yp-page="home"] .ypx-ix-list .n{
flex:0 0 auto; font-size:13px; color:var(--ypx-muted);
font-variant-numeric:tabular-nums;
}
body[data-yp-page="home"] .ypx-ix-list a:hover .nm,
body[data-yp-page="home"] .ypx-ix-list a:hover .n{ color:var(--ypx-action-deep) }
@media screen and (max-width:1279px){
body[data-yp-page="home"] .ypx-nggrid{ grid-template-columns:repeat(3,1fr) }
body[data-yp-page="home"] .ypx-ix-list{ grid-template-columns:repeat(3,1fr) }
}
@media screen and (max-width:991px){
body[data-yp-page="home"] .ypx-nggrid{ grid-template-columns:repeat(2,1fr) }
body[data-yp-page="home"] .ypx-ix-list{ grid-template-columns:repeat(2,1fr) }
body[data-yp-page="home"] .ypx-ix{ padding:18px }
}
@media screen and (max-width:575px){
body[data-yp-page="home"] .ypx-nggrid{ grid-template-columns:1fr }
body[data-yp-page="home"] .ypx-ix-list{ grid-template-columns:1fr }
}
/* =====================================================================
* DEPLOY B — KHOI "VE TRANG VANG + FAQ"
* Nguon: mockup v25 §.abt/.stats/.edit/.faq (dong 188-211, 584-636)
* FAQ dung / — 0 dong JS.
* ===================================================================== */
body[data-yp-page="home"] .ypx-abt{
background:var(--ypx-surface); border-radius:var(--ypx-r-card);
padding:30px 32px;
}
body[data-yp-page="home"] .ypx-abt h2{
font-size:24px; font-weight:700; letter-spacing:-.015em;
color:var(--ypx-ink); margin:0;
}
body[data-yp-page="home"] .ypx-stats{
display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0 24px;
}
body[data-yp-page="home"] .ypx-stat{ padding-top:12px; border-top:2px solid var(--ypx-action) }
body[data-yp-page="home"] .ypx-stat b{
display:block; font-size:26px; font-weight:700; letter-spacing:-.025em;
font-variant-numeric:tabular-nums; line-height:1.15; color:var(--ypx-ink);
}
body[data-yp-page="home"] .ypx-stat span{ font-size:12.5px; color:var(--ypx-muted) }
body[data-yp-page="home"] .ypx-edit{
display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
padding-top:22px; border-top:1px solid var(--ypx-line-soft);
}
body[data-yp-page="home"] .ypx-edit h4{
font-size:15px; font-weight:700; margin:0 0 6px; color:var(--ypx-ink);
display:flex; align-items:center; gap:8px;
}
/* cham xanh "da xac minh" — nguoi dung dau tien cua --ypx-verify tren trang */
body[data-yp-page="home"] .ypx-edit h4 i{
width:7px; height:7px; border-radius:50%; background:var(--ypx-verify); flex:0 0 auto;
}
body[data-yp-page="home"] .ypx-edit p{ margin:0; font-size:15px; line-height:1.6; color:var(--ypx-muted) }
body[data-yp-page="home"] .ypx-edit p b{ color:var(--ypx-ink); font-weight:600 }
/* v28-L3 | FAQ TACH RA THANH HANG TRANG TREN CANVAS.
Truoc: 6 cau nam chung trong khoi trang cua .ypx-abt, dau + o mep phai
cach cau hoi 1.342px. Mat quet ngang thoai mai ~800px; xa hon the thi
nao doc ra HAI vat khong lien quan. Dua dau sang TRAI, o co dinh 18px:
khoang cach con 12px va no thang hang doc. */
body[data-yp-page="home"] .ypx-faq{
margin-top:16px; padding-top:0; border-top:0;
}
body[data-yp-page="home"] .ypx-faq details{
background:var(--ypx-surface); border-radius:var(--ypx-r-card);
border-bottom:0!important; margin-bottom:8px; padding:0 20px;
}
body[data-yp-page="home"] .ypx-faq h3{
font-size:12px; font-weight:700; letter-spacing:.02em;
color:var(--ypx-ink); margin:0 0 12px;
}
body[data-yp-page="home"] .ypx-faq details{ border-bottom:1px solid var(--ypx-line-soft) }
body[data-yp-page="home"] .ypx-faq summary{
cursor:pointer; list-style:none; padding:16px 0 16px 30px;
font-size:16px; font-weight:600; color:var(--ypx-ink); position:relative;
}
body[data-yp-page="home"] .ypx-faq summary::-webkit-details-marker{ display:none }
body[data-yp-page="home"] .ypx-faq summary::after{
content:"+"; position:absolute; inset-inline-start:0; inset-inline-end:auto;
top:14px; width:18px; text-align:center;
font-size:19px; font-weight:400; color:var(--ypx-action);
}
body[data-yp-page="home"] .ypx-faq details[open] summary::after{ content:"\2212" }
body[data-yp-page="home"] .ypx-faq summary:hover{ color:var(--ypx-action) }
body[data-yp-page="home"] .ypx-fa{
padding:0 30px 15px 0; font-size:15px; line-height:1.65;
color:var(--ypx-muted); max-width:900px;
}
body[data-yp-page="home"] .ypx-fa b{ color:var(--ypx-ink); font-weight:600 }
body[data-yp-page="home"] .ypx-fa a{ color:var(--ypx-action)!important; font-weight:600 }
/* ---------------------------------------------------------------------
* Ten nien giam ve title case dong deu.
* CSDL dang lan lon: "May mac" / "Cong Nghiep - Thiet bi" / "Noi That".
* capitalize AN TOAN cho tieng Viet; uppercase thi KHONG (§2: dau chong len nhau).
* ------------------------------------------------------------------- */
body[data-yp-page="home"] .ypx-gc h3,
body[data-yp-page="home"] .ypx-ix-list .nm{ text-transform:capitalize }
@media screen and (max-width:991px){
body[data-yp-page="home"] .ypx-stats{ grid-template-columns:repeat(2,1fr) }
body[data-yp-page="home"] .ypx-edit{ grid-template-columns:1fr; gap:18px }
}
@media screen and (max-width:575px){
body[data-yp-page="home"] .ypx-abt{ padding:22px 18px }
body[data-yp-page="home"] .ypx-stats{ grid-template-columns:1fr }
}
/* =====================================================================
* v28-L3 | BO SUNG — doan tra loi FAQ thut theo dau moi o ben trai,
* va thanh do bac nen: DUNG hai the toan chieu ngang lam dau cham cau
* (bang 34 nien giam + khoi Ve Trang Vang). Nhieu hon la thanh dashboard.
* ===================================================================== */
body[data-yp-page="home"] .ypx-fa{ padding-inline-start:30px; padding-bottom:16px }
/* ⚠ .ypx-az-keys a duoc khai LAI o phia duoi tep voi background:canvas.
Cung do dac hieu => luat DUNG SAU thang. Nen ghi de PHAI o cuoi tep,
khong the dat canh khoi .ypx-az o tren. Day dung la bay do dac hieu
da can o mockup — lan nay no la thu tu nguon, khong phai so do dac hieu. */
body[data-yp-page="home"] .ypx-az-keys a{
min-width:0; background:var(--ypx-surface);
}
@media screen and (max-width:991px){
body[data-yp-page="home"] .ypx-az{ padding:0 }
body[data-yp-page="home"] .ypx-biz{ padding:0 }
body[data-yp-page="home"] .ypx-az-keys{
display:flex!important; flex-wrap:wrap;
}
body[data-yp-page="home"] .ypx-az-keys a{ min-width:44px }
}
/* =====================================================================
* v28-L5 | O TIM KIEM O CHE DO DIEN THOAI
* ---------------------------------------------------------------------
* Truoc: ba phan dinh lien trong MOT hop co vien chung, ngan cach bang
* ke ngang. Tren man hinh hep no doc ra la "mot khoi" nen mat khong
* biet phai cham vao dau.
* Sau: ba VAT THE RIENG — hai vien thuoc trang + mot nut. Moi vat the
* mot viec, cham nham gan nhu khong the.
*
* Ban KHONG doi mau nut sang den nhu anh mau. Ly do: anh mau co nen
* VANG BAO HOA nen nut vang se bien mat, buoc phai dung den. Nen cua
* ta la xam nhat => nut vang la vat the noi nhat trang. Doi sang den
* vua mat nhat quan voi ban may tinh, vua GIAM do noi bat.
* Neu van muon den: doi 2 dong danh dau [NUT DEN] o duoi.
* ===================================================================== */
@media screen and (max-width:767px){
/* hop bao chi con la khung xep chong — khong ve gi */
body[data-yp-page="home"] .yp_box_timkiem{
background:none!important; border:0!important; box-shadow:none!important;
border-radius:0!important; gap:10px; overflow:visible!important;
}
/* hai o nhap thanh hai vien thuoc rieng */
body[data-yp-page="home"] .yp_timgi_div,
body[data-yp-page="home"] .yp_odau_div{
background:var(--ypx-surface); border:1.5px solid var(--ypx-ink)!important;
border-bottom:1.5px solid var(--ypx-ink)!important;
border-radius:999px!important; min-height:56px; padding-inline-end:4px;
}
body[data-yp-page="home"] .yp_input_timgi,
body[data-yp-page="home"] .yp_input_odau{
padding:16px 40px 16px 0!important; /* 40 chua nut xoa */
}
body[data-yp-page="home"] .ypx-ico{ padding:0 12px 0 20px }
/* nut: kin be ngang, CHI BIEU TUONG.
font-size:0 lam an chu "Tim kiem" nhung GIU nguyen no trong cay tro
nang => trinh doc man hinh van doc ra "Tim kiem", khong phai "nut". */
body[data-yp-page="home"] .yp_timkiem_div{ width:100%; float:none!important }
body[data-yp-page="home"] .yp_submit_timkiem{
width:100%; min-height:56px; border-radius:999px!important;
display:flex; align-items:center; justify-content:center;
font-size:0!important; padding:0!important;
background:var(--ypx-brand); /* [NUT DEN] doi thanh var(--ypx-ink) */
color:var(--ypx-ink); /* [NUT DEN] doi thanh #fff */
}
body[data-yp-page="home"] .yp_submit_timkiem i{ font-size:21px; line-height:1 }
/* nut xoa phai theo bo goc moi */
body[data-yp-page="home"] .xoakey_what,
body[data-yp-page="home"] .xoakey_where{ inset-inline-end:16px!important }
}
/* =====================================================================
* v28-L6 | TACH KHOI FAQ RA KHOI KHOI BIEN TAP O TREN
* ---------------------------------------------------------------------
* 🔴 Lat L3 tung dat .ypx-faq{ margin-top:16px; padding-top:0; border-top:0 }
* va .ypx-faq details{ background:surface } — DUNG cho mockup, noi FAQ
* nam NGOAI panel, tren canvas. Nhung tren production FAQ van nam
* TRONG .ypx-abt (mot the trang), nen:
* · nen trang cua tung cau = trang tren trang => khong ve ra gi ca
* · khe 16px nho hon khe giua hai khoi ben trong panel (24px)
* => mat gom nhan "CAU HOI THUONG GAP" vao khoi bien tap o tren
* Day la ap dung mot ban ve vao mot cau truc khac. Sua lai cho dung
* cau truc that.
*
* Quy tac dung o day: khe NGOAI phai lon hon moi khe BEN TRONG.
* khe trong khoi bien tap = 24px => khe truoc FAQ = 32px + mot duong ke
* ===================================================================== */
body[data-yp-page="home"] .ypx-faq{
margin-top:32px; padding-top:26px;
border-top:1px solid var(--ypx-line);
}
body[data-yp-page="home"] .ypx-faq h3{
margin:0 0 14px;
}
/* Tren nen TRANG, the trang khong ton tai. Tra tung cau ve dang HANG,
phan cach bang mot duong ke manh — dung ngon ngu cua bang bieu. */
body[data-yp-page="home"] .ypx-faq details{
background:none; border-radius:0; margin-bottom:0; padding:0;
border-bottom:1px solid var(--ypx-line-soft)!important;
}
body[data-yp-page="home"] .ypx-faq details:last-child{ border-bottom:0!important }
body[data-yp-page="home"] .ypx-faq summary{ padding:15px 0 15px 30px }
body[data-yp-page="home"] .ypx-faq summary::after{ top:16px }
body[data-yp-page="home"] .ypx-fa{ padding:0 0 18px 30px; max-width:var(--ypx-prose) }
/* Cau tra loi dai (khac gi cong cu tim kiem · B2B la gi) co nhieu doan.
Cho
mot khoang tho thay vi hai dong trong sat nhau. */
body[data-yp-page="home"] .ypx-fa br + br{ line-height:2.2 }
/* =====================================================================
* v28-L7 | BIEU TUONG NHO TRONG TIEU DE THE DICH VU
* Tra lai 4 anh da bo o ban redesign — lay lai 4 loi vao Google Image
* Search va 4 chuoi alt giau tu khoa, ma khong pha bo cuc chu.
* 22px canh chu 16px: du nhan ra, khong tranh cho voi chu.
* ===================================================================== */
body[data-yp-page="home"] .ypx-it-ic{
display:block; width:26px; height:26px; object-fit:contain; margin:0 0 10px;
}