o L7b) + huy hieu thanh vien thuoc v23.
L7a' va nong: .ypx-bdg{display:flex} (0,2,1) da de len cong tac
.hienthi_pc/.hienthi_mobile (0,1,0) => hang huy hieu hien hai lan.
L7b dau "?" mo loi van TVVN bang
. Loi van khai mot lan vao
bien xt_html cua cls.asp; 6 cho chi chen bien.
L7c khoi rao: nen --brand-soft + vach trai --qc-rule. 25 token mau cua
L4 den day da dung het.
L7d lien ket "Xac thuc la gi" + "Nganh:" 3->1 + hotline trung + khe logo.
L7e khung the: vien --line, bo 12px, bo bong, vach trai --brand cho
listing tra tien.
M1 gop 6 manh v23 lam duoc bang CSS thuan: ten DN · dong "Nganh:" ·
hang lien he · nhan anh · o anh · cot trai. 0 byte ASP.
M2 chan the (o so 6) + kim cuong SVG thay 3 anh PNG.
M3 gop hai nhanh logo (114 dong -> 62). cq_dofollow 4 -> 3.
M4 hai dai doanh thu: R1 addtop + R4 cot phai.
M5 cot loc ben trai: tieu de nhan nho, muc co duong phan cach,
muc dang xem co vach trai vang. 0 byte ASP.
N1 cot trai tach 4 panel + dai R1 luoi o + Tinh/Thanh thanh chip.
N2 KHUNG: vo 1480px, ba cot 260/1fr/336. CHAN#1 go bang phep tinh.
N3 huy hieu chu thuong + "?" dan lien; hang H1; nhan cot phai.
P1 mau truot AA cuoi cung (.orange_bg) + loi ra cho so bi che.
Het no AA: 5/5 mau da xu ly.
Q1 mot cot icon 16px cho hang lien he (bat bien B3). 0 byte ASP.
R23 R2 addtop dien thoai + R3 banner xen giua. Du BON vung doanh thu.
S1 dai anh: o co dinh 76px + o "Chi tiet" noi tiep cuoi dai.
Bo id trung timkiemnganhnghe_tinh (nam trong vong lap).
CHUA CO — co y:
· .container-xxl -> lat khung, CHAN boi CHAN#1 (be rong anh banner)
· --ypx-rail-filter -> 260px suy ra tu phep tinh nguong 1260, ma phep
tinh do dung 336px chua do => chua khai
· --ypx-rail-ad -> CHAN#1, chua do => chua khai
· .orange_bg + #colorFF6600 -> mau truot AA thu 5, nam trong R4 => L8
· @media (min-width:1260px) -> nguong MOI duy nhat, thuoc lat khung
============================================================================ */
body[data-yp-kind="listing"]{
/* Hien chuong §1 Luat 1 — vo co gian co tran, khong bac thang.
V6: --ypx-shell KHONG khai o day nua. yp_tokens.css (:root) khai
1320px cho CA BA trang; khai lai o tep cua mot trang la tao nguon
thu hai. Khong dat du phong var(--ypx-shell, 1320px): do dung la
bay B22 — index doi vo thi cls se AM THAM giu so cu. */
--ypx-pad: 24px;
/* Hien chuong §3 — khe giua cac cot. V6: 24 -> 16 */
--ypx-gap: 16px;
/* Hien chuong §1 Luat 3 — chan dong van xuoi (~72 ky tu tieng Viet @15px) */
--ypx-prose: 560px;
}
/* ============================================================================
L4 — TOKEN MAU + BAC NEN
----------------------------------------------------------------------------
Nguon: dac ta v23 §1. Da doi chieu tung token voi :root cua
YPVN_CLS_THIETKE_V23.html — 40/40 khop, lech 0.
BA SAC NEN, KHONG CO SAC THU TU (dac ta §1 luat mau 1):
--surface #FFFFFF the
--brand-soft #FCFBF6 vung nhan (CHUA DUNG — 3 cho cua no o L7/L8)
--canvas #F1F3F5 nen trang <- DAY la thay doi nhin thay duoc
CHUA KHAI — co y:
· --ypx-rail-filter / --ypx-rail-ad -> CHAN#1, 336px chua do
· token hinh hoc (--rail --card-pad --card-gap --logo-w --pic-w
--pic-gap --r --rc --rp) -> thuoc lat L7 (the doanh nghiep)
============================================================================ */
body[data-yp-kind="listing"]{
/* thuong hieu + nhan */
--brand:#FFDE06; --brand-line:#EFDC93; --brand-soft:#FCFBF6;
--brand-pick:#FFFDF2; /* V44 — nen muc DANG CHON o ray loc */
--gold:#9A7A0F; --gold-bg:#FFFBE8; /* V44 — bieu tuong dau o loc.
Ban cu dung teal, ma yp_tokens.css ghi "teal = CHI hanh dong" — bieu
tuong trang tri thi khong phai hanh dong. Gold 3,91:1 tren --gold-bg,
dat nguong vat the do hoa 3,0. */
--brand-mark:#A98700;
--qc-rule:#D78461; /* = --cta pha nhat 35% — vach trai khoi rao */
--dia:#C2410C; /* = --cta — kim cuong */
/* huy hieu */
--tt-bg:#FCEDE6; --tt-line:#F6DFD5; --tt-ink:#9A3412;
--vf-bg:#EAF6EE; --vf-ink:#15803D; /* V39 — nhan "Miễn phí" o o khuyen
mai. = --ypx-verify-tint / --ypx-verify cua
yp_tokens.css, khai lai LOCAL cho dung quy uoc
cua tep nay. 4,52:1 — dat nguong chu nho 4,50. */
--tt-div:#E3BCA9; /* V28 — vach ngan TRONG nang tai tro. 1,53:1 tren
--tt-bg. --tt-line (1,12:1) thi mat khong thay. */
--xt-bg:#E6F2F2; --xt-line:#BFDCDC; --xt-ink:#0A5157;
/* be mat — CHI BA SAC */
/* V44 — #F4F3F1 -> #FAF8F2. Do tu anh ban DANG CHAY. Ban cu gan nhu
trung tinh (R-B = 3) trong khi ban that am ro (R-B = 8), va sang hon.
Chu tren nen moi: --ink 17,18:1 · --muted 6,68:1 — deu con dat. */
--canvas:#FAF8F2; --surface:#FFFFFF;
--line:#EAE6DD; --line-soft:#F0EFEB; /* V44 — vien am theo ban that.
--line-soft KHONG doi: da quet tim duong ke trong o loc tren anh that
va khong trung. Do khong ra thi khong bia so. */
/* chu */
--ink:#171510; --muted:#5B5851; --faint:#807D74;
/* hanh dong */
--action:#0E6B73; --action-deep:#0A5157;
--action-tint:#E6F2F2; --action-line:#B4D7D7;
--cta:#C2410C; --cta-deep:#9A3412;
/* --------------------------------------------------------------------------
L4.a — BAC NEN. Day la thay doi NHIN THAY DUOC cua lat nay.
css_cls.css KHONG co luat nen nao tren body (da dem: 0). Nen hien tai
la mac dinh cua bootstrap 5.2.3: body{background-color:var(--bs-body-bg)}
= #fff, do dac hieu (0,0,1). Luat duoi day (0,1,1) VA nap sau
=> thang tuyet doi, khong phu thuoc thu tu dong.
The listing dong 1261 mang .bg-white cua bootstrap, ma .bg-white co
!important => the VAN TRANG, noi len khoi nen xam. Khong can dong ASP nao.
Cung noi len: thanh dau trang dong 736 (.bg-white), 4 o R1 dong
942/952/962/972 (.bg-white), the dong 1752 (.bg-white),
cot loc (.accordion = #FFFFFF), phan trang (#paging a = #FFF).
⚠️ Chan trang .bg_chantrang = #f6f6f6 se GAN TRUNG voi #F1F3F5, dai
chan trang gan nhu bien mat. Do la sac THU TU, dac ta §1 luat mau 1
chi cho ba sac. Chua sua o day vi chan trang thuoc VO — hien chuong §0
buoc vo giong het ba trang. Sua rieng cls la pha "mot vo, ba ruot".
-------------------------------------------------------------------------- */
background:var(--canvas);
}
/* ============================================================================
L5 — CHU + 4 MAU TRUOT AA
----------------------------------------------------------------------------
PHONG CHU: L5 phai nap bang @import vi rang buoc "0 byte ASP" — cach do
bat trinh duyet doi tai xong file nay MOI biet di lay font, ton 2 chang
khu hoi. L3 da dung nen DA CHUYEN sang x2
+ font trong cls.asp, va XOA @import khoi day. Het no cua L5.
4/5 mau truot AA. Mau thu 5 (.orange_bg + #colorFF6600) chi nam trong R4
1671-1689 = vung doanh thu => L8, co y hoan.
============================================================================ */
body[data-yp-kind="listing"]{
font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
font-size:15px;
line-height:1.5;
color:var(--ink);
}
/* ----------------------------------------------------------------------------
L5.a — GO Verdana/Arial. DUNG 7 selector, LIET KE TAY.
⛔ KHONG duoc thay bang `body[...] *{font-family}`: Font Awesome 6.1.2 ve
icon bang font-family tren .fa/.fas/.far. Quet sach = mat toan bo icon.
---------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .f_Verdana,
body[data-yp-kind="listing"] .yp_input_timgi,
body[data-yp-kind="listing"] .yp_input_odau,
body[data-yp-kind="listing"] .star_text,
body[data-yp-kind="listing"] .duocxacthuc,
body[data-yp-kind="listing"] .star_text_s,
body[data-yp-kind="listing"] .yp_nganh_tile{ font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Arial,sans-serif }
/* ----------------------------------------------------------------------------
L5.b — THANG CO. h1 la ten nganh, dong 899, dang mang .fs-4 cua bootstrap
(RFS: calc(1.275rem + .3vw) ~ 26px o 1920). Dac ta v23 dat 29px.
Buoc 23px o <=991px dung nguong DA CO SAN — khong them nguong moi.
---------------------------------------------------------------------------- */
body[data-yp-kind="listing"] h1{
font-size:28px; font-weight:700; letter-spacing:-.025em; line-height:1.18;
}
/* ----------------------------------------------------------------------------
L5.c — 4 MAU TRUOT AA. Tuong phan tu tinh lai, khong chep tai lieu.
!important la BAT BUOC o a:hover va #paging: css_cls.css khai chung bang
!important, ma css_cls.css bi cam sua toi L9'. Do dac hieu cua ta cao hon
nen trong cuoc dau !important-vs-!important ta thang.
---------------------------------------------------------------------------- */
/* "NHA TAI TRO" — nhan cua hang DA BAN. 2,25:1 la chu kho doc nhat trang. */
body[data-yp-kind="listing"] .star_text{ color:var(--cta) } /* 5,18:1 */
/* "Duoc xac minh" — dac ta §1: huy hieu xac thuc dung --xt-ink */
body[data-yp-kind="listing"] .duocxacthuc{ color:var(--xt-ink) } /* 9,02:1 */
/* tro chuot tren lien ket */
body[data-yp-kind="listing"] a:hover{ color:var(--cta-deep)!important } /* 7,31:1 */
/* phan trang */
body[data-yp-kind="listing"] #paging a.active,
body[data-yp-kind="listing"] #paging a:hover,
body[data-yp-kind="listing"] #paging .page_active{
color:var(--cta-deep)!important; /* 7,31:1 */
}
/* so thu tu: nen vang, chu dang KE THUA. Ghim lai de khong ai lam trang no. */
body[data-yp-kind="listing"] .yp_sothutu_txt,
body[data-yp-kind="listing"] .yp_sothutu_txt_small{ color:var(--ink) } /* 13,5:1 */
/* ============================================================================
L5b — VA NONG THANG CO DAU TRANG
----------------------------------------------------------------------------
Do bang @fontsource/be-vietnam-pro 5.3.0 + fontTools, cong be rong tien
tung ky tu. #yp_top3 = 4 lien ket, moi cai padding-left 16px + icon + 4px:
15px -> 695,7px 13,5px -> 634,1px
Ngan sach (container-xxl 1320 khi vp>=1400, long 1304, 53% - 2px):
vp 1903 / 1519 / 1423 -> 689,1px
=> 15px tran 6,6px. Do la ly do "ENGLISH" rot xuong dong hai.
13,5px la gia tri .nav trong YPVN_CLS_THIETKE_V23.html — lay cua dac ta,
khong che so moi. Sau khi sua: vua o 1903 · 1519 · 1423 · 1263.
⚠️ vp 1349 (10,20% phien) ngan sach chi 593,7px vi bootstrap ha
container-xxl xuong 1140 tu duoi 1400. Phong CU o 15px da ~656px nen
dai nay DA TRAN TU TRUOC L5 — khong phai hoi quy cua lat nay, va sua no
la sua luoi dau trang => de L9'.
============================================================================ */
/* ----------------------------------------------------------------------------
L5b.b — O TIM KIEM: cat bang dau ba cham thay vi ho nua dong.
"Camera Quan Sat - Phan Phoi Va Lap Dat He Thong Camera" = 473px o 15px,
o rong 364px (vp1903) / 314px (vp1349) => KHONG BAO GIO vua. O nay von
da co overflow:hidden + height:35px, tuc la duoc thiet ke de cat; thieu
moi nowrap nen no xuong dong roi ho nua dong thu hai ra ngoai vien 60px.
---------------------------------------------------------------------------- */
/* ============================================================================
L6 — id="colorFF6600" x3 -> class="yp_hotline"
----------------------------------------------------------------------------
Ba the tren dong 1694 cung mang mot id => tai lieu HTML KHONG HOP LE.
Da quet ca 22 ten id: chi mot ten nay bi trung. Khong JS nao dua vao no
(getElementById = 0), nen doi sang class khong the lam hong gi.
Ten cu dat theo MAU nen doi mau la ten noi doi. Ten moi dat theo VAI TRO.
Mau: #FF6600 = 2,94:1 TRUOT AA. Day la SO DIEN THOAI — doc duoc la yeu
cau toi thieu. var(--cta) = 5,18:1, van giu sac cam/nong.
(.orange_bg — NEN NUT dong 1690 — van giu cho L8.)
PHAI pham vi hoa: css_cls.css co a:link{color:#111} = (0,1,1). Luat class
tran (0,1,0) se THUA va hai the van den. (0,2,1) moi thang.
Luat #colorFF6600 trong css_cls.css nay thanh CSS chet — vo hai, go o L9'.
============================================================================ */
body[data-yp-kind="listing"] .yp_hotline{ color:var(--cta) } /* 5,18:1 */
/* ============================================================================
L7a — HANG HUY HIEU (mockup v23 §.bdg)
----------------------------------------------------------------------------
ASP chi doi 4 the
->
. KHONG doi ten lop
.star_text / .duocxacthuc — vi .star_text CON DUNG o dong 1685, la nhan
duoi banner cot phai (R4, vung doanh thu). Tao kieu bang BO CHON HAU DUE
".ypx-bdg .star_text" nen R4 khong he bi dung toi.
6 token ho tt- va ho xt- da khai tu L4, den nay moi dung lan dau.
============================================================================ */
body[data-yp-kind="listing"] .ypx-bdg{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
/* V27 — khe voi dong ten cong ty rong them 3px.
⚠ !important BAT BUOC: markup mang lop bootstrap `m-0`
(.m-0{margin:0!important}). Do la no cua bootstrap, khong phai
lua chon o day — cung ly do da ghi o khoi M1. */
margin-top:3px!important;
}
/* --------------------------------------------------------------------------
L7a' — TRA LAI CONG TAC HIEN/AN.
css_cls.css khai .hienthi_pc{display:block} va .hienthi_mobile{display:none}
o (0,1,0), dao lai trong @media max-width:500px. Luat .ypx-bdg o tren la
(0,2,1) nen DE LEN ca hai: dong 1280 (hienthi_pc) va 1316 (hienthi_mobile)
deu bi ep display:flex, thanh ra hang huy hieu hien HAI LAN o moi be ngang.
Hai luat duoi (0,3,1) tra lai dung cong tac ay, o cung tang do dac hieu
voi luat da pha no. 500px la nguong DA CO SAN (css_cls.css dung 3 lan).
Hai the con lai (1338 · 1355) khong mang hienthi_* — cha cua chung o dong
1330 mang .hienthi_mobile va dieu khien thay. Chung giu luat .ypx-bdg tran.
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .ypx-bdg.hienthi_pc{ display:flex }
body[data-yp-kind="listing"] .ypx-bdg.hienthi_mobile{ display:none }
@media screen and (max-width:500px){
body[data-yp-kind="listing"] .ypx-bdg.hienthi_pc{ display:none }
body[data-yp-kind="listing"] .ypx-bdg.hienthi_mobile{ display:flex }
}
/* vien thuoc — hai nhan deu dung mot hinh dang, khac nhau o sac */
body[data-yp-kind="listing"] .ypx-bdg .star_text,
body[data-yp-kind="listing"] .ypx-bdg .duocxacthuc{
display:inline-flex; align-items:center; gap:6px;
padding:3px 10px; border-radius:8px;
/* V30 — 12 -> 11px. NGOAI LE CO CHU DICH voi thang token (--ypx-t-label:12px
la bac thap nhat): day la NHAN de quet, khong phai van ban de doc.
Tuong phan khong doi: --tt-ink tren --tt-bg = 6,40:1, van dat AA chu nho.
KHONG lay 11px nay lam co chu cho bat ky van ban nao khac. */
font-size:11px; font-weight:600; line-height:1.45;
text-transform:none; white-space:nowrap;
}
/* "Nha tai tro" — lat L5 dat --cta cho .star_text o moi noi; trong hang
huy hieu no thanh vien thuoc, chu doi sang --tt-ink cho hop nen --tt-bg */
/* V27 — HOAN TAC V26. V26 do day chip len nen vang chu den (13,64:1);
ban chon ban cu: --tt-ink tren --tt-bg = 6,40:1. Ca hai deu dat AA.
Va khi kim cuong da thanh VANG thi tin hieu tra tien da co mau thuong
hieu — them chip vang nua la hai khoi vang canh nhau. */
body[data-yp-kind="listing"] .ypx-bdg .star_text{
background:var(--tt-bg); border:1px solid var(--tt-line); color:var(--tt-ink);
}
/* ============================================================================
V28 — NANG "TAI TRO": KIM CUONG + NHAN TRONG MOT VIEN THUOC
----------------------------------------------------------------------------
Truoc V28: kim cuong TRAN (khong nen) dung canh mot nang RIENG "Nha tai tro".
Hai vat the, hai ngon ngu hinh, cung MOT y nghia "cho nay co nguoi tra tien".
Nay gop lam mot — bo cuc lay tu ban mockup nguoi dung chot.
⚠ TEN LOP — DOC TRUOC KHI DOI:
`.ypx-sp` DA BI CHIEM: yp_header.css:340 dung no cho LOP TIM KIEM THA XUONG
(position:fixed; opacity:0). Dat trung ten thi nang nay VO HINH tren ca ba
trang va hong AM THAM — dung ho bay B23. Ten dung la `.ypx-tt`.
MAU — khong sinh sac moi ngoai --tt-div. Lay nguyen bo cua nang "Nha tai tro"
cu: --tt-bg / --tt-line / --tt-ink.
TUONG PHAN (nguong vat the do hoa WCAG 1.4.11 = 3,00:1):
kim cuong --tt-ink #9A3412 tren --tt-bg #FCEDE6 = 6,40:1 DAT
chu "Tai tro" cung cap = 6,40:1 DAT (chu nho 4,50)
vach ngan --tt-div #E3BCA9 tren --tt-bg = 1,53:1
-> vach nay TRANG TRI, khong mang thong tin nao. Bo no di thi khong mat
gi ngoai nhip mat. --tt-line (1,12:1) da thu: mat khong thay.
⚠ KIM CUONG O DAY DAC, KHONG VIEN. V27 phai them stroke --brand-mark vi ruot
vang --brand chi 1,34:1 — vien la thu GANH tuong phan. Do --tt-ink mot minh
da 6,40:1 nen vien thanh thua, va bo vien thi hinh kim cuong o 17px sach net
hon. Day KHONG phai mo lai quyet dinh §6.8: chip van la ban mem --tt-*,
khong doi sang nen vang.
⚠ Do dac hieu co chu dich (0,4,1) va (0,5,1) — CAO HON luat co so
`body[data-yp-kind="listing"] .ypx-bdg .star_text` (0,3,1). Nho vay khoi CSS
nay dat o DAU trong tep cung thang; khong phu thuoc thu tu nguon (B13).
⚠ Markup DA BO `pe-3` khoi .star_text trong hang huy hieu: bootstrap
.pe-3{padding-right:1rem!important} se de len padding:0 o day (B14).
⚠ Khoang trang do ASP thut le nam BEN TRONG nang. Da do: text-node thuan
khoang trang KHONG thanh phan tu flex — nang rong y het ban viet khit
(178,52px ca hai). Khong can ep markup ve mot dong.
============================================================================ */
body[data-yp-kind="listing"] .ypx-bdg .ypx-tt{
display:inline-flex; align-items:center; gap:7px;
padding:3px 10px; border-radius:8px;
background:var(--tt-bg); border:1px solid var(--tt-line); color:var(--tt-ink);
font-size:12px; font-weight:600; line-height:1.45; white-space:nowrap;
}
/* .ypx-dm giu margin-right:4px o luat co so — trong nang thi khe do la thua */
body[data-yp-kind="listing"] .ypx-bdg .ypx-tt .ypx-dm{ margin-right:0; gap:3px }
body[data-yp-kind="listing"] .ypx-bdg .ypx-tt .ypx-gem{ fill:var(--tt-ink); stroke:none }
/* nhan da nam TRONG nang => go het nen/vien rieng cua no, chi con la chu */
body[data-yp-kind="listing"] .ypx-bdg .ypx-tt .star_text{
background:none; border:0; border-radius:0; padding:0;
color:var(--tt-ink); font-size:11px; font-weight:600; /* V30 — 12 -> 11 */
}
/* vach ngan CHI khi co ca hai. Bo chon anh em `+` lo the don ra:
3 kim cuong khong tai tro -> khong vach; tai tro khong kim cuong -> khong vach */
body[data-yp-kind="listing"] .ypx-bdg .ypx-tt .ypx-dm + .star_text{
border-left:1px solid var(--tt-div); padding-left:8px;
}
body[data-yp-kind="listing"] .ypx-bdg .duocxacthuc{
background:var(--xt-bg); border:1px solid var(--xt-line); color:var(--xt-ink);
}
/* ngay cap nhat trong vien thuoc xac thuc — chu phu, khong canh voi nhan */
body[data-yp-kind="listing"] .ypx-bdg .duocxacthuc .text-black-50{
color:var(--muted)!important; font-weight:400; font-size:11px; /* V30 */
}
/* ============================================================================
L7b — DAU "?" GIAI THICH HUY HIEU XAC THUC
----------------------------------------------------------------------------
vi no khong can JavaScript, mo duoc bang ban phim, cham duoc
tren dien thoai. Tooltip :hover se chet tren dien thoai.
Khung noi dung position:absolute nen PHU LEN chu khong day 44 the duoi
troi xuong. The cha .ypx-bdg phai co position:relative de moc vao.
Tren dien thoai hep, khung 300px co the tran ra khoi man. Da chan bang
max-width va inset-inline o dai <=500px — nguong DA CO SAN.
============================================================================ */
body[data-yp-kind="listing"] .ypx-bdg{ position:relative }
/* nua PHAI cua vien thuoc — nen va vien dat len chinh
, KHONG len
. N3 dat len summary nen no co du 4 canh vien va padding rieng
=> hai manh lech bac, giua co vach. align-self:stretch keo nua phai cao
bang nua trai nen khong the lech nhau nua. */
body[data-yp-kind="listing"] .ypx-xt{
position:static; margin-left:-10px; align-self:stretch;
display:inline-flex; align-items:center;
background:var(--xt-bg);
border:1px solid var(--xt-line); border-left:0;
border-radius:0 8px 8px 0;
padding:0 7px 0 1px;
}
body[data-yp-kind="listing"] .ypx-xt > summary{
list-style:none; cursor:pointer; user-select:none;
display:inline-flex; align-items:center; justify-content:center;
width:14px; height:14px; border-radius:50%; /* V30 — 16 -> 14 */
border:1px solid var(--xt-line); background:var(--surface); color:var(--xt-ink);
font-size:9px; font-weight:700; line-height:1; /* V30 — 10 -> 9 */
}
body[data-yp-kind="listing"] .ypx-xt > summary::-webkit-details-marker{ display:none }
body[data-yp-kind="listing"] .ypx-xt[open] > summary{
background:var(--xt-ink); border-color:var(--xt-ink); color:var(--surface);
}
body[data-yp-kind="listing"] .ypx-xtp{
position:absolute; z-index:30; top:calc(100% + 8px); left:0;
width:min(360px, 100%);
background:var(--surface); color:var(--ink);
border:1px solid var(--line); border-radius:12px;
padding:14px 16px;
box-shadow:0 10px 30px rgba(22,24,29,.14);
font-size:13px; line-height:1.6; font-weight:400; white-space:normal;
}
body[data-yp-kind="listing"] .ypx-xtp b{ font-weight:600 }
body[data-yp-kind="listing"] .ypx-xtp p{ margin:8px 0 0 }
body[data-yp-kind="listing"] .ypx-xtp ul{ margin:8px 0 0; padding-left:18px }
body[data-yp-kind="listing"] .ypx-xtp li{ margin:4px 0 }
/* ============================================================================
L7c — KHOI RAO (giai phau the v23 §3, o so 4)
----------------------------------------------------------------------------
Loi rao cua nguoi quang cao duoc tach khoi phan du lieu bang mot manh nen
rieng va mot vach trai — de nguoi doc biet cho nao la TVVN noi, cho nao la
doanh nghiep noi. Do la muc dich cua o so 4, khong phai trang tri.
Hai token cuoi cung cua L4 den nay moi co viec:
--brand-soft nen manh
--qc-rule vach trai, bang --cta pha nhat
MAU CHU: css_cls.css dat .text_quangcao{color:#C60}. #C60 tren nen trang la
3,52:1 — truot AA cho van ban thuong. Nen moi #FCFBF6 gan nhu trang nen
khong cuu duoc (3,45:1). Doi than van ban sang --ink (15,79:1); va
trong noi dung van giu duoc suc nhan manh bang do dam va dang nghieng.
⛔ CHUA ap chan 560px cua Hien chuong §1 Luat 3. Noi dung khoi nay la HTML
THO tu CSDL, khong co lop nao de phan biet van xuoi voi gach dau dong. Ap
mu quang se ngat doi dung nhung dong gach dau dong ma ngoai le hien chuong
vua duoc them de bao ve. Phai phan tich cau truc that truoc — lat rieng.
============================================================================ */
/* V26 — VACH CUA KHOI RAO DA BO (1,29:1). Nen kem + bo goc da du de tach
khoi; vach chi lap lai dieu nen da noi. Padding-left giu 18px de chu
khong nhay so voi ban truoc. */
/* V31 — VACH TRO LAI o khoi rao. V32 — DOI SAC sang --qc-rule.
Do tuong phan cua vach (vach nam giua the TRANG ben trai va nen KEM ben phai):
--qc-rule #D78461 2,85:1 tren trang · 2,75:1 tren kem DUOI nguong 3,00
--tt-ink #9A3412 7,31:1 tren trang · 7,05:1 tren kem dat
V31 chon --tt-ink vi con so. V32 doi sang --qc-rule theo nguoi dung, VA DO
LA LUA CHON HOP LE, khong phai loi sot — ly do:
WCAG 1.4.11 rang buoc "vat the do hoa CAN DE HIEU noi dung". Vach nay
KHONG mang thong tin: khoi rao da tu tach bang nen --brand-soft + bo goc
8px, bo han vach di van doc duoc — do dung la ket luan cua V26. Vach chi
la NHIP MAT. Khac han kim cuong: kim cuong LA tin hieu hang nen BUOC phai
dat 3:1, va no dat 6,40:1.
Neu ve sau muon giu sac cam diu nay ma cham nguong: #D57E59 — cung H 18 do,
cung S 60%, chi ha L 61% -> 59% — do duoc 3,02:1 tren the trang.
KHONG mo lai §6.7: §6.7 cam VET VANG (vang chi nam o cho mang nghia).
Vach nay do, va mang dung mot nghia — doan nay la LOI CUA DOANH NGHIEP
TRA TIEN. Cung mau voi nang "Tai tro" vi cung mot nguoi dang noi.
⚠ 15px dem + 3px vach = 18px, DUNG bang padding-left cu => chu KHONG
NHAY mot pixel nao so voi ban V30. */
body[data-yp-kind="listing"] .text_quangcao{
margin-top:13px;
padding:13px 15px 13px 15px;
background:var(--brand-soft);
/* V44 — --qc-rule -> --brand. MO LAI §6.7 co chu dich, xem dau tep patch.
Vang o day nghia la "khung suon do Trang Vang dung", giong het vach
muc dang chon o ray loc — mot mau, mot hinh dang, lap lai dung hai cho.
1,29:1 la con so V26 dung de go no; nhung chinh gia tri ay dang duoc
chap nhan cach do 20px o ray loc. Nhan cho nay bo cho kia moi la sai. */
border-left:3px solid var(--brand);
border-radius:8px;
color:var(--ink);
line-height:1.7;
}
/* noi dung tu CSDL: chi chinh ba the co the xuat hien, khong dong toi cai khac */
body[data-yp-kind="listing"] .text_quangcao b,
body[data-yp-kind="listing"] .text_quangcao strong{ color:var(--ink); font-weight:600 }
body[data-yp-kind="listing"] .text_quangcao em,
body[data-yp-kind="listing"] .text_quangcao i{ font-style:italic }
body[data-yp-kind="listing"] .text_quangcao a{ color:var(--action) }
/* ============================================================================
L7d — dong lien ket cuoi loi van xac thuc
============================================================================ */
body[data-yp-kind="listing"] .ypx-xtlink{ margin:12px 0 0 }
body[data-yp-kind="listing"] .ypx-xtlink a{
color:var(--action); font-weight:600; text-decoration:none;
}
body[data-yp-kind="listing"] .ypx-xtlink a:hover{ text-decoration:underline }
/* ============================================================================
L7e — KHUNG THE (giai phau v23 §3, o ngoai cung)
----------------------------------------------------------------------------
Bo bong: sau L4 the da noi tren nen xam roi. Bong + vien + bo 16px la ba
tin hieu cung noi mot dieu. Giu vien 1px va bo 12px, bo bong.
Vach trai 4px la thu DUY NHAT tren the phan biet hang da ban voi hang mien
phi o muc liec mat. Dieu kien bat vach lay dung cua huy hieu, nen ai thay
vach vang thi nhin len se thay kim cuong — hai tin hieu khong bao gio lech.
🔴 KHONG dung overflow:hidden o day. Khung giai thich cua dau "?" (.ypx-xtp,
lat L7b) la position:absolute nam TRONG the — overflow:hidden se cat cut no.
Bo goc cho vach bang border-radius tren chinh ::before.
============================================================================ */
body[data-yp-kind="listing"] .ypx-card{
position:relative;
border:1px solid var(--line);
border-radius:12px;
}
/* V26 — VACH VANG CUA THE DA BO. Do duoc: 1,34:1 tren the trang, duoi
nguong 3,00 cua WCAG 1.4.11 cho thanh phan giao dien => no khong phai
tin hieu, chi la trang tri. Va tin hieu "tra tien" con nguyen BA cai:
so thu hang · 5 kim cuong · chip "Nha tai tro" (6,40:1, bang CHU).
Vien am --brand-line da can nhac va LOAI: 1,37:1, chi hon vach cu 0,03. */
/* ============================================================================
M1 — SAU MANH v23 LAM DUOC BANG CSS THUAN
----------------------------------------------------------------------------
Markup cua ca sau da co san trong cls.asp, nen lat nay 0 byte ASP.
Ve !important: bootstrap 5.2.3 khai .border .shadow-sm .text-success
.text-black-50 deu kem !important. Muon de len thi BAT BUOC phai co.
Do la no cua bootstrap chu khong phai lua chon o day; moi cho dung deu
ghi ly do ngay tren dong.
============================================================================ */
/* 1 · TEN DOANH NGHIEP — o so 1 trong giai phau v23 */
body[data-yp-kind="listing"] .yp_noidunglistings h2{
margin:0; font-size:18px; font-weight:650;
line-height:1.32; letter-spacing:-.022em;
}
body[data-yp-kind="listing"] .yp_noidunglistings h2 a{ color:var(--ink) }
/* a:hover cua L5 dat --cta-deep kem !important, nen o day phai manh hon */
body[data-yp-kind="listing"] .yp_noidunglistings h2 a:hover{ color:var(--action)!important }
/* 2 · DONG "NGANH:" — nhan la chu phu, ten nganh la lien ket */
body[data-yp-kind="listing"] .yp_nganh_tile{
color:var(--muted); font-size:12px; font-weight:400;
}
body[data-yp-kind="listing"] .yp_nganh_text{ color:var(--action) }
/* 3 · HANG LIEN HE — o so 3. Hai lop duoi la cua bootstrap, co !important */
body[data-yp-kind="listing"] .yp_noidunglistings .text-black-50{ color:var(--muted)!important }
body[data-yp-kind="listing"] .yp_noidunglistings .text-success{ color:var(--action)!important }
/* 4 · NHAN ANH — kep 2 dong, khong de mot ten dai xo lech ca dai */
body[data-yp-kind="listing"] .text_color_sanpham{
color:var(--muted); font-size:12px; line-height:1.32;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; word-break:break-word;
}
/* 5 · O ANH — vien va bo theo he mau. .border cua bootstrap co !important */
body[data-yp-kind="listing"] .div_img_sanpham{
border-color:var(--line)!important;
border-radius:8px!important;
background:var(--surface);
}
/* 6 · COT TRAI — dong bo voi the listing: vien --line, bo 12px, bo bong */
/* N1 — .div_nganh nay chi con la CAI COT; khung chuyen sang .ypx-panel */
body[data-yp-kind="listing"] .ypx-panel{
background:var(--surface);
border:1px solid var(--line);
border-radius:12px;
padding:14px 16px;
margin-bottom:12px;
}
body[data-yp-kind="listing"] .div_nganh a{ color:var(--ink) }
body[data-yp-kind="listing"] .div_nganh a:hover{ color:var(--action)!important }
/* ============================================================================
M2 — CHAN THE (o so 6) + KIM CUONG SVG
============================================================================ */
/* ----------------------------------------------------------------------------
V50 — DAI ANH MO BOT DE THOI KEO SUC NANG XUONG DUOI
opacity chu KHONG PHAI filter:brightness. Tren nen trang, opacity .8 lam
anh NHAT di (nhe hon, dung y); brightness .8 lam anh TOI di (nang hon,
nguoc y). Nguoi dung viet "giam do sang" nhung y la "bot nang".
⚠ GIA PHAI TRA, do duoc: nhieu anh san pham co chu/logo in tren anh.
Tuong phan cua chu do voi nen trang khi mo con 80%:
V51 dat 90% (truoc do V50 dat 80%). So o 90% / 80%:
#303030 9,59 / 7,00 #555555 5,74 / 4,48
#767676 3,74 / 3,15 #8A8A8A 2,96 / 2,58
90% keo #555555 tro lai 5,74:1 — tren nguong 4,50, tuc lop chu pho
bien nhat tren anh san pham doc duoc tro lai.
Nen co luat thu hai: RE CHUOT VAO O THI ANH VE 100%. Quet nhanh thi dai
anh dung yen phia sau; dung lai o mot anh thi anh tra du thong tin.
Muon nhe tay hon: doi .8 thanh .85 — #555555 khi do 5,10:1, tro lai
tren nguong 4,50. Mot ky tu.
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .ypx-pics .img_size{ opacity:.9; transition:opacity .15s }
body[data-yp-kind="listing"] .ypx-pics .img_sanpham:hover .img_size{ opacity:1 }
/* ─────────────────────────────────────────────────────────────────────
P4 — TIEU DE SAN PHAM (.ypx-ph) — dung tren psrch.
Trang tim SAN PHAM: ten san pham la CAU TRA LOI, nen no la dong chinh;
ten doanh nghiep xuong dong hai kem nhan quan he 'Nha cung cap'.
Chu den dam cho do tuong phan cao nhat; bo vien chip cam vi vien + chu
cam tren nen trang cho do tuong phan thap va doc nhu trang tri.
───────────────────────────────────────────────────────────────────── */
body[data-yp-kind="listing"] .ypx-ph{ margin:0 0 2px }
/* P6 — cum tieu de tho hon: ba thong tin KHAC LOAI can nhip nghi giua
cac nhom. ten SP (cai gi) -> 6px -> nha cung cap (ai) -> 10px -> hang
huy hieu (tin cay). Truoc do ca ba sat nhau thanh mot khoi dac. */
body[data-yp-kind="listing"] .ypx-ph + .ypx-bdg{ margin-top:2px }
/* ⚠ .yp_noidunglistings h2 (dat o tren) co CUNG do dac hieu va dat font-
weight:650 · letter-spacing:-.022em. Ban do do ra w650, khong phai 700.
Nang do dac hieu bang cach neo them .yp_noidunglistings — KHONG dung
!important: !important thang moi thu, ke ca luat sau nay muon sua dung cho. */
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n{
margin:0 0 6px; font-size:18px; line-height:1.38; font-weight:700;
color:var(--ink); letter-spacing:-.005em; text-transform:none }
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n a{ color:inherit; text-decoration:none }
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n a:hover{ color:var(--action-deep); text-decoration:underline;
text-underline-offset:3px }
/* tu khoa trung khop: NEN vang nhat thay vi doi mau chu — mat khong phai
doc hai mau trong cung mot dong */
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n strong{
/* P5 — GACH CHAN vang thay cho NEN vang.
Nen vang keo dai xuong ca phan duoi chu, lam dong chu day len va kem
sac net. Gach chan 3px dat duoi duong co so cho diem nhan ro o dung
tu khop ma KHONG dung vao hinh chu — chu van sac. Ky thuat 'marker
underline', dung rong trong bao chi so.
⚠ KHONG doi mau chu sang teal: tren trang nay teal DA mang nghia
'bam duoc' (.ypx-detail · hover). Mot mau hai nghia thi mat khong
con biet cai nao bam duoc de LAM GI. Ten san pham la NOI DUNG. */
font-weight:700; color:inherit; background:none;
box-shadow:inset 0 -3px 0 0 var(--brand);
padding:0 1px }
body[data-yp-kind="listing"] .ypx-ph-s{ margin:0 0 10px; font-size:14px; line-height:1.45; color:var(--muted) }
body[data-yp-kind="listing"] .ypx-ph-s > span{ font-size:11px; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:var(--muted); margin-right:7px }
body[data-yp-kind="listing"] .ypx-ph-s a{ font-weight:600; color:var(--ink); text-decoration:none }
body[data-yp-kind="listing"] .ypx-ph-s a:hover{ color:var(--action-deep); text-decoration:underline;
text-underline-offset:3px }
@media screen and (max-width:500px){
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n{ font-size:16.5px }
body[data-yp-kind="listing"] .ypx-ph-s{ font-size:13.5px }
body[data-yp-kind="listing"] .ypx-ph-s > span{ display:block; margin:0 0 1px }
}
body[data-yp-kind="listing"] .ypx-cfoot{
margin:14px 0 0; padding-top:12px;
border-top:1px solid var(--line-soft);
display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
body[data-yp-kind="listing"] .ypx-cfoot .yp_nganh_tile{
font-size:12px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted);
}
body[data-yp-kind="listing"] .ypx-cfoot .yp_nganh_text{
font-size:12px; color:var(--muted); text-transform:none;
}
body[data-yp-kind="listing"] .ypx-detail{
margin-left:auto; display:inline-flex; align-items:center;
/* V50 — teal thay cho --muted. Nut nay la ; mang mau chu thuong thi no
trong GIONG VAN BAN chu khong giong mot cai bam duoc — loi khoi goi.
yp_tokens.css ghi "teal = CHI hanh dong"; day dung la hanh dong.
Do: --muted 7,10:1 -> --action 6,23:1 tren the trang, van tren 4,50.
⚠ KHONG lam viec nay cho "NGÀNH ·
. N3 dat len summary nen no co du 4 canh vien va padding rieng
=> hai manh lech bac, giua co vach. align-self:stretch keo nua phai cao
bang nua trai nen khong the lech nhau nua. */
body[data-yp-kind="listing"] .ypx-xt{
position:static; margin-left:-10px; align-self:stretch;
display:inline-flex; align-items:center;
background:var(--xt-bg);
border:1px solid var(--xt-line); border-left:0;
border-radius:0 8px 8px 0;
padding:0 7px 0 1px;
}
body[data-yp-kind="listing"] .ypx-xt > summary{
list-style:none; cursor:pointer; user-select:none;
display:inline-flex; align-items:center; justify-content:center;
width:14px; height:14px; border-radius:50%; /* V30 — 16 -> 14 */
border:1px solid var(--xt-line); background:var(--surface); color:var(--xt-ink);
font-size:9px; font-weight:700; line-height:1; /* V30 — 10 -> 9 */
}
body[data-yp-kind="listing"] .ypx-xt > summary::-webkit-details-marker{ display:none }
body[data-yp-kind="listing"] .ypx-xt[open] > summary{
background:var(--xt-ink); border-color:var(--xt-ink); color:var(--surface);
}
body[data-yp-kind="listing"] .ypx-xtp{
position:absolute; z-index:30; top:calc(100% + 8px); left:0;
width:min(360px, 100%);
background:var(--surface); color:var(--ink);
border:1px solid var(--line); border-radius:12px;
padding:14px 16px;
box-shadow:0 10px 30px rgba(22,24,29,.14);
font-size:13px; line-height:1.6; font-weight:400; white-space:normal;
}
body[data-yp-kind="listing"] .ypx-xtp b{ font-weight:600 }
body[data-yp-kind="listing"] .ypx-xtp p{ margin:8px 0 0 }
body[data-yp-kind="listing"] .ypx-xtp ul{ margin:8px 0 0; padding-left:18px }
body[data-yp-kind="listing"] .ypx-xtp li{ margin:4px 0 }
/* ============================================================================
L7c — KHOI RAO (giai phau the v23 §3, o so 4)
----------------------------------------------------------------------------
Loi rao cua nguoi quang cao duoc tach khoi phan du lieu bang mot manh nen
rieng va mot vach trai — de nguoi doc biet cho nao la TVVN noi, cho nao la
doanh nghiep noi. Do la muc dich cua o so 4, khong phai trang tri.
Hai token cuoi cung cua L4 den nay moi co viec:
--brand-soft nen manh
--qc-rule vach trai, bang --cta pha nhat
MAU CHU: css_cls.css dat .text_quangcao{color:#C60}. #C60 tren nen trang la
3,52:1 — truot AA cho van ban thuong. Nen moi #FCFBF6 gan nhu trang nen
khong cuu duoc (3,45:1). Doi than van ban sang --ink (15,79:1); va
trong noi dung van giu duoc suc nhan manh bang do dam va dang nghieng.
⛔ CHUA ap chan 560px cua Hien chuong §1 Luat 3. Noi dung khoi nay la HTML
THO tu CSDL, khong co lop nao de phan biet van xuoi voi gach dau dong. Ap
mu quang se ngat doi dung nhung dong gach dau dong ma ngoai le hien chuong
vua duoc them de bao ve. Phai phan tich cau truc that truoc — lat rieng.
============================================================================ */
/* V26 — VACH CUA KHOI RAO DA BO (1,29:1). Nen kem + bo goc da du de tach
khoi; vach chi lap lai dieu nen da noi. Padding-left giu 18px de chu
khong nhay so voi ban truoc. */
/* V31 — VACH TRO LAI o khoi rao. V32 — DOI SAC sang --qc-rule.
Do tuong phan cua vach (vach nam giua the TRANG ben trai va nen KEM ben phai):
--qc-rule #D78461 2,85:1 tren trang · 2,75:1 tren kem DUOI nguong 3,00
--tt-ink #9A3412 7,31:1 tren trang · 7,05:1 tren kem dat
V31 chon --tt-ink vi con so. V32 doi sang --qc-rule theo nguoi dung, VA DO
LA LUA CHON HOP LE, khong phai loi sot — ly do:
WCAG 1.4.11 rang buoc "vat the do hoa CAN DE HIEU noi dung". Vach nay
KHONG mang thong tin: khoi rao da tu tach bang nen --brand-soft + bo goc
8px, bo han vach di van doc duoc — do dung la ket luan cua V26. Vach chi
la NHIP MAT. Khac han kim cuong: kim cuong LA tin hieu hang nen BUOC phai
dat 3:1, va no dat 6,40:1.
Neu ve sau muon giu sac cam diu nay ma cham nguong: #D57E59 — cung H 18 do,
cung S 60%, chi ha L 61% -> 59% — do duoc 3,02:1 tren the trang.
KHONG mo lai §6.7: §6.7 cam VET VANG (vang chi nam o cho mang nghia).
Vach nay do, va mang dung mot nghia — doan nay la LOI CUA DOANH NGHIEP
TRA TIEN. Cung mau voi nang "Tai tro" vi cung mot nguoi dang noi.
⚠ 15px dem + 3px vach = 18px, DUNG bang padding-left cu => chu KHONG
NHAY mot pixel nao so voi ban V30. */
body[data-yp-kind="listing"] .text_quangcao{
margin-top:13px;
padding:13px 15px 13px 15px;
background:var(--brand-soft);
/* V44 — --qc-rule -> --brand. MO LAI §6.7 co chu dich, xem dau tep patch.
Vang o day nghia la "khung suon do Trang Vang dung", giong het vach
muc dang chon o ray loc — mot mau, mot hinh dang, lap lai dung hai cho.
1,29:1 la con so V26 dung de go no; nhung chinh gia tri ay dang duoc
chap nhan cach do 20px o ray loc. Nhan cho nay bo cho kia moi la sai. */
border-left:3px solid var(--brand);
border-radius:8px;
color:var(--ink);
line-height:1.7;
}
/* noi dung tu CSDL: chi chinh ba the co the xuat hien, khong dong toi cai khac */
body[data-yp-kind="listing"] .text_quangcao b,
body[data-yp-kind="listing"] .text_quangcao strong{ color:var(--ink); font-weight:600 }
body[data-yp-kind="listing"] .text_quangcao em,
body[data-yp-kind="listing"] .text_quangcao i{ font-style:italic }
body[data-yp-kind="listing"] .text_quangcao a{ color:var(--action) }
/* ============================================================================
L7d — dong lien ket cuoi loi van xac thuc
============================================================================ */
body[data-yp-kind="listing"] .ypx-xtlink{ margin:12px 0 0 }
body[data-yp-kind="listing"] .ypx-xtlink a{
color:var(--action); font-weight:600; text-decoration:none;
}
body[data-yp-kind="listing"] .ypx-xtlink a:hover{ text-decoration:underline }
/* ============================================================================
L7e — KHUNG THE (giai phau v23 §3, o ngoai cung)
----------------------------------------------------------------------------
Bo bong: sau L4 the da noi tren nen xam roi. Bong + vien + bo 16px la ba
tin hieu cung noi mot dieu. Giu vien 1px va bo 12px, bo bong.
Vach trai 4px la thu DUY NHAT tren the phan biet hang da ban voi hang mien
phi o muc liec mat. Dieu kien bat vach lay dung cua huy hieu, nen ai thay
vach vang thi nhin len se thay kim cuong — hai tin hieu khong bao gio lech.
🔴 KHONG dung overflow:hidden o day. Khung giai thich cua dau "?" (.ypx-xtp,
lat L7b) la position:absolute nam TRONG the — overflow:hidden se cat cut no.
Bo goc cho vach bang border-radius tren chinh ::before.
============================================================================ */
body[data-yp-kind="listing"] .ypx-card{
position:relative;
border:1px solid var(--line);
border-radius:12px;
}
/* V26 — VACH VANG CUA THE DA BO. Do duoc: 1,34:1 tren the trang, duoi
nguong 3,00 cua WCAG 1.4.11 cho thanh phan giao dien => no khong phai
tin hieu, chi la trang tri. Va tin hieu "tra tien" con nguyen BA cai:
so thu hang · 5 kim cuong · chip "Nha tai tro" (6,40:1, bang CHU).
Vien am --brand-line da can nhac va LOAI: 1,37:1, chi hon vach cu 0,03. */
/* ============================================================================
M1 — SAU MANH v23 LAM DUOC BANG CSS THUAN
----------------------------------------------------------------------------
Markup cua ca sau da co san trong cls.asp, nen lat nay 0 byte ASP.
Ve !important: bootstrap 5.2.3 khai .border .shadow-sm .text-success
.text-black-50 deu kem !important. Muon de len thi BAT BUOC phai co.
Do la no cua bootstrap chu khong phai lua chon o day; moi cho dung deu
ghi ly do ngay tren dong.
============================================================================ */
/* 1 · TEN DOANH NGHIEP — o so 1 trong giai phau v23 */
body[data-yp-kind="listing"] .yp_noidunglistings h2{
margin:0; font-size:18px; font-weight:650;
line-height:1.32; letter-spacing:-.022em;
}
body[data-yp-kind="listing"] .yp_noidunglistings h2 a{ color:var(--ink) }
/* a:hover cua L5 dat --cta-deep kem !important, nen o day phai manh hon */
body[data-yp-kind="listing"] .yp_noidunglistings h2 a:hover{ color:var(--action)!important }
/* 2 · DONG "NGANH:" — nhan la chu phu, ten nganh la lien ket */
body[data-yp-kind="listing"] .yp_nganh_tile{
color:var(--muted); font-size:12px; font-weight:400;
}
body[data-yp-kind="listing"] .yp_nganh_text{ color:var(--action) }
/* 3 · HANG LIEN HE — o so 3. Hai lop duoi la cua bootstrap, co !important */
body[data-yp-kind="listing"] .yp_noidunglistings .text-black-50{ color:var(--muted)!important }
body[data-yp-kind="listing"] .yp_noidunglistings .text-success{ color:var(--action)!important }
/* 4 · NHAN ANH — kep 2 dong, khong de mot ten dai xo lech ca dai */
body[data-yp-kind="listing"] .text_color_sanpham{
color:var(--muted); font-size:12px; line-height:1.32;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; word-break:break-word;
}
/* 5 · O ANH — vien va bo theo he mau. .border cua bootstrap co !important */
body[data-yp-kind="listing"] .div_img_sanpham{
border-color:var(--line)!important;
border-radius:8px!important;
background:var(--surface);
}
/* 6 · COT TRAI — dong bo voi the listing: vien --line, bo 12px, bo bong */
/* N1 — .div_nganh nay chi con la CAI COT; khung chuyen sang .ypx-panel */
body[data-yp-kind="listing"] .ypx-panel{
background:var(--surface);
border:1px solid var(--line);
border-radius:12px;
padding:14px 16px;
margin-bottom:12px;
}
body[data-yp-kind="listing"] .div_nganh a{ color:var(--ink) }
body[data-yp-kind="listing"] .div_nganh a:hover{ color:var(--action)!important }
/* ============================================================================
M2 — CHAN THE (o so 6) + KIM CUONG SVG
============================================================================ */
/* ----------------------------------------------------------------------------
V50 — DAI ANH MO BOT DE THOI KEO SUC NANG XUONG DUOI
opacity chu KHONG PHAI filter:brightness. Tren nen trang, opacity .8 lam
anh NHAT di (nhe hon, dung y); brightness .8 lam anh TOI di (nang hon,
nguoc y). Nguoi dung viet "giam do sang" nhung y la "bot nang".
⚠ GIA PHAI TRA, do duoc: nhieu anh san pham co chu/logo in tren anh.
Tuong phan cua chu do voi nen trang khi mo con 80%:
V51 dat 90% (truoc do V50 dat 80%). So o 90% / 80%:
#303030 9,59 / 7,00 #555555 5,74 / 4,48
#767676 3,74 / 3,15 #8A8A8A 2,96 / 2,58
90% keo #555555 tro lai 5,74:1 — tren nguong 4,50, tuc lop chu pho
bien nhat tren anh san pham doc duoc tro lai.
Nen co luat thu hai: RE CHUOT VAO O THI ANH VE 100%. Quet nhanh thi dai
anh dung yen phia sau; dung lai o mot anh thi anh tra du thong tin.
Muon nhe tay hon: doi .8 thanh .85 — #555555 khi do 5,10:1, tro lai
tren nguong 4,50. Mot ky tu.
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .ypx-pics .img_size{ opacity:.9; transition:opacity .15s }
body[data-yp-kind="listing"] .ypx-pics .img_sanpham:hover .img_size{ opacity:1 }
/* ─────────────────────────────────────────────────────────────────────
P4 — TIEU DE SAN PHAM (.ypx-ph) — dung tren psrch.
Trang tim SAN PHAM: ten san pham la CAU TRA LOI, nen no la dong chinh;
ten doanh nghiep xuong dong hai kem nhan quan he 'Nha cung cap'.
Chu den dam cho do tuong phan cao nhat; bo vien chip cam vi vien + chu
cam tren nen trang cho do tuong phan thap va doc nhu trang tri.
───────────────────────────────────────────────────────────────────── */
body[data-yp-kind="listing"] .ypx-ph{ margin:0 0 2px }
/* P6 — cum tieu de tho hon: ba thong tin KHAC LOAI can nhip nghi giua
cac nhom. ten SP (cai gi) -> 6px -> nha cung cap (ai) -> 10px -> hang
huy hieu (tin cay). Truoc do ca ba sat nhau thanh mot khoi dac. */
body[data-yp-kind="listing"] .ypx-ph + .ypx-bdg{ margin-top:2px }
/* ⚠ .yp_noidunglistings h2 (dat o tren) co CUNG do dac hieu va dat font-
weight:650 · letter-spacing:-.022em. Ban do do ra w650, khong phai 700.
Nang do dac hieu bang cach neo them .yp_noidunglistings — KHONG dung
!important: !important thang moi thu, ke ca luat sau nay muon sua dung cho. */
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n{
margin:0 0 6px; font-size:18px; line-height:1.38; font-weight:700;
color:var(--ink); letter-spacing:-.005em; text-transform:none }
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n a{ color:inherit; text-decoration:none }
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n a:hover{ color:var(--action-deep); text-decoration:underline;
text-underline-offset:3px }
/* tu khoa trung khop: NEN vang nhat thay vi doi mau chu — mat khong phai
doc hai mau trong cung mot dong */
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n strong{
/* P5 — GACH CHAN vang thay cho NEN vang.
Nen vang keo dai xuong ca phan duoi chu, lam dong chu day len va kem
sac net. Gach chan 3px dat duoi duong co so cho diem nhan ro o dung
tu khop ma KHONG dung vao hinh chu — chu van sac. Ky thuat 'marker
underline', dung rong trong bao chi so.
⚠ KHONG doi mau chu sang teal: tren trang nay teal DA mang nghia
'bam duoc' (.ypx-detail · hover). Mot mau hai nghia thi mat khong
con biet cai nao bam duoc de LAM GI. Ten san pham la NOI DUNG. */
font-weight:700; color:inherit; background:none;
box-shadow:inset 0 -3px 0 0 var(--brand);
padding:0 1px }
body[data-yp-kind="listing"] .ypx-ph-s{ margin:0 0 10px; font-size:14px; line-height:1.45; color:var(--muted) }
body[data-yp-kind="listing"] .ypx-ph-s > span{ font-size:11px; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:var(--muted); margin-right:7px }
body[data-yp-kind="listing"] .ypx-ph-s a{ font-weight:600; color:var(--ink); text-decoration:none }
body[data-yp-kind="listing"] .ypx-ph-s a:hover{ color:var(--action-deep); text-decoration:underline;
text-underline-offset:3px }
@media screen and (max-width:500px){
body[data-yp-kind="listing"] .yp_noidunglistings h2.ypx-ph-n{ font-size:16.5px }
body[data-yp-kind="listing"] .ypx-ph-s{ font-size:13.5px }
body[data-yp-kind="listing"] .ypx-ph-s > span{ display:block; margin:0 0 1px }
}
body[data-yp-kind="listing"] .ypx-cfoot{
margin:14px 0 0; padding-top:12px;
border-top:1px solid var(--line-soft);
display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
body[data-yp-kind="listing"] .ypx-cfoot .yp_nganh_tile{
font-size:12px; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--muted);
}
body[data-yp-kind="listing"] .ypx-cfoot .yp_nganh_text{
font-size:12px; color:var(--muted); text-transform:none;
}
body[data-yp-kind="listing"] .ypx-detail{
margin-left:auto; display:inline-flex; align-items:center;
/* V50 — teal thay cho --muted. Nut nay la ; mang mau chu thuong thi no
trong GIONG VAN BAN chu khong giong mot cai bam duoc — loi khoi goi.
yp_tokens.css ghi "teal = CHI hanh dong"; day dung la hanh dong.
Do: --muted 7,10:1 -> --action 6,23:1 tren the trang, van tren 4,50.
⚠ KHONG lam viec nay cho "NGÀNH · " ben canh: no la ,
khong bam duoc (cls.asp §1606) — to teal la hua hao. Va phep tu kiem
o cls.asp §2027 bat bon nhan phu phai CUNG MOT MAU, doi rieng no se
lam phep do bao SAI ngay tren trang. */
padding:8px 15px; border-radius:999px;
border:1px solid var(--action-line); background:var(--surface);
font-size:13px; font-weight:600; color:var(--action)!important;
}
body[data-yp-kind="listing"] .ypx-detail:hover{
background:var(--action-tint); border-color:var(--action-line);
color:var(--action-deep)!important;
}
/* kim cuong: fill theo currentColor nen doi mau khong can ve lai anh */
/* V27 — KIM CUONG VANG, to hon.
Kim cuong la VAT THE DO HOA => nguong WCAG 1.4.11 = 3,00:1. Do tren
the trang: --brand 1,34 · --brand-deep 1,64 · #D4A017 2,38 ·
#C89211 2,77 · --brand-mark 3,41. Vang TUOI mot minh KHONG dat.
Cach dung: RUOT vang tuoi + VIEN vang dam.
fill --brand #FFDE06 — sac vang can co
stroke --brand-mark #A98700 — 3,41:1, duong vien lam viec
Vien mang tuong phan, ruot mang mau; ruot/vien = 2,55 nen hinh
kim cuong van doc duoc net.
⚠ `color:var(--dia)` da bo: fill/stroke dat TRUC TIEP nen --dia
KHONG con dieu khien mau kim cuong. Doi --dia se khong thay gi. */
body[data-yp-kind="listing"] .ypx-dm{
display:inline-flex; gap:3px; align-items:center;
margin-right:4px;
}
/* V30 — 17 -> 14px. Kim cuong tung phai to vi no la mot minh giua the trang;
tu V28 no nam trong nang co nen rieng nen khong con phai to de duoc thay. */
body[data-yp-kind="listing"] .ypx-gem{
width:14px; height:14px; flex:0 0 auto; display:block;
fill:var(--brand); stroke:var(--brand-mark); stroke-width:1.1;
paint-order:stroke fill;
}
/* ============================================================================
M4a — DAI R1 (addtop)
----------------------------------------------------------------------------
Cung ngon ngu voi vach vang cua the tra tien o L7e: nen --brand-soft,
vach trai --brand. Nguoi doc thay vach vang o dau la biet cho do co
nguoi tra tien de xuat hien.
.border va .shadow-sm cua bootstrap co !important nen phai co !important.
============================================================================ */
/* V24 — `border-left` KHONG bo tron hai dau duoc, phai doi sang ::before
dat tuyet doi => can position:relative. Padding-left bu lai 5px vua bo. */
/* V26 — NHAN CHU thay cay gach. Cot phai da ghi "Quang cao Trang Vang"
duoi moi banner; R1 la CUNG MOT loai inventory nen dung cung cai nhan.
⚠ Dat bang `content:` nen KHONG chon duoc, KHONG dich duoc, va mot so
trinh doc man hinh bo qua. Danh doi de giu 0 byte ASP. Nhan quang cao
NEN nam trong markup — do la mot lat ASP rieng, toi khuyen nen lam. */
/* V39 — NHAN "QUẢNG CÁO TRANG VÀNG" DA BO khoi dai banner top.
Ly do bat buoc: tu V39 chinh khung nay con dung cho BON O KHUYEN MAI cua
Trang Vang khi khong co banner. Giu nhan lai thi khung se tu goi loi moi
cua chinh minh la quang cao cua khach — sai nghia.
⚠ Danh doi: cong bo quang cao gio CHI con o cot phai
(.div_banner .star_text — ban do van co phep do "cong bo QC cot phai").
Day la mot LUA CHON, khong phai sot. */
/* ============================================================================
V48 — NUT DAU TRANG: TRA LAI MAU CHU KHI RE CHUOT
----------------------------------------------------------------------------
Tep nay co mot luat quet CA TRANG:
body[data-yp-kind="listing"] a:hover{ color:var(--cta-deep)!important } (0,2,2)
`.ypx-cta:hover` ben yp_header.css chi (0,2,0) nen THUA. Ket qua khi re
chuot vao nut "+ Đăng ký miễn phí": chu thanh #9A3412, ma nen hover cua
chinh nut do cung la #9A3412 (--ypx-cta-deep). Chu trung nen, bien mat.
Chi hong tren cls vi luat a:hover kia nam trong tep nay.
⚠ KHONG thu hep luat a:hover goc. No dang phu cho hang tram lien ket ma
toi khong dua duoc het len ban do; thu hep no la doi mot loi DA BIET lay
mot loi CHUA BIET. Dat mau tuong minh cho tung nut la duong hep hon.
============================================================================ */
body[data-yp-kind="listing"] .ypx-cta:hover{ color:#FFFFFF!important }
/* ============================================================================
V47 — BA KHOI CHAN TRANG. Tien to .ypf-* (yp footer).
----------------------------------------------------------------------------
⚠ KHONG dung lai `.ypx-chip` / `.ypx-chips`: hai ten do DA BI CHIEM trong
chinh tep nay (5 lan moi cai) cho dai chip cua accordion dien thoai. Trung
ten thi hong am tham — dung ho bay B23. `ypf-` do duoc 0 lan truoc V47.
Gia tri lay tu index.asp / yp_home2.css de hai trang cung mot nhip:
eyebrow 12px/700/.11em · h2 24px/700/-.015em · loi dan 15px/1.55
hai cot minmax(0,1fr) 380px gap 40px
nut padding 11px 20px, bo goc 6px, rong 100%
⚠ Vach tren cua the hanh dong dung --qc-rule (#D78461) chu KHONG phai vang.
Tu V44/V45 vang mang nghia "khung suon do Trang Vang dung" (dai banner,
khoi rao, muc dang chon). The nay khong phai khung suon — no la LOI MOI
DANG KY, cung loai voi the o cot phai (yp_dangky.css) ma nguoi dung da
chon #D78461 cho no o lat V40. Mot mau cho mot loai.
Tien the: --qc-rule tro lai co viec sau khi V44 thoi dung no.
============================================================================ */
/* ===== CHAN TRANG cls — .ypf-* (ypf = yp footer) ===================== */
body[data-yp-kind="listing"] .ypf-eb{
font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
color:var(--muted); margin:0 0 10px;
}
body[data-yp-kind="listing"] .ypf-h2{
font-size:24px; font-weight:700; letter-spacing:-.015em; color:var(--ink); margin:0;
}
body[data-yp-kind="listing"] .ypf-ld{
margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--muted); max-width:760px;
}
body[data-yp-kind="listing"] .ypf-alt{
margin:20px 0 0; font-size:14px; line-height:1.55; color:var(--muted);
}
/* --- 1. TU KHOA CUNG NGANH --- */
body[data-yp-kind="listing"] .ypf-keys{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
body[data-yp-kind="listing"] .ypf-k{
display:inline-block; padding:6px 13px; border-radius:999px;
border:1px solid var(--line); background:var(--surface);
font-size:14px; font-weight:500; color:var(--action)!important; text-decoration:none;
}
body[data-yp-kind="listing"] .ypf-k:hover{
border-color:var(--action); background:var(--action-tint);
color:var(--action-deep)!important; text-decoration:none;
}
/* --- 2. DANH CHO DOANH NGHIEP --- */
body[data-yp-kind="listing"] .ypf-biz{
display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:40px; align-items:start;
}
body[data-yp-kind="listing"] .ypf-sub{
margin:9px 0 0; font-size:15px; line-height:1.55; color:var(--muted); max-width:var(--ypx-prose);
}
body[data-yp-kind="listing"] .ypf-once{
margin-top:22px; padding:16px 18px; background:var(--action-tint); border-radius:8px;
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
body[data-yp-kind="listing"] .ypf-once-b{
font-size:28px; font-weight:700; color:var(--action-deep);
letter-spacing:-.03em; line-height:1; flex:0 0 auto;
}
body[data-yp-kind="listing"] .ypf-once-t{ font-size:14.5px; color:var(--action-deep); line-height:1.45 }
body[data-yp-kind="listing"] .ypf-ul{
list-style:none; margin:20px 0 0; padding:0;
display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px;
}
body[data-yp-kind="listing"] .ypf-ul li{
position:relative; padding-left:20px; font-size:14.5px; line-height:1.5; color:var(--muted);
}
body[data-yp-kind="listing"] .ypf-ul li::before{
content:""; position:absolute; left:0; top:6px; width:8px; height:8px;
border-radius:2px; background:var(--brand);
}
body[data-yp-kind="listing"] .ypf-ul li b{ color:var(--ink); font-weight:600 }
body[data-yp-kind="listing"] .ypf-bizr{
background:var(--surface); border:1px solid var(--line);
border-top:4px solid var(--qc-rule); border-radius:10px; padding:24px;
}
body[data-yp-kind="listing"] .ypf-pr{ font-size:13px; color:var(--muted); margin:0 0 4px }
body[data-yp-kind="listing"] .ypf-p1{ font-size:16px; font-weight:700; color:var(--ink); margin:0 0 14px }
body[data-yp-kind="listing"] .ypf-mt{ margin-top:22px }
body[data-yp-kind="listing"] .ypf-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
border-radius:6px; font-weight:600; font-size:15px; padding:11px 20px;
border:1px solid transparent; line-height:1.2; text-decoration:none!important;
width:100%; box-sizing:border-box; margin-bottom:10px;
}
body[data-yp-kind="listing"] .ypf-btn-cta{ background:var(--cta); color:#FFFFFF!important }
body[data-yp-kind="listing"] .ypf-btn-cta:hover{ background:var(--cta-deep); color:#FFFFFF!important }
body[data-yp-kind="listing"] .ypf-btn-gh{
background:var(--surface); color:var(--action)!important; border-color:var(--action);
}
body[data-yp-kind="listing"] .ypf-btn-gh:hover{ background:var(--action-tint); color:var(--action-deep)!important }
body[data-yp-kind="listing"] .ypf-or{
text-align:center; font-size:12.5px; color:var(--faint); margin:14px 0 10px;
}
body[data-yp-kind="listing"] .ypf-tel{ font-size:14px; color:var(--muted); line-height:1.7; margin:0 }
body[data-yp-kind="listing"] .ypf-tel a{ color:var(--cta-deep)!important; font-weight:600; text-decoration:none }
/* --- 3. MUC LUC A-Z --- */
body[data-yp-kind="listing"] .ypf-az-keys{
display:grid; grid-template-columns:repeat(25,minmax(0,1fr)); gap:8px; margin-top:22px;
}
body[data-yp-kind="listing"] .ypf-az-keys a{
min-width:0; height:44px; display:grid; place-items:center; border-radius:6px;
background:var(--surface); border:1px solid var(--line);
font-size:16px; font-weight:600; color:var(--ink)!important; text-decoration:none;
}
body[data-yp-kind="listing"] .ypf-az-keys a:hover{
background:var(--brand-pick); border-color:var(--brand-line); color:var(--ink)!important;
}
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypf-biz{ grid-template-columns:minmax(0,1fr); gap:24px }
body[data-yp-kind="listing"] .ypf-ul{ grid-template-columns:minmax(0,1fr) }
body[data-yp-kind="listing"] .ypf-az-keys{ grid-template-columns:repeat(8,minmax(0,1fr)) }
}
body[data-yp-kind="listing"] .ypx-r1{
position:relative;
/* V45 — quet pixel me trai cum banner tren hai anh:
ban dang chay x=274..277 #FFDE06 (vach 4px) · x=278.. #FFFDF3 (nen kem)
ban cua ta x=316..323 #FCFBF6 (nen) · x=324 #EAE6DD (vien)
Ta thieu dung hai thu: vach vang va nen kem. Them ca hai.
⚠ 4px chu khong 3px nhu khoi rao: khoi nay rong gap doi (1272 so voi
640) nen 3px tren no doc ra MANH hon. Ban dang chay cung 4px o day va
3px o khoi rao — bu quang hoc, khong phai khong nhat quan. */
background:var(--brand-pick);
border-color:var(--line)!important;
border-left:4px solid var(--brand)!important;
border-radius:12px!important;
box-shadow:none!important;
}
/* vach doc ngan cach hai banner: lui ve --line cho dong bo */
body[data-yp-kind="listing"] .ypx-r1 .border-end{ border-color:var(--line)!important }
/* ============================================================================
M4b — COT QUANG CAO PHAI (R4)
----------------------------------------------------------------------------
Moi banner thanh mot o co vien, bo goc — dong bo voi the listing.
Nhan "NHA TAI TRO" duoi banner: L5 dat .star_text = --cta vi TREN THE no
la huy hieu cua hang da ban. O day cung chu ay la LOI CONG BO ("day la
quang cao"), nen lui ve chu hoa nho mau --muted. Khong dung --faint:
3,21:1 o co 9,5px thi khong doc duoc, ma loi cong bo thi phai doc duoc.
============================================================================ */
/* V26 — bo goc VUONG. Anh quang cao la anh khach gui, thuong da co khung
rieng; bo goc cua ta cat mat goc anh cua ho. */
body[data-yp-kind="listing"] .div_banner img.w-100{
border-color:var(--line)!important;
border-radius:0!important;
box-shadow:none!important;
}
body[data-yp-kind="listing"] .div_banner .star_text{
color:var(--muted); font-size:12px; font-weight:600;
letter-spacing:.09em; text-transform:uppercase;
}
body[data-yp-kind="listing"] .div_banner .h_15{ opacity:.7 }
/* khoi "Ban la doanh nghiep?" — dong bo vien/bo goc voi the listing */
body[data-yp-kind="listing"] .div_banner .color666{
border-color:var(--line)!important;
border-radius:12px!important;
background:var(--surface);
}
/* ============================================================================
M5 — COT LOC BEN TRAI (v23 §.panel / §.lst)
----------------------------------------------------------------------------
0 byte ASP. Markup da co san; nham bang cau truc:
tieu de > p.h6
muc > p:not(.h6)
dang xem > p.mt-1 + p (dong 1118 la tieu de DUY NHAT mang .mt-1,
nen p ngay sau no chinh la muc dang xem)
⚠️ Le am -16px an theo .p-3 (= 1rem = 16px) cua chinh .div_nganh. Doi p-3
thanh p-2 thi phai doi ca hai so cung luc.
⚠️ .m-0 .mt-1 .pt-4 la lop KHOANG CACH cua bootstrap, deu kem !important —
moi cho de len khoang cach bat buoc phai co. Co chu va mau thi khong can.
============================================================================ */
/* tieu de nhom: nhan nho chu hoa, gach chan chay het be rong khung */
body[data-yp-kind="listing"] .ypx-panel > p.h6{
margin:0 -16px 4px!important;
padding:0 16px 10px!important;
border-bottom:1px solid var(--line-soft);
font-size:11px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--muted);
}
body[data-yp-kind="listing"] .ypx-panel > p.h6.pt-4{ margin-top:20px!important }
body[data-yp-kind="listing"] .ypx-panel > p.h6 i{ color:var(--gold) }
/* moi muc mot hang go, co duong phan cach mo */
body[data-yp-kind="listing"] .ypx-panel > p:not(.h6){
margin:0!important;
padding:9px 0!important;
border-bottom:1px solid var(--line-soft);
}
body[data-yp-kind="listing"] .ypx-panel > p:not(.h6) a{
/* V44 — 500 -> 400 (nguoi dung yeu cau). Muc DANG CHON GIU 600: luat cua
no (0,3,4) dac hieu hon luat nay (0,3,3) nen tu thang, KHONG can
!important — ban do dau tien cua toi dung !important va keo luon muc
dang chon xuong 400, sai. Da do lai: 400 va 600. */
font-size:13px; font-weight:400; line-height:1.42; color:var(--ink);
}
body[data-yp-kind="listing"] .ypx-panel > p:not(.h6) a:hover{
color:var(--action)!important;
}
/* o dem so: chu phu, khong canh voi ten nganh */
body[data-yp-kind="listing"] .div_nganh .text-black-50{
color:var(--muted)!important; font-weight:400;
}
/* muc dang xem: vach trai vang — cung ngon ngu voi the tra tien va dai R1 */
body[data-yp-kind="listing"] .ypx-panel > p.mt-1 + p{
position:relative;
margin:0 -16px!important;
padding:9px 16px 9px 13px!important;
background:var(--brand-pick); /* V44 — #FCFBF6 -> #FFFDF2 */
border-left:0;
border-bottom:0;
}
body[data-yp-kind="listing"] .ypx-panel > p.mt-1 + p::before{
content:""; position:absolute; left:0; top:7px; bottom:7px;
width:3px; border-radius:999px; background:var(--brand);
}
body[data-yp-kind="listing"] .ypx-panel > p.mt-1 + p a{ font-weight:600 }
/* ============================================================================
N1 — COT TRAI 4 PANEL · DAI R1 LUOI O · TINH/THANH THANH CHIP
============================================================================ */
/* o icon vuong o tieu de panel — mockup v23 §.panel>h3 .ic */
body[data-yp-kind="listing"] .ypx-panel > p.h6{ display:flex; align-items:center }
body[data-yp-kind="listing"] .ypx-panel > p.h6 > small{ flex:0 0 auto; margin-right:9px }
body[data-yp-kind="listing"] .ypx-panel > p.h6 i{
display:inline-grid; place-items:center; width:24px; height:24px;
/* V44 — teal -> gold. GIU chip bo goc chu khong bo nhu ban dang chay:
tieu de o cua ta la chu HOA co gian cach + duong ke duoi, nang hon ban
kia, nen mot ky tu tran troi canh no trong bi troi.
Muon giong het ban dang chay: doi hai gia tri duoi thanh
background:none; color:var(--gold); va bo width/height. */
border-radius:7px; background:var(--gold-bg); color:var(--gold);
font-size:11px; padding:0!important;
}
/* panel dau tien khong can margin-top; cac panel sau khong con .pt-4 le */
body[data-yp-kind="listing"] .ypx-panel > p.h6.pt-4{ margin-top:0!important }
body[data-yp-kind="listing"] .ypx-panel > p:last-child{ border-bottom:0 }
/* TINH/THANH — vien thuoc xep ngang thay vi danh sach doc */
body[data-yp-kind="listing"] .ypx-chips > p:not(.h6){
display:inline-block; border-bottom:0;
margin:0 6px 6px 0!important; padding:0!important;
}
body[data-yp-kind="listing"] .ypx-chips > p:not(.h6) a{
display:inline-block; padding:5px 11px; border-radius:999px;
background:var(--surface); border:1px solid var(--line);
color:var(--muted); font-size:13px; font-weight:500;
}
body[data-yp-kind="listing"] .ypx-chips > p:not(.h6) a:hover{
background:var(--action-tint); border-color:var(--action-line);
color:var(--action-deep)!important;
}
/* ============================================================================
DAI R1 — LUOI BON O CO DINH
----------------------------------------------------------------------------
⚠ V37 DAO NGUOC quyet dinh cu, ghi ro chu khong lam lang le.
Chu thich cu: "grid-auto-flow:column chia deu bat ke co may banner, nen
khong phu thuoc addtop_count". Y do la tranh phu thuoc so luong — nhung
do CHINH LA hanh vi nguoi dung khong muon: hai banner thi moi cai phinh
len 50% be ngang.
categories.asp — ban dang chay tren trangvangvietnam.com — dung BE RONG
CO DINH, khong chia deu:
dong 727 mixcell=TRUE -> .addtop50 = 50%
dong 729 con lai -> .addtop25 = 25%
Thieu banner thi phan con lai DE TRONG. Do la hanh vi dung.
Markup cua cls.asp DA DUNG SAN: mixcell -> .col-sm-6 (6/12 = 50%),
con lai -> .col-sm-3 (3/12 = 25%). Chi CSS sai. Nen chi sua CSS.
Do sau lat (dai rong 935px):
o don LUON 226,3px (truoc: 226,3 · 305 · 462,5 · 935 tuy so o)
o ghep doi LUON 462,5px
3 o -> lap day 72,6% · 2 o -> 48,4% · 1 o -> 24,2%
⚠ NHANH DIEN THOAI KHONG DINH DANG TOI: no da dung san va la MOT CACH KHAC,
dung nhu categories.asp — .w-100 / .w-50 tren float, thieu thi tu bo trong
(doi chieu categories.asp 763/765 = .addtop_mobile_100 / _50).
============================================================================ */
body[data-yp-kind="listing"] .ypx-r1 > .row{
display:grid; grid-template-columns:repeat(4,1fr);
gap:10px; margin:0!important;
}
body[data-yp-kind="listing"] .ypx-r1 > .row > .col-sm-3{ grid-column:span 1 }
body[data-yp-kind="listing"] .ypx-r1 > .row > .col-sm-6{ grid-column:span 2 }
body[data-yp-kind="listing"] .ypx-r1 > .row > *{
width:auto; max-width:none; flex:none; margin-top:0;
display:grid; place-items:center;
padding:7px 11px;
background:var(--surface);
border:1px solid var(--line);
border-radius:8px;
}
/* vach doc ngan cach cu khong con can — moi banner da co vien rieng */
body[data-yp-kind="listing"] .ypx-r1 .border-end{ border-right:0!important }
body[data-yp-kind="listing"] .ypx-r1 > .row > * img{ width:100%; height:auto }
/* ============================================================================
V39 — BON O KHUYEN MAI, DUNG CHUNG VO VOI DAI BANNER
----------------------------------------------------------------------------
Truoc V39 bon o nay nam trong mot khung RIENG (.yp_top4ngang_pc, bon the
trang roi rac) trong khi dai banner nam trong .ypx-r1. Hai vo khac nhau cho
cung mot vi tri tren trang. Nay dung CHUNG .ypx-r1 va CHUNG luoi 4 cot cua
V37, chi them mot lop bien the .ypx-r1p de o chua CHU thay vi chua ANH.
Bo bieu tuong theo yeu cau: bon anh png cu khong con duoc goi.
Mau hai nhan theo DUNG vai da ghi trong yp_tokens.css:
"xanh la = su that mien phi" -> [Miễn phí] --vf-ink tren --vf-bg 4,52:1
"cam = chuyen doi" -> [Nổi bật] --tt-ink tren --tt-bg 6,40:1
Chu trong o tren nen trang: tieu de --ink 18,24:1 · than --muted 7,10:1.
⚠ .ypx-r1 van giu `position:relative` du ::after da bo. No khong con mua gi,
nhung css_cls.css (KHONG CO trong phien nay) co the co con dinh vi tuyet
doi ben trong. Bo mot dong khong do duoc de doi 0 byte la danh doi sai.
============================================================================ */
body[data-yp-kind="listing"] .ypx-r1p > .row > *{
place-items:stretch; /* o anh can giua; o chu thi khong */
padding:11px 13px;
}
body[data-yp-kind="listing"] .ypx-pc{ display:block; text-decoration:none; color:inherit }
body[data-yp-kind="listing"] .ypx-pc-h{
display:block; font-size:14.5px; font-weight:600; line-height:1.35; color:var(--ink);
}
body[data-yp-kind="listing"] .ypx-pc-tag{
display:inline-block; font-style:normal; white-space:nowrap;
font-size:11px; font-weight:600; line-height:1.5;
padding:0 7px; border-radius:999px; margin-left:3px; vertical-align:1px;
}
body[data-yp-kind="listing"] .ypx-pc-free{ background:var(--vf-bg); color:var(--vf-ink) }
body[data-yp-kind="listing"] .ypx-pc-hot{ background:var(--tt-bg); color:var(--tt-ink) }
body[data-yp-kind="listing"] .ypx-pc-b{
display:block; margin-top:6px; font-size:13px; line-height:1.55; color:var(--muted);
}
body[data-yp-kind="listing"] .ypx-pc-b b{ color:var(--ink); font-weight:600 }
body[data-yp-kind="listing"] .ypx-pc:hover .ypx-pc-h{ color:var(--action) }
/* ============================================================================
N2 — KHUNG: vo 1480px + ba cot 260 / 1fr / 336
----------------------------------------------------------------------------
CHAN#1 da go duoc bang phep tinh, khong can do anh goc:
hien tai 1320 - 16 = 1304 long · .div_banner 27% = 352,1 px
sau lat 1480 - 48 = 1432 long · 260 +24+ 788 +24+ 336 = 1432
336 < 352,1 => anh banner THU NHO, khong phong to => khong vo net.
Anh goc chac chan >= 352 vi no dang hien o 352 va khong ai keu mo.
Cot giua 681 -> 788 px (+107, +15,7%). Do la ly do chinh cua lat.
NGUONG: min-width:992 la mat sau cua max-width:991 DA CO (css_cls.css
dung 6 lan) — khong phai so moi. min-width:1260 la nguong moi DUY NHAT
cua ca du an, dung dung o day.
============================================================================ */
body[data-yp-kind="listing"]{
/* V6: 260 -> 208. Do bang NHAN THAT (11 nhan trang Inox, 8 nhan trang
Non-Mu), KHONG mien phi nhu §H bao cao Buoc 0 tuong:
ray 260/240/224 -> Inox 15 dong · Non-Mu 14/14/16 dong
ray 208 -> Inox 16 dong · Non-Mu 16 dong
Gia: +1 dong (Inox) / +2 dong (Non-Mu). Vach that nam giua 208-240.
Doi sang 224 hoac 240 = doi DUNG con so nay, khong gi khac. */
--ypx-rail-filter:208px;
--ypx-rail-ad:336px;
}
/* Hien chuong §1 Luat 1 — vo co gian co TRAN, KHONG bac thang.
Bootstrap chia container-xxl thanh 5 bac; dat tran khong dieu kien la bo
het cac bac do. width:100% cua bootstrap van giu nen khong bao gio tran. */
body[data-yp-kind="listing"] .container-xxl{ max-width:var(--ypx-shell) }
/* dem ngang 24px — TRU the mang ps-0 (dong 949), do la co y bo dem */
body[data-yp-kind="listing"] .container-xxl:not(.ps-0){ padding-inline:24px!important }
/* ba cot: bo float va width% cu, de luoi lo lieu */
body[data-yp-kind="listing"] .ypx-cols > .div_nganh,
body[data-yp-kind="listing"] .ypx-cols > .div_listing,
body[data-yp-kind="listing"] .ypx-cols > .div_banner{
width:auto; float:none; padding-left:0; padding-right:0;
}
/* bac 2: 992-1259 — hai cot, cot loc an (mockup .side) */
@media screen and (min-width:992px){
body[data-yp-kind="listing"] .ypx-cols{
display:grid; gap:var(--ypx-gap); align-items:start;
grid-template-columns:minmax(0,1fr) var(--ypx-rail-ad);
}
body[data-yp-kind="listing"] .ypx-cols > .div_nganh{ display:none }
}
/* bac 3: >=1260 — ba cot day du */
@media screen and (min-width:1260px){
body[data-yp-kind="listing"] .ypx-cols{
grid-template-columns:var(--ypx-rail-filter) minmax(0,1fr) var(--ypx-rail-ad);
}
body[data-yp-kind="listing"] .ypx-cols > .div_nganh{ display:block }
}
/* ============================================================================
N3 — HUY HIEU dan lien · HANG H1 · NHAN COT PHAI
----------------------------------------------------------------------------
Mockup ve "Xac thuc" va dau "?" thanh MOT vien thuoc lien mach. Mockup lam
viec do bang cach dat BEN TRONG — da thu bang html5lib:
trinh duyet ve dung, nhung do la HTML khong hop le (span la phrasing,
details la flow).
O day giu lam ANH EM cua roi DAN LIEN bang CSS: bo bo goc
phia trong, bo vien giua, triet khe flex bang margin am. Hinh dang y het
mockup, ma cay DOM van hop chuan.
============================================================================ */
/* nua trai — vien thuoc "Xac thuc" */
/* nua TRAI cua vien thuoc — bo vien phai de noi lien voi nua phai */
body[data-yp-kind="listing"] .ypx-bdg .duocxacthuc{
border-radius:8px 0 0 8px; border-right:0; padding-right:7px;
}
/* dau kiem SVG — theo mau he, thay anh xacminh6.png mau xanh duong */
body[data-yp-kind="listing"] .ypx-ck{
width:11.5px; height:11.5px; flex:0 0 auto; display:block; /* V30 — 13 -> 11,5 */
color:var(--xt-ink);
}
/* nua phai — dau "?"; margin am triet dung khe gap:10px cua .ypx-bdg */
body[data-yp-kind="listing"] .ypx-xt[open] > summary{
background:var(--xt-ink); border-color:var(--xt-ink); color:var(--surface);
}
/* ============================================================================
HANG H1 — "Inox, Thep Khong Gi" + "745 cong ty · 29 tinh thanh"
----------------------------------------------------------------------------
V34 — CAN THEO DUONG CO CHU.
Truoc V34 hai khoi can bang `padding-top:7px` — mot so UOC LUONG BANG TAY.
Do bang moc duong co chu (chen inline-block 1x1px roi doc rect.bottom,
vi day hop cua mot inline-block rong nam DUNG tren duong co chu):
dong dem CAO HON co chu H1 5,0 px -> chinh la cho "lech" nhin thay.
7px khong the dung duoc, vi khoang tu dinh hop den duong co chu phu thuoc CA
HAI co chu (28px va 14px) lan line-height — va se sai LAI moi lan doi co chu.
`align-items:baseline` la phep can THAT: trinh duyet tu tinh, dung mai.
⚠ Chuyen sang flex thi hai the con THOI LA FLOAT, nen the cha lan dau tien
BAO duoc chung: khoi H1 phinh 41 -> 49px, tuc DAY banner xuong 2px, nguoc
y muon lam chat. Bu bang dem doc 8px -> 4px => khoi H1 ve DUNG 41px.
Do lai: 41 -> 41. Va the chu tu 8px-tren/0px-duoi (lech) thanh 4/4 (can).
⚠ column-gap:0 — khe ngang giua H1 va dong dem DA co san 8px tu `ps-2` cua
chinh dong dem. Them gap la cong doi. Do lai: x chu dau dong dem 433,4 ->
433,4, me phai H1 425,4 -> 425,4. Khong nhich.
⚠ `:has()` vi the boc KHONG CO lop rieng — no chi mang lop tien ich bootstrap
dung chung ca trang. Bam vao con truc tiep la neo hep nhat co the ma khong
phai sua ASP.
============================================================================ */
body[data-yp-kind="listing"] .container-xxl:has(> .float-start > h1){
display:flex; align-items:baseline; flex-wrap:wrap; column-gap:0;
padding-top:4px!important; padding-bottom:4px!important;
}
body[data-yp-kind="listing"] .container-xxl:has(> .float-start > h1) > .float-start{
float:none!important;
}
body[data-yp-kind="listing"] .ypx-cnt{
font-size:14px; color:var(--muted); padding-top:0!important; /* V34 — bo doan 7px */
}
body[data-yp-kind="listing"] .ypx-cnt b{ color:var(--ink); font-weight:600 }
/* ----------------------------------------------------------------------------
V34 — HAI KHE CUA CUM BANNER TOP 4 NGANG
khe TREN 16 = mb-2 cua khoi H1 (8) + p-2 tren cua the boc (8) -> 10 (-6)
khe DUOI 24 = p-2 duoi cua the boc (8) + mt-3 cua khoi sau (16) -> 16 (-8)
Sua bang DEM cua dung the boc do. KHONG dung margin am, va KHONG dong toi
.p-2 / .mb-2 / .mt-3 cua bootstrap — chung dung chung ca trang.
Chi tac dung o kho PC: `.d_pc` = none tu <=991px (chinh tep nay ghi o §1090).
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .container-xxl.d_pc:has(> .ypx-r1){
padding-top:2px!important; padding-bottom:0!important;
}
/* V26 — O VUONG VANG DA BO. No 1,34:1 (khong phai tin hieu), va no nam
BEN TRAI chu trong khi ca cum bi day sang PHAI (`text-end`) => dau muc
tro vao khoang trong. Do la cho mat can bang, khong phai vi tri chu.
Bo o vuong thi chu nam sat me phai banner, can. */
body[data-yp-kind="listing"] .div_banner p:has(> .star_text){ margin-top:5px!important }
/* ============================================================================
P1 — mau truot AA cuoi cung · loi ra cho so bi che
----------------------------------------------------------------------------
.orange_bg #ff7500 = 2,69:1 tren chu trang — mau truot AA thu 5 va cuoi
cung. L5 va L6 deu co y hoan lai vi day la NUT CHUYEN DOI, dang duoc nhin
rieng. var(--cta) = 5,18:1, cung sac cam-do.
.orange_bg la (0,1,0), luat nay (0,2,1) => thang, khong can !important.
============================================================================ */
body[data-yp-kind="listing"] .orange_bg{ background:var(--cta) }
body[data-yp-kind="listing"] .orange_bg:hover{ background:var(--cta-deep) }
/* loi ra cho so dien thoai bi che — mockup v23 §.up */
body[data-yp-kind="listing"] .ypx-up{
margin-left:7px; white-space:nowrap;
font-size:12px; font-weight:600; color:var(--cta);
}
body[data-yp-kind="listing"] .ypx-up:hover{
color:var(--cta-deep)!important; text-decoration:underline;
}
/* ============================================================================
Q1 — MOT COT ICON (bat bien B3 cua dac ta v23)
----------------------------------------------------------------------------
Mockup: .row .k{ flex:0 0 16px; text-align:center } — nam icon nam trong
mot cot rong 16px nen chu gia tri o ca nam dong bat dau tai CUNG MOT toa
do x. Hien tai moi icon rong theo hinh chu cai nen nam dong lech nhau.
⛔ Goi DICH DANH nam lop icon, KHONG quet ".yp_diachi_logo i":
trong cung khoi con co .fa-circle-xmark kem .text-danger (dong 1400 —
"Thong tin nay co the khong con chinh xac"). Quet ca khoi se ep dau X
canh bao do thanh mau nhat. Do la tin hieu cho nguoi mua, khong duoc mo.
Hai icon phong bi (dong 1470/1477) von THIEU .text-black-50 nen dam hon
ba icon kia — luat nay dong thoi go not cho lech mau do.
.pe-1 cua bootstrap kem !important nen phai co !important de doi sang
margin — khe giua icon va chu phai nam NGOAI cot 16px.
============================================================================ */
body[data-yp-kind="listing"] .yp_noidunglistings .fa-location-arrow,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-location-dot,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-phone,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-mobile-screen-button,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-envelope,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-globe{
display:inline-block; width:16px; text-align:center;
color:var(--faint)!important;
font-size:13px;
padding-right:0!important; margin-right:9px;
}
/* V30 — nam dong lien he TACH LAM HAI BAC, khong con mot co chu.
= thong tin phu (dia chi · email · website) -> 13px
khong = so goi duoc ngay (dien thoai · hotline) -> 14px
13px la bac CO SAN tren thang (--ypx-t-scan-2), khong phai so la.
Website tu V30 cung duoc boc trong ASP nen ba dong phu dong bac. */
/* ============================================================================
V42 — THE KHONG CO LOGO: KHOI LIEN HE VE SAT ME TRAI
----------------------------------------------------------------------------
Do bang pixel tren anh that (1601px): me trai the x=449 · khung logo cua the
CO logo x 490->616 · dong dia chi bat dau x=631 TREN CA BA THE, co logo hay
khong. The khong logo mat trang 141px.
Nguyen nhan la mot dau IF dat sai cho, va NHANH DIEN THOAI DA LAM DUNG:
dien thoai (§1407): IF boc CA the cot logo -> khong co logo, khong
co the nao
PC (§1474): IF nam BEN TRONG the -> the van dung, rong ruot
V42 cho PC lam giong dien thoai.
⚠ Bo cai IF THOI CHUA DU: `.yp_diachi_logo` co be rong rieng khai trong
css_cls.css — TEP KHONG CO trong phien nay. Bo cot logo di thi khoi lien he
van giu be rong cu. Nen phai co lop danh dau + luat duoi day.
⚠ !important o day la LUA CHON CO CAN NHAC: khong doc duoc css_cls.css nen
khong biet do dac hieu ben do. Bo chon neo hep (0,3,1). Lat nao co
css_cls.css thi do lai roi bo !important.
Do sau lat (cot noi dung 696px): khoi lien he 497 -> 638px, lui vao 141 -> 0.
The CO logo khong doi mot pixel nao.
============================================================================ */
body[data-yp-kind="listing"] .ypx-nologo .yp_diachi_logo{
float:none!important; width:100%!important;
/* V43 — do lai tren anh SAU KHI deploy V42: van con 13px le trai.
Hai moc doc lap cung chi mot so: dong "Ngay cap nhat" o x=580 va chu
"NGANH" o x=581, con dong dia chi o x=593.
`.yp_diachi_logo` mang mot le trai rieng khai trong css_cls.css. Khi CO
logo, 13px do la khoang tho giua cot logo va chu — dung. Khi KHONG co
logo no thanh le thua.
⚠ Khong doc duoc css_cls.css nen khong biet no dung THUOC TINH nao.
13px la so DO DUOC; ten thuoc tinh la SUY DINH. Nen dat ve 0 CA BA
cach mot khoi co the bi day vao trong MA KHONG nhin thay duong ke.
(border-left thi se NHIN THAY duong ke, anh chup khong co — bo qua.)
Lat nao co css_cls.css thi do lai roi giu dung mot dong can thiet. */
margin-left:0!important; padding-left:0!important; text-indent:0!important;
}
body[data-yp-kind="listing"] .yp_diachi_logo > p{ font-size:14px; line-height:1.62 }
body[data-yp-kind="listing"] .yp_diachi_logo > p > small{ font-size:13px }
/* ============================================================================
R23 — HAI VUNG DOANH THU BAN DIEN THOAI
----------------------------------------------------------------------------
Sau lat nay ca BON vung doanh thu noi cung mot ngon ngu voi vach vang cua
the tra tien (L7e) va cua muc dang xem o cot loc (M5): thay vach vang o
dau la biet cho do co nguoi tra tien de xuat hien.
⚠️ R2 xep banner bang float w-50 / w-100 tuy truong "mixcell". Dat
display:grid o day se PHA cach xep do — GIU NGUYEN float, chi them nen,
vach va o vien. Khac R1: R1 dung bootstrap .row nen M4 luoi hoa duoc.
============================================================================ */
/* R2 — dai addtop tren cung, ban dien thoai */
body[data-yp-kind="listing"] .ypx-r2{
position:relative;
background:var(--brand-soft);
border:1px solid var(--line);
border-left:0;
border-radius:12px;
padding-bottom:8px!important;
}
body[data-yp-kind="listing"] .ypx-r2 > div{
padding:6px!important;
}
body[data-yp-kind="listing"] .ypx-r2 img{
/* ⚠ V60: PHAI co !important. Luat nay truoc day CHET — do tren tep dang
chay ra vien #DEE2E6 chu khong phai #EAE6DD. The ![]()
mang class
`border` cua Bootstrap, ma utility Bootstrap deu !important; dac hieu
khong bao gio thang !important (bai hoc V56). Luat ANH EM ngay duoi
(.banneradd_mobile img) da co !important tu truoc — khoi nay bi bo sot. */
border:1px solid var(--line)!important; border-radius:0px!important;
background:var(--surface);
}
/* R3 — dai banner xen giua listing, ban dien thoai */
body[data-yp-kind="listing"] .banneradd_mobile img{
border:1px solid var(--line)!important;
border-radius:0px!important;
background:var(--surface);
}
/* ============================================================================
S1 — DAI ANH theo v23: o co dinh 76px + o "Chi tiet"
----------------------------------------------------------------------------
Do truoc: .img_sanpham la width:20% float. Cot giua nay rong 788px nen moi
o 157px, tru dem con 144px. Mockup dat --pic-w:76px co dinh.
144 -> 76: anh nho gan mot nua, dai anh thoi chiem het be ngang the, va
cho trong con lai dung cho o "Chi tiet".
⚠️ .hienthisanpham (o thu 5, an o <=500px) la mot CONG TAC display. Luat
duoi CHI dat flex-basis va width, TUYET DOI khong dat display — dung bai
hoc cua L7a-prime khi .ypx-bdg de len cong tac .hienthi_mobile.
============================================================================ */
body[data-yp-kind="listing"]{ --ypx-pic-cols:6; --ypx-pic-gap:8px }
body[data-yp-kind="listing"] .ypx-pics{
display:grid;
grid-template-columns:repeat(var(--ypx-pic-cols),1fr);
gap:var(--ypx-pic-gap);
align-items:start;
}
/* 🔴 .ypx-pics mang class .clearfix cua bootstrap:
.clearfix::after{ display:block; clear:both; content:"" }
Trong FLEX o do rong 0 nen vo hai. Trong GRID no thanh O THU 7 va
day xuong hang hai. Do chieu cao luoi (the 6 anh, truoc -> sau):
vp 640 114 -> 106 · vp 768 136 -> 128 · vp 1521 132 -> 124
Mat dung 8px (mot khe) o MOI the neu khong go. */
body[data-yp-kind="listing"] .ypx-pics::after{ display:none }
/* CHI width — khong dat display, de cong tac .hienthisanpham giu nguyen
quyen an o anh thu 5 duoi 500px (bai hoc L7a-prime).
width:auto de o an theo track 1fr; min-width:0 de anh dai khong
pha vo be rong track (mac dinh cua o luoi la min-width:auto). */
body[data-yp-kind="listing"] .ypx-pics > .img_sanpham{
width:auto; min-width:0;
float:none; padding-right:0!important;
}
body[data-yp-kind="listing"] .ypx-pics .div_img_sanpham{
height:auto!important; aspect-ratio:1/1;
display:grid!important; place-items:stretch;
/* V50 — 4px -> 8px, va ghi TUNG CANH mot chu khong viet gon.
Do tren anh chup that: dem trai 4px · phai 7px · DUOI 0px — anh tran
xuong roi bi overflow:hidden cat. Da thu tai hien tren ban do voi bon
ti le anh va bon huong sua: CA BON cho 4px deu bon canh, tuc nguyen
nhan KHONG o tep nay ma o css_cls.css (tep khong co trong phien lam).
Ghi tung canh + !important thi EP DOI XUNG bat ke ai dang lam lech,
dong thoi dap ung dung yeu cau "tang khoang cach anh va khung".
Anh 89,7 -> 81,7px moi chieu (-17% dien tich). */
padding-top:8px!important; padding-right:8px!important;
padding-bottom:8px!important; padding-left:8px!important; overflow:hidden;
}
body[data-yp-kind="listing"] .ypx-pics .div_img_sanpham_table_cell{
display:contents;
}
/* V24 — `contain` giu ti le nen anh ngang det chi cao 40px trong khung
100x100, anh doc thi hep: dai anh ra hang loi khong deu.
`cover` lam anh LAP DAY khung, phan thua cat deu hai ben => moi o
bang nhau, dai anh thanh mot hang phang.
⚠ cover CAT anh. Voi anh san pham (chup san pham giua khung) thi cat
vien la vo hai; neu co anh day chu o mep thi se mat chu — do la danh
doi cua cover, khong tranh duoc. object-position:center de phan giu
lai luon la phan giua. */
/* V51 — EP ANH VUONG. Do tren anh chup SAU KHI deploy V50:
o 98x98 · dem TREN 8px (V50 co tac dung) · dem DUOI 0px
anh ve 89px cao trong hop dem chi 80px => cao hon 9px, tran xuong
roi bi overflow:hidden cat.
Nguyen nhan: `height:100%` o day KHONG co !important (0,3,1), con
css_cls.css — tep khong co trong phien lam — gan nhu chac chan co
`.img_size{height:auto!important}`; !important thang bat ke do dac hieu.
⚠ Ban do V50 KHONG tai hien duoc vi no thieu css_cls.css nen khong co gi
de thang. V51 mo phong dung gia thuyet do va TAI HIEN DUOC:
anh 3:4 cao 108,9px trong hop 81,7px -> tran -19,2px
anh 4:3 · 1:1 · 16:9 -> khong sao
Khop dung trieu chung: chi vai o bi cham chu khong phai tat ca.
Sau khi sua: ca nam ti le deu dem 8 / 8.
HAI LOP DOC LAP NHAU:
a. width/height mang !important -> thang luat !important ben kia
b. aspect-ratio:1/1 lam DU PHONG -> neu height:100% van khong giai
duoc (phan tram tren hang luoi tu co — cung ho voi V29) thi ti le
tu ep hop anh thanh vuong, khong phu thuoc mot phan tram nao.
Hai cai KHONG danh nhau: khi height:100% giai duoc thi no bang dung
be rong nen ti le van thoa; khi khong giai duoc thi no thanh auto va
aspect-ratio moi vao viec.
min-*:0 va align/justify-self:stretch de bit not cac duong khac. */
body[data-yp-kind="listing"] .ypx-pics .img_size{
width:100%!important; height:100%!important;
aspect-ratio:1/1;
min-width:0; min-height:0;
align-self:stretch; justify-self:stretch;
max-width:none; max-height:none;
object-fit:cover; object-position:center; border-radius:5px;
}
/* o "Chi tiet" — cung co voi o anh, noi tiep cuoi dai */
/* V31 — .ypx-pdetail DA BO. O "Chi tiet" canh dai anh tro DEN DUNG trang ma
.ypx-detail o chan the da tro toi; hai nut mot dich trong mot the.
Dai anh GIU 6 COT: so anh chay 1..5 nen moi the it hon so cot deu chua
trong — ha xuong 5 cot khong xoa duoc khoang trong, chi phong o len
+21,6% va bien dai anh thanh khoi to nhat trong the. Xem chu thich S1. */
/* ============================================================================
L1 — DAI 501-991px
----------------------------------------------------------------------------
991px la nguong DA CO SAN cua css_cls.css, khong phai nguong moi.
Sau cong tac bam vao no: d_pc · d_mobile · pc_display · banneradd_mobile.
============================================================================ */
@media screen and (max-width:991px){
/* --------------------------------------------------------------------------
L1.a — LO TABLET. Day la thay doi NHIN THAY DUOC cua lat nay.
Voi nganh CHUA CO addtop, khoi khuyen mai "Dang ky / Quang cao Trang vang"
nam o hai nhanh ELSE:
· nhanh PC dong 940 .yp_top4ngang_pc — nhung nam TRONG khoi cha
dong 908 mang .d_pc, ma .d_pc = none tu <=991px
=> con an theo cha, bat ke .yp_top4ngang_pc van la block
· nhanh mobile dong 1079 .yp_top4ngang_m — chi block tu <=500px
⇒ Trong dai 501-991px KHONG khoi nao hien. Nganh chua ban duoc mat sach
CTA thu hut khach hang moi tren toan bo lanh tho iPad nam ngang.
Sua: cho .yp_top4ngang_m hien tu <=991px thay vi <=500px.
Kiem lai bang mo phong cascade (xem patch_ypcls_L1.py BUOC 6):
>991px -> chi .yp_top4ngang_pc hien
<=991px -> chi .yp_top4ngang_m hien
Dung MOT khoi o moi be ngang, khong bao gio hai, khong bao gio khong.
-------------------------------------------------------------------------- */
/* L5 — dac ta v23: h1.cat ha 23px o <=991px */
body[data-yp-kind="listing"] h1,
body[data-yp-kind="listing"] h1.fs-4{ font-size:23px!important }
body[data-yp-kind="listing"] .yp_top4ngang_m{ display:block }
/* --------------------------------------------------------------------------
L1.b — GO PHU THUOC THU TU DONG. KHONG doi mot pixel nao.
Trong css_cls.css, khoi @media 991 xep:
.div_nganh {display:block} <- (0,1,0)
.div_listing{...}
.div_banner{display:block} <- (0,1,0)
.pc_display{display:none} <- (0,1,0) THANG chi vi dung SAU 1 dong
Ca hai sidebar mang them .pc_display (dong 1108 va 1672), nen chung bi an
tren dien thoai CHI NHO thu tu dong. Sap xep lai css_cls.css la ca hai bung
ra va tong be rong thanh 18% + 100% + 27% = 145%.
Luat duoi day (0,2,1) thang tuyet doi, khong con phu thuoc thu tu.
Hien chuong §7 van cam sap xep lai css_cls.css — day la luoi an toan, khong
phai giay phep.
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .pc_display{ display:none }
}
/* ============================================================================
V3 — CHUOI KHONG KHOANG TRANG LAM TRAN NGANG CA TRANG (bay B16)
----------------------------------------------------------------------------
Do tren the that, website that 58 ky tu khong gach noi:
viewport 320/360/390/500 -> scrollWidth 589/592/594/602 = TRAN
link rong 470px trong hang chi co 287px
Nguong: 33 ky tu lien khong gach noi.
`anywhere` chu KHONG phai `break-word`: chi `anywhere` doi kich thuoc
min-content, tuc lam HOP CHA co lai. `break-word` de hop cha phong ra
roi van tran — do dung la ly do bay nay song sot o lgs.
Do lai sau khi sua: 320/360/390/500 scrollWidth = dung bang viewport.
Desktop 1521: 154 thuoc tinh DA TINH tren 14 phan tu, KHONG cai nao doi.
============================================================================ */
body[data-yp-kind="listing"] .yp_diachi_logo p,
body[data-yp-kind="listing"] .yp_diachi_logo_mobile p,
body[data-yp-kind="listing"] .text_quangcao{ overflow-wrap:anywhere }
/* ============================================================================
V4 — THANG CO CHU v24. Ba luat PHAI dat cuoi tep (bay B13).
----------------------------------------------------------------------------
1+2. markup mang .fs-4 (h1) va .fs-5 (h2) cua bootstrap, ma bootstrap khai
chung bang !important. Luat khong-!important cua ta THUA bat ke do
dac hieu. Da chay 29px/21px tren giay ma 24px/20px tren man hinh.
Do bang gia tri DA TINH moi thay; grep khong thay.
3. Khoi rao: hop day cot, DONG CHU chan 480px (Hien chuong Luat 3).
la inline nen max-width khong an => phai display:block.
font-size:inherit de go small{font-size:.875em} cua bootstrap,
neu khong 13px se thanh 11,375px.
============================================================================ */
body[data-yp-kind="listing"] h1.fs-4{ font-size:28px!important }
body[data-yp-kind="listing"] .yp_noidunglistings h2.fs-5{ font-size:18px!important }
/* BAY B13 (thu tu nguon) — DO DUOC, khong suy luan:
luat @media 991 {h1.fs-4{23px!important}} nam o GIUA tep, con luat 28px
o tren nam CUOI tep. Cung do dac hieu (0,3,1), cung !important =>
luat DUNG SAU thang, va h1 ra 28px o CA 390px. Do bang gia tri da tinh
moi thay. => phai lap lai nguong 991 o CUOI, sau luat 28px. */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] h1.fs-4{ font-size:23px!important }
}
body[data-yp-kind="listing"] .text_quangcao{ font-size:13px }
/* V24 — BO tran 480px cua V4.
V4 dat theo Hien chuong Luat 3 (chan dong van xuoi). Do duoc:
tran 480px -> 4 dong · 88px · ~57 ky tu/dong
het be rong -> 3 dong · 66px · ~76 ky tu/dong
🔴 76 ky tu/dong CAO HON nguong de doc, va Luat 3 sinh ra de tranh
dieu do. Nhung Luat 3 noi ve VAN XUOI — thu nguoi ta DOC tu dau den
cuoi. Khoi rao tren trang danh sach la thu nguoi ta QUET: doc 1-2
dong roi quyet dinh bam hay khong. Voi viec quet, SO DONG quan trong
hon so ky tu moi dong: 4 -> 3 dong la bot 25% chieu cao khoi.
Neu sau nay thay kho doc that, dua tran ve 560px (--ypx-prose):
~66 ky tu/dong va VAN 3 dong. Mot con so.
`display:block` phai giu: la inline, khong co no thi
font-size:inherit van chay nhung khoi khong xuong dong dung. */
body[data-yp-kind="listing"] .text_quangcao > small{
display:block; font-size:inherit;
}
/* ============================================================================
V5 — RAY SO: 6% troi noi -> 30px co dinh. The thanh flex.
----------------------------------------------------------------------------
css_cls.css dong 162-163 chia the bang %: 6% + 89% = 95%.
5% con lai la DU CUA PHEP CHIA, khong phai dem co y — do duoc 39,3px
khoang chet ben phai MOI the, 45 the moi trang.
Mockup v24 do o 390 / 768 / 1521px: card padding 16/16/16/10, rail 30px,
o so 26x26 bo goc 7px khong bong, chu 13px/700. GIU NGUYEN o moi be ngang
— khong co ban dien thoai rieng.
Sau lat: .cbody 699,5 -> 730,0 · khoang chet 39,3 -> 0
⛔ KHONG them overflow:hidden (mockup co): .ypx-xtp — khung giai thich
dau "?" cua lat L7b — la position:absolute nam TRONG the, se bi cat.
::before (vach vang) la position:absolute nen KHONG thanh o flex.
============================================================================ */
body[data-yp-kind="listing"]{
--ypx-rail-no:30px; /* mockup --rail */
--ypx-card-pad:16px; /* mockup --card-pad */
--ypx-card-pad-l:10px; /* mockup --card-pad-l — hep hon vi con vach vang 4px */
}
body[data-yp-kind="listing"] .ypx-card{
display:flex; align-items:flex-start;
padding-left:var(--ypx-card-pad-l);
padding-right:var(--ypx-card-pad);
}
/* le tren giu nguyen 16px o day, KHONG chuyen len the: .yp_noidunglistings
dung .mt-3 (=16px) cua bootstrap, dat them padding-top cho the la cong don
thanh 32px. Hai con dang canh nhau dung — do bang toa do y, khong doi. */
body[data-yp-kind="listing"] .ypx-card > .yp_sothutu{
flex:0 0 var(--ypx-rail-no); width:var(--ypx-rail-no);
/* V30 — dem 2px/2px -> 0px/4px. Ray van 30px (bat bien §9), o so van 26px;
chi doi CHO DUNG cua no trong ray: le trai -2, khe sang ten DN +2. */
float:none; padding:16px 4px 0 0;
}
body[data-yp-kind="listing"] .ypx-card > .yp_noidunglistings{
flex:1 1 auto; width:auto; min-width:0; float:none;
}
/* o so: 26x26 — dat CHIEU CAO tuong minh nhu mockup (.no{width:26;height:26;
display:grid;place-items:center}) chu KHONG tinh nguoc tu line-height.
Lan dau tu tinh: pt-1(4)+line-height(18)+pb-1(4)=26, do ra 27 — lech 1px
do metric cua phong. Dat height + place-items:center thi khong con phu
thuoc metric. box-sizing:border-box cua bootstrap khien height DA GOM dem,
nen pt-1/pb-1 (!important, khong de duoc) khong lam phinh o.
BO GOC: mockup dat 7px. KHONG khai o day — markup mang .rounded-2 cua
bootstrap = var(--bs-border-radius) = 6px, CO !important. Khai 7px khong
!important thi trinh duyet van dung 6px, tuc CSS noi doi. Da do: r6px.
Chenh 1px tren o 26px khong mua duoc gi — khong danh !important vi no. */
body[data-yp-kind="listing"] .yp_sothutu_txt,
body[data-yp-kind="listing"] .yp_sothutu_txt_small{
height:26px; display:grid; place-items:center; line-height:1;
box-shadow:none!important;
font-weight:700; font-variant-numeric:tabular-nums;
}
/* be rong chu so do bang phong that trong hop 26px:
13px "999"=27 TRAN · 12px "999"=24 vua
cls.asp dong 1308 tu chon lop theo dem_sothutu < 100 */
body[data-yp-kind="listing"] .yp_sothutu_txt{ font-size:13px }
body[data-yp-kind="listing"] .yp_sothutu_txt_small{ font-size:12px }
/* ============================================================================
V7 — DAI ANH: 5 COT DUOI 500px
----------------------------------------------------------------------------
KHONG phai lua chon tham my — la he qua cua chinh markup:
cls.asp 1550
css_cls.css 199 @media(max-width:500px){ .hienthisanpham{display:none} }
Duoi 500px chi con 4 anh + o "Chi tiet" = 5 o. Voi 6 cot thi cot thu 6
BO TRONG mot cach he thong va 5 o kia bi ep nho vo co.
Do duoc: vp 390 6 cot -> o 40,7px | 5 cot -> o 50,4px (+24%)
vp 500 6 cot -> o 59,0px | 5 cot -> o 72,4px (+23%)
500px la nguong DA CO SAN cua css_cls.css (dung 3 lan), khong phai so moi.
============================================================================ */
@media screen and (max-width:500px){
/* V63 — 5 -> 4 cot. Do @421px TRUOC: 4 anh hien nhung luoi dat 5 cot,
nen cot thu 5 BO TRONG va o cuoi dung truoc mep phai 69,4px
(57,2px @360 · 85,2px @500). Mep TRAI thi trung khop khoi chu quang
cao (lech 0), chi mep PHAI la hong — trong nhu luoi bi thut vao.
⚠ Nguyen nhan goc, khong phai tham my: chu thich V7 ngay tren ghi
"duoi 500px chi con 4 anh + o Chi tiet = 5 o". Hoi do o thu 5 CHUA
nut "Chi tiet". Nut ay DA DOI sang .ypx-cfoot (cls.asp:1670), nam
NGOAI luoi — da dem. Token 5 bi bo lai tu do. Doi ve 4 la TRA LAI
dung y dinh cua V7, khong phai gia tri moi.
Mot token nay chua CA HAI dieu nguoi dung xin: o to ra
(61,4 -> 78,8px @421, +28%) VA thang mep voi khoi chu quang cao. */
body[data-yp-kind="listing"]{ --ypx-pic-cols:4 }
}
/* ============================================================================
V8 — VO: DAU TRANG + CHAN TRANG ve day mau v24. CHI CSS, 0 byte ASP.
----------------------------------------------------------------------------
V2 doi 10 token mau nhung VO khong di theo: no lay mau tu lop tien ich
bootstrap va tu css_cls.css, khong qua token. Do gia tri DA TINH sau V7:
vien duoi dau trang #DEE2E6 (.border-bottom cua bootstrap) LANH
bong dau trang rgba(0,0,0,.075) (.shadow-sm) mockup KHONG co
nen o tim kiem #E8EAED (css_cls.css:29) LANH
chu o tim kiem #555555
nav 13,5px #111 (css_cls.css:34) nua pixel
nen chan trang #F6F6F6 (css_cls.css:12) LANH
🔴 CHAN TRANG VO HINH: #F6F6F6 vs canvas #F4F3F1 = 1,026:1.
Dai cao 118px ma mat khong phan biet duoc voi nen. Chu thich L4.a
da canh bao tu thang 7; V2 doi canvas sang #F4F3F1 lam no trung hon.
Mockup: #1E2126 vs canvas = 14,559:1.
Vi sao an toan du 94% moc dong bang nam o dau trang: con so do noi ve
MARKUP (id, name, ten ham JS). Lat nay khong dong mot ky tu markup nao.
============================================================================ */
/* --- DAU TRANG ------------------------------------------------------------ */
/* V13 — 8 luat dau trang cua V8/L5b DA XOA.
cls.asp gio dung chung voi index, nen
.yp_height_menu · .yptimkiem_click · #yp_top1/2/3 · .danhmuc KHONG CON
TON TAI trong trang => 8 luat do thanh CSS chet.
Luat cho topbar moi nam o yp_css/yp_header.css (tep DUNG CHUNG). */
/* --- CHAN TRANG ----------------------------------------------------------- */
/* V11 — 6 luat .bg_chantrang cua V8 DA XOA.
Ly do: cls.asp gio dung chung voi index,
lop .bg_chantrang khong con ton tai trong trang => 6 luat do thanh CSS
chet. Giu lai la de mot cai bay: nguoi doc sau se tuong chan trang cls
van do tep nay dieu khien.
⚠ V8 lam chan trang cls thanh MAU TOI theo mockup v24. Nhung ban that
dung chung (yp_footer.css) la MAU TRANG + vien tren. Mockup va production
da phan ky o VO tu truoc. Muon chan trang toi thi doi trong yp_footer.css
— mot cho, ca ba trang doi theo. */
/* ============================================================================
V9 — THANH LOC NGANG DUOI 1260px (mockup #filterbar.sidebar-h)
----------------------------------------------------------------------------
Duoi 1260px cot loc trai BIEN MAT hai lan: 992-1259 do luat luoi N2/V6,
<=991 do .pc_display. Nguoi dung dien thoai/tablet mat sach kha nang loc
theo nganh con va theo tinh thanh.
🔴 KHONG be nguyen cach cua mockup sang duoc. Mockup co 11 chip; trang
Inox that co 49 (12 nganh + 8 xem them + 29 tinh). Do chieu cao neu de
chip xuong dong tu do:
vp 1259 407px · 1024 480px · 768 607px · 390 **1191px**
1191px la ba man hinh chip TRUOC KHI thay mot cong ty.
Cach dung: MOI NHOM MOT HANG CUON NGANG, nhan dinh sticky ben trai.
vp 1259 183 · 1024 183 · 991 175 · 768 175 · 390 175
Chieu cao gan nhu khong doi, va KHONG giau mot chip nao.
Da can nhac va loai: cat bot bang nth-of-type (giau lien ket, khong co
loi ra) · max-height+overflow:hidden (cat cut) · (can markup).
============================================================================ */
@media screen and (max-width:1259px){
/* 1 — bat cot loc hien lai. (0,3,1) thang .pc_display (0,2,1) cua L1.b */
body[data-yp-kind="listing"] .ypx-cols > .div_nganh.pc_display{ display:block }
/* 2 — o dai 992-1259 .ypx-cols la luoi 2 cot: chiem tron hang dau.
Duoi 992 no la khoi thuong, tu nam tren .div_listing theo thu tu markup. */
body[data-yp-kind="listing"] .ypx-cols > .div_nganh{
grid-column:1 / -1;
margin-bottom:var(--ypx-gap)!important; /* .mb-5 = 48px, qua rong o day */
}
/* 3 — panel 1 la NGANH DANG XEM: h1 ngay tren da noi roi, va lien ket cua
no tro ve chinh trang nay. Mockup cung khong co nhom nay. */
body[data-yp-kind="listing"] .div_nganh > .ypx-panel:first-child{ display:none }
/* 4 — moi panel thanh MOT HANG cuon ngang */
body[data-yp-kind="listing"] .div_nganh .ypx-panel{
display:flex; flex-wrap:nowrap; align-items:center; gap:8px;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin;
padding:11px 16px!important; margin-bottom:8px;
}
/* 5 — nhan dinh ben trai de luon biet dang loc theo gi khi cuon */
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p.h6{
flex:0 0 auto;
margin:0!important; padding:0 6px 0 0!important;
border-bottom:0;
position:sticky; left:0; z-index:1; background:var(--surface);
}
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p.h6.pt-4{ margin-top:0!important }
/* 6 — moi muc thanh mot chip, khong xuong dong.
(0,5,1) thang M5 .ypx-panel > p:not(.h6) (0,4,1) */
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p:not(.h6){
flex:0 0 auto;
margin:0!important; padding:0!important;
border-bottom:0; border-left:0; background:none;
white-space:nowrap;
}
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p:not(.h6) a{
display:inline-block; white-space:nowrap;
padding:5px 11px; border-radius:999px;
background:var(--canvas); color:var(--muted); font-weight:500;
}
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p:not(.h6) a:hover{
background:var(--action-tint); color:var(--action-deep)!important;
}
/* 7 — muc DANG XEM giu vach vang, nhung o dang chip.
(0,5,2) thang M5 .ypx-panel > p.mt-1 + p (0,4,1) */
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p.mt-1 + p a{
background:var(--brand-soft); border:1px solid var(--brand-line);
color:var(--ink); font-weight:600;
}
}
/* ============================================================================
V27 — KHUNG LOGO CO DINH
----------------------------------------------------------------------------
css_cls.css 166-167 dat:
.logo_company{ width:100%; min-height:68px; display:table!important }
.logo_company_table_cell{ display:table-cell; vertical-align:middle }
.yp_logo_img_max{ max-width:100%; max-height:89px }
=> khung CAO THEO ANH: logo 40px thi khung 68px, logo 89px thi khung 89px.
Moi the mot chieu cao khac nhau, hang loi khong deu.
Doi sang khung VUONG co dinh 96x96, logo canh TAM ca hai truc.
⚠ `contain` chu KHONG phai `cover` nhu anh san pham (V24): anh san pham
cat vien thi vo hai, LOGO bi cat la hong nhan dien thuong hieu.
⚠ .logo_company_table_cell la `display:table-cell` — trong khung grid thi
sai. `display:contents` cho no bien mat khoi cay bo cuc, anh thanh con
truc tiep cua khung va nhan duoc place-items:center.
⚠ V29 — VI SAO V27 VAN TRAN, VA DONG NAO CHUA NO.
Do bang getBoundingClientRect tren Chromium 149, 8 ti le anh x 2 nguong,
loc offsetParent !== null:
truoc: tran toi +213,0px (PC 1521) · +235,0px (dien thoai 768)
sau : tran -9,0px · -7,0px (nam trong dem)
chieu cao khung 96,0 / 72,0 — KHONG doi truoc sau.
Nguyen nhan KHONG phai `contain`, KHONG phai `place-items`:
.yp_logo_img_max la PHAN TU LUOI. Phan tu luoi mang `min-width/min-height:
auto`, ma co toi thieu tu dong cua mot phan tu THAY THE chinh la CO NOI TAI
cua anh. Co toi thieu do THANG max-height:100%. Nen hang luoi phinh dung
bang chieu cao anh (do duoc: 138,844px · 190px · 300px) va anh lo ra ngoai.
⚠ DA THU VA DA BO `grid-template:1fr / 1fr`: do duoc +213,0 / +235,0 —
y het ban chua sua, KHONG doi mot pixel nao. Khong giu dong khong mua
duoc gi (B24).
⚠ `object-fit:contain` duoi day dang VO HIEU (hop anh dung bang co noi tai
da cap => ti le hop == ti le anh, khong co gi de nhet). GIU CO Y: la luoi
an toan cho §6.6 neu ve sau co luat ep ca width lan height, va la bat bien
§9 (contain phai == 1). Doi no khong lam thay doi gi hom nay.
⚠ Anh NHO HON khung GIU NGUYEN CO (40px van 40px) — PA A nguoi dung chot.
PA B (ep anh lap day o, object-fit moi that su lam viec) da dung trong ban
do va bi loai: lam nhoe logo nho.
============================================================================ */
body[data-yp-kind="listing"] .logo_company{
display:grid!important; place-items:center;
/* V30 — 96 -> 88 (nguoi dung xin bot 6-8) va dem 8 -> 5. Nhanh <=991px
o duoi (72px / 6px) KHONG DOI: phep do la tren man hinh PC. */
width:100%; height:88px; min-height:0;
padding:5px; box-sizing:border-box;
background:var(--surface);
border:1px solid var(--line); border-radius:8px;
}
body[data-yp-kind="listing"] .logo_company .logo_company_table_cell{
display:contents;
}
body[data-yp-kind="listing"] .logo_company .yp_logo_img_max{
max-width:100%; max-height:100%; width:auto; height:auto;
/* V29 — DONG GANH VIEC. Go co toi thieu tu dong cua phan tu luoi; neu
khong thi max-height:100% o tren khong bao gio duoc ap dung. */
min-width:0; min-height:0;
object-fit:contain; object-position:center;
}
@media screen and (max-width:991px){
/* V54 — 72 -> 56px. Do tren anh chup that o 421px: khung logo 51x71,
nang "Xác thực" ben phai chi cao ~30 => con ~41px trong ben phai logo,
duoi cai nang. Ban dang chay lap cho do bang mot dong "Ngành: ..." —
ta khong lam vay vi ten nganh DA co o chan the, them nua la ban sao
thu hai (dung bay ma V52 vua don). Thu khoang trong lai thi gon hon.
Do sau lat: the cao 255 -> 239px · trong ben phai 45 -> 20px.
45 the moi trang => trang ngan di khoang 720px.
56px KHONG nho hon ban dang chay: khung logo ben do do duoc ~62px. */
body[data-yp-kind="listing"] .logo_company{ height:56px; padding:6px }
/* Nang huy hieu nam GIUA chieu cao logo thay vi dinh len tren.
⚠ An toan: .yp_diachi_logo_mobile xuat hien DUNG MOT lan trong markup
(cls.asp §1413) va chi chua cai nang — da dem. Dat display:flex len
no khong dung toi khoi dia chi nao. */
body[data-yp-kind="listing"] .yp_diachi_logo_mobile{
display:flex; align-items:center; min-height:56px;
}
body[data-yp-kind="listing"] .yp_diachi_logo_mobile > .ypx-bdg{ margin-top:0!important }
}
/* ============================================================================
V52 — DIEN THOAI: BO BAN SAO THUA CUA BO LOC
----------------------------------------------------------------------------
Do tren ban dung that, the doanh nghiep dau tien bat dau o:
1400px y= 89 · 1259px y=304 · 1100px y=304 · 992px y=304
991px y=647 · 768px y=599 · 421px y=524
Duoi 992px trang dung DONG THOI hai giao dien loc mang CUNG MOT du lieu:
· hai accordion .d_mobile (cls.asp §1038, §1066) — chi hien tu <=991px
· ba dai chip cuon ngang, tuc chinh .div_nganh, do lat R23 bat lai
o <=1259px (xem chu thich R23 phia tren trong tep nay)
⚠ KHONG PHAI LOI CUA R23. O dai 992-1259px, .d_mobile la `none` nen dai
chip la giao dien loc DUY NHAT — bo no thi tablet mat sach bo loc. R23
dung o dai do. Cho no sai la o DUOI 992, noi accordion xuat hien va
thanh ban sao thu hai. Luat duoi day chi cat dung doan bi chong.
Vi sao giu ACCORDION chu khong giu DAI CHIP o <=991:
· accordion dong san (dau "+") nen an het chieu cao cho toi khi can —
thu nguoi ta den de xem la DANH SACH DOANH NGHIEP, khong phai bo loc
· dai chip luon mo, an 175px, va giau noi dung ben phai mep man hinh;
tren cam ung it nguoi biet ma keo ngang
· ban dang chay tren yellowpages.vn lam dung nhu vay
Do sau lat: 421px y=524 -> 316 · 991px y=647 -> 439 ( -208px )
1100 / 1259 / 1400px KHONG DOI
⚠ Ban do (?bando=1) do be rong cot loc qua $("#railfilter"); tu <=991px cot
do la display:none nen phep do ay ra 0 tren dien thoai. Ban do la cong cu
noi bo — ghi lai de khong ai tuong la loi moi.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypx-cols > .div_nganh.pc_display{ display:none }
/* Cum banner tren cung: bo khung. Ban dang chay de bon banner nam tran tren
nen trang; ban cua ta boc chung trong mot the kem co vien va bo goc — tren
man 421px do la ~16px chrome khong mang thong tin, va lam cum quang cao
trong giong mot the noi dung. Do: khoi cao 136 -> 120px o 421px.
⚠ CHI o <=991px. Cum banner ban PC (.ypx-r1) GIU NGUYEN khung kem + vach
vang cua V45. Muon tra lai khung tren dien thoai: xoa ba dong duoi. */
body[data-yp-kind="listing"] .ypx-r2{
background:none; border:0; border-radius:0;
/* V61 — 0 -> 6px. Dem o vua ha xuong 1px de bang-ron to ra, keo theo
le duoi chi con 1px (gan cham khoi MAIN LAYOUT). Tra khoang thoat o
DAY thay vi o dem o: nhu vay le duoi ve 7px ma anh van 192,6px.
⚠ Khong trong cho `mt-3` cua cls.asp:1227 lo viec nay — do la LUAT
CHET: `.m-auto{margin:auto!important}` cung the phat SAU `.mt-3`
nen thang, va margin-top:auto tren khoi thuong tinh ra 0. Da do. */
padding-bottom:6px!important;
}
/* V61 — DAO LAI CHIEU CUA V60. V60 hieu nguoc y: nguoi dung muon bang-ron
TO RA (giam dem 2-3px), toi lai tang dem 3px lam no be di.
Do @421px, bon phuong an:
dem 7px -> anh 180,8 · khe ngang 17,7 · le duoi 7 (V60, sai chieu)
dem 4px -> anh 186,8 · khe ngang 11,8 · le duoi 4 (goc)
dem 2px -> anh 190,6 · khe ngang 7,9 · le duoi 2
dem 1px -> anh 192,6 · khe ngang 5,9 · le duoi 1 <- lay cai nay
1px la het bien do nguoi dung cho (giam 3). Anh to hon GOC 5,9px.
⚠ Le duoi tut con 1px la khong the chap nhan — xem luat .ypx-r2 ben
duoi: le duoi duoc TRA LAI bang padding-bottom cua khoi bao, nen
bang-ron khong phai hy sinh gi de doi lay khoang thoat. */
body[data-yp-kind="listing"] .ypx-r2 > div{ padding:1px!important }
}
/* ============================================================================
V55 — DIEN THOAI: NOI BE RONG, SIET KHOANG DOC, ACCORDION CO SO DEM
----------------------------------------------------------------------------
Do pixel tren anh ban dang chay (categories.asp) va ban ta, ca hai o 421px:
dang chay ban ta sau lat
le hai ben cua the 13px 24px 12px
be rong the 395px 373px 397px
accordion -> banner hang 1 5px 16px 12px
banner hang 1 -> hang 2 8px 8px 8px
banner hang 2 -> the 9px 24px 8px
1. `padding-inline:24px` la con so DUNG cho vo 1320px tren may ban. Tren
man 421px no la 5,7% be ngang MOI BEN — 11,4% tong, chi de lam le.
Ha ve 12px lay lai 24px cho noi dung (+6,4%).
2. ⚠ KHE GIUA HAI HANG BANNER: KHONG DONG TOI. Doc tu anh ra 16px, nhung
ban do tren markup that cho 8px — dung bang ban mau. Chenh lech la vi
anh banner co san mot vien trang ben trong: mat nguoi thay no la khe,
may do thi khong. Sua theo con so doc tu anh se bop khe that xuong 4px.
3. ⚠ KHE TREN dung o 12 chu khong xuong 5 nhu ban mau. Hai khe (tren, va
giua hai hang) DUNG CHUNG mot don bay: le tren cua o banner (mt-2 = 8px).
Ep khe tren ve 5 thi khe giua hai hang con 4 — da thu va do duoc. Ben
kia dat 5 vi ho xep khac: o banner cua ho khong co le tren, khe sinh tu
mt-1 cua vo. Doi cach xep la doi markup ca hai nhanh; khong dang cho 7px.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .container-xxl:not(.ps-0){ padding-inline:12px!important }
body[data-yp-kind="listing"] .ypx-r2{ padding-top:4px!important }
body[data-yp-kind="listing"] div:has(> .ypx-cols){ margin-top:0!important }
}
/* ----------------------------------------------------------------------------
V55 — SO DEM TREN NUT ACCORDION. Hoc tu categories.asp §653-696.
Cai dang gia nhat o ban mau KHONG phai cai chevron — la CAI SO. Mot accordion
dong kin khong noi duoc ben trong co gi; nguoi dung phai bam de biet. Con so
tra lo cai do TRUOC khi bam: "23 nganh", "42 tinh". Do la thong tin.
⚠ KHONG dong toi dau "+" / "−". Toan bo luat cua .accordion nam trong
css_cls.css — tep KHONG CO trong phien lam (da dem: 0 luat .accordion o
day). Doi "+" thanh chevron ma khong nhin thay luat goc la doan mo.
"+"/"−" da noi dung trang thai dong/mo; cai thieu la SO.
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .ypx-acc-cnt{
display:inline-block; margin-left:8px;
min-width:22px; padding:1px 7px; border-radius:999px;
background:var(--canvas); border:1px solid var(--line);
font-size:11.5px; font-weight:600; color:var(--muted);
text-align:center; vertical-align:1px;
}
/* ============================================================================
V56 — NUT LOC DIEN THOAI: CHEVRON, 46px, VIEN THEO BANG MAU AM
----------------------------------------------------------------------------
Do o 421px, TRUOC lat nay:
nut 405 x 42,5px 42,5 < 44 (WCAG 2.5.5)
vien #DEE2E6 Bootstrap .border, khong phai --line
bo goc 16px .rounded-4
dau mo "+" 15px float:right (css_cls.css dong 150)
bong .shadow-sm
chu #000 .text-black
bieu tuong den, thua ke
BON CAI SUA:
1. Cao toi thieu 46px. Nguong cham WCAG 2.5.5 la 44; lay 46 de con cho
cho vien 1px moi ben ma van du sau khi lam tron.
2. "+" -> chevron. "+" nghia la "them vao"; nut nay "mo xuong". Chevron ve
bang border nen khong phu thuoc phong bieu tuong co tai kip hay khong,
va XOAY 180deg khi mo — chuyen dong noi trang thai ro hon doi glyph.
3. Vien --line thay #DEE2E6. Xam lanh cua Bootstrap choi bang mau am
V44/V45; ca khoi trong nhu dan tu trang khac sang.
4. Bieu tuong -> --gold. §4.4: teal = CHI hanh dong. Hai bieu tuong nay la
TRANG TRI, nen theo gold giong V44 da lam voi cac bieu tuong khac.
⚠ DAC HIEU (chi ap voi css_cls.css — Bootstrap utility xem o duoi):
css_cls.css .accordion (0,1,0)
css_cls.css .accordion:after (0,1,1)
css_cls.css .active:after (0,1,1)
o day ... .accordion (0,2,1) thang
o day ... .accordion::after (0,2,2) thang
o day ... .accordion.active::after (0,3,2) thang
Cong them: tep nay nap SAU css_cls.css (cls.asp dong 610-611).
⚠ SAU !important (5 o luat goc + 1 o luat hover/active). Ban dau toi chi dinh dung HAI, va do lai tren tep DA VA
thi vien / bo goc / bong DEU KHONG AN. Ly do: bang dac hieu o tren chi
doi chieu voi css_cls.css — toi quen han cac UTILITY CUA BOOTSTRAP dang
nam tren chinh cai nut, va utility Bootstrap deu mang !important. Dac
hieu KHONG BAO GIO thang !important. Ca sau cai deu chi de danh
mot utility CO TEN, da do, tren CUNG mot phan tu:
.border{border:...!important} -> vien ve --line
.rounded-4{border-radius:...!important}-> bo goc ve 12px
.shadow-sm{box-shadow:...!important} -> bo bong
.text-black{color:#000!important} -> chu ve --ink
.pe-1{padding-right:.25rem!important} -> ve 0, vi `gap` da lo khoang cach
yp_cls2.css nap SAU bootstrap => !important cua ta thang khi ngang hang.
⇒ V57 se go `rounded-4 border shadow-sm text-black` khoi markup va bo
lai bon !important nay; luc do dang sua markup san roi.
⚠ Neo vao `.accordion` chu khong them lop moi: lat nay thuan CSS nen khong
duoc dong vao markup. An toan vi cls.asp dung chuoi `class="accordion`
DUNG 2 lan, ca hai la hai nut nay — da dem o cong dau vao. Bootstrap 5 co
thanh phan cung ten nhung cls.asp khong dung no o dau.
⚠ KHONG xep hai nut canh nhau: da do o 421px, moi nut 194,5px, tru bieu
tuong + vien so + chevron chi con ~95px cho nhan => "Phan ng...". Giu doc.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .accordion{
display:flex; align-items:center; gap:9px;
min-height:46px; margin-top:8px;
background:var(--surface);
border:1px solid var(--line);
border-radius:12px;
box-shadow:none;
font-size:14.5px;
color:var(--ink);
transition:border-color .18s ease, background-color .18s ease;
}
body[data-yp-kind="listing"] .accordion:hover,
body[data-yp-kind="listing"] .accordion.active{
background:var(--surface);
border-color:var(--action-line);
}
body[data-yp-kind="listing"] .accordion > i{
flex:0 0 auto; padding-right:0!important;
color:var(--gold); font-size:14px;
}
body[data-yp-kind="listing"] .ypx-acc-lbl{
flex:0 1 auto; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body[data-yp-kind="listing"] .ypx-acc-cnt{
flex:0 0 auto; margin-left:0;
min-width:24px; padding:2px 8px;
font-variant-numeric:tabular-nums;
}
body[data-yp-kind="listing"] .accordion::after{
content:""; flex:0 0 auto; float:none;
margin-left:auto; margin-right:2px;
width:8px; height:8px; border-radius:1px;
border-right:2px solid var(--muted);
border-bottom:2px solid var(--muted);
transform:translateY(-2px) rotate(45deg);
transition:transform .22s ease;
}
body[data-yp-kind="listing"] .accordion.active::after{
content:"";
transform:translateY(2px) rotate(-135deg);
}
}
/* ============================================================================
V57 — DANH SACH PHAN NGANH: HANG 44px, COT SO, TACH MO TA, MUC DANG XEM
----------------------------------------------------------------------------
Do o 421px TRUOC lat nay:
vung cham moi muc 23,7px (1 dong) / 43,4px (2 dong) 13/13 duoi 44
khe doc giua cac muc 10px
panel khi mo 691px
con so cuoi chuoi chu, co khi cuoi dong 2
dau dau muc dau kiem, ca 13 muc
text-transform capitalize (.panel a cua css_cls.css)
SAU CAI SUA, xep theo muc nang:
1. 23,7px -> 44px. Loi nang nhat cua ca khoi. WCAG 2.5.5.
2. So ve COT NEO PHAI, tabular-nums. Danh sach DA sap theo do lon — do la
tai san lon nhat o day — nhung so bi chon cuoi chuoi chu nen mat khong
so sanh duoc. Dua ra cot thi quet doc mot cai la thay.
3. Bo dau kiem trang tri. Dau kiem = "DA CHON" / "da xac thuc" (§4.5), va
chinh no dang mang nghia that o huy hieu "Xac thuc" ngay ben duoi.
Dat truoc ca 13 muc khi khong muc nao duoc chon la pha nghia ky hieu.
4. Muc dang xem: vach vang 3px + nhan. Dung ngon ngu §4.2 da co.
5. Ten dai: tach o dau NGOAC, phan trong ngoac xuong dong phu mo, cat
bang ellipsis. Chi tach o ngoac — xem chu thich ham YPTenC trong cls.asp.
6. text-transform ve none. Du lieu vao da la chu hoa dau tu roi; capitalize
chong len lam ca dong thanh Title Case, doc rat nhieu. H1 cua chinh
trang dung dung truong ay MA KHONG capitalize va doc de hon han.
⚠ VI SAO PHAI CAT CON 8: da do, nang moi hang len 44px thi panel tu 691 ->
734,6px — tuc XAU HON hien trang ve mat day noi dung. Cat con 8 thi con
537px (-154). "Hien 8" khong phai trang tri, no la dieu kien de lat nay
khong thanh mot buoc lui.
⚠ DAC HIEU voi `.panel a` cua css_cls.css (0,1,1):
`body[data-yp-kind="listing"] .ypx-fitem` = (0,2,1) => thang, KHONG can
!important. `.panel a` dat 10 thuoc tinh (text-transform, margin-bottom,
padding, background, border-*, border-radius, width, display, clear,
margin-right) — phai dap DU CA 10, thieu mot cai la con vet.
============================================================================ */
@media screen and (max-width:991px){
/* ⚠ V65 — DOI TEN tu .ypx-fwrap sang .ypx-fpan.
V57 (chinh toi) dat ten vo boc panel bo loc la `.ypx-fwrap` — DUNG CAI
TEN ma yp_footer.css dang dung cho vo boc chan trang. Dau tep
yp_footer.css ghi ro no chon ten do vi "khong ton tai o bat ky file CSS
nao khac, nen khong the va cham". Toi da pha bat bien ay.
Dac hieu: luat cua toi (0,2,1) > .ypx-foot .ypx-fwrap (0,2,0), va
`padding` viet gon nen dat padding-inline ve 0.
Do @421px TRUOC khi sua: chan trang padding-inline = 0px (dang le 16px)
=> chu phap nhan chay sat mep man hinh. Chi trang cls dinh, vi chi no
nap ca hai tep.
Da quet 11 ten lop V57/V58 tren 4 tep CSS: chi DUY NHAT cai nay va
cham; `ypx-fpan` = 0 lan o ca bon. */
body[data-yp-kind="listing"] .ypx-fpan{ padding:2px 0 8px }
body[data-yp-kind="listing"] .ypx-fitem{
display:flex; align-items:center; gap:12px;
min-height:44px; padding:6px;
margin:0; width:auto; clear:none;
background:transparent;
border:0; border-bottom:1px solid var(--line-soft); border-radius:0;
text-transform:none; text-decoration:none; color:var(--ink);
}
body[data-yp-kind="listing"] .ypx-fitem:last-child{ border-bottom:0 }
body[data-yp-kind="listing"] .ypx-fitem:active{ background:var(--line-soft) }
body[data-yp-kind="listing"] .ypx-fitem-t{ flex:1 1 auto; min-width:0 }
body[data-yp-kind="listing"] .ypx-fitem-n{
display:block; font-size:14px; font-weight:500; line-height:1.34; color:var(--ink);
}
body[data-yp-kind="listing"] .ypx-fitem-d{
display:block; margin-top:1px; font-size:11.5px; line-height:1.3;
color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body[data-yp-kind="listing"] .ypx-fitem-c{
flex:0 0 auto; min-width:44px; text-align:right;
font-size:13px; font-weight:600; color:var(--muted);
font-variant-numeric:tabular-nums;
}
body[data-yp-kind="listing"] .ypx-fitem.ypx-fnow{
background:var(--brand-soft);
border-left:3px solid var(--brand);
border-bottom-color:transparent;
border-radius:0 8px 8px 0;
padding-left:9px;
}
body[data-yp-kind="listing"] .ypx-fnow .ypx-fitem-n{ font-weight:600 }
body[data-yp-kind="listing"] .ypx-fnow .ypx-fitem-c{ color:var(--brand-mark) }
body[data-yp-kind="listing"] .ypx-fnow-b{
display:inline-block; margin-left:7px; padding:1px 7px;
border-radius:999px; background:var(--brand); color:var(--ink);
font-size:10px; font-weight:700; letter-spacing:.02em;
text-transform:uppercase; vertical-align:2px; white-space:nowrap;
}
body[data-yp-kind="listing"] .ypx-fgrp{
display:flex; align-items:center; gap:8px;
margin:14px 0 2px; padding:0 6px;
font-size:11px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--faint);
}
body[data-yp-kind="listing"] .ypx-fgrp > span{
font-weight:600; letter-spacing:0; color:var(--muted);
}
body[data-yp-kind="listing"] .ypx-fgrp::after{
content:""; flex:1 1 auto; height:1px; background:var(--line-soft);
}
body[data-yp-kind="listing"] .ypx-fhid{ display:none }
body[data-yp-kind="listing"] .ypx-fmore{
display:flex; align-items:center; justify-content:center;
width:100%; min-height:44px; margin:2px 0 0; padding:0;
background:transparent; border:0; border-top:1px solid var(--line-soft);
font-size:13.5px; font-weight:600; color:var(--action);
cursor:pointer;
}
body[data-yp-kind="listing"] .ypx-fmore::after{
content:""; width:7px; height:7px; margin-left:8px;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);
}
}
/* ============================================================================
V58 — PANEL TINH/THANH PHO: LUOI 3 COT, O 44px
----------------------------------------------------------------------------
Do o 421px, 53 tinh, TRUOC lat nay:
chip 25,7px cao · rong 64,3-133,3px · 53/53 duoi nguong 44
xuong dong 16 hang, mep RACH (3 hoac 4 chip moi hang)
khoi chip 587px
vien #DDD (tu `.panel a` cua css_cls.css)
chu capitalize
BA PHUONG AN DA DUNG VA DO, cung 53 tinh:
hien trang 25,7px · 16 hang · 587px · 53/53 duoi 44
A chip 34px 34px · 16 hang · 676px · 53/53 duoi 44
B chip 44px 44px · 17 hang · 888px · 0
C luoi 3 cot 44px · 18 hang · 906px · 0 <- chon
Khong phuong an nao cat mat ten tinh (scrollWidth vs clientWidth = 0).
Chon C vi no la cai DUY NHAT co cot thang de mat lan xuong. Voi 53 muc,
mep rach nghia la phai doc tung cai. 44px giu dung nhip da dat o V57.
⚠ GIA PHAI TRA: +319px (587 -> 906). Khong giau con so nay. Doi lai 53/53
chip dat nguong cham va danh sach lan dau tien QUET DUOC.
⚠ CHUA SAP A -> Z, du do duoc rang thu tu hien tai la NGAU NHIEN:
truy van dong 444 co `ORDER BY tinh_thanhpho.hienthi DESC`, ma `hienthi`
la CO BOOLEAN (chinh tep nay dung `hienthi = 'TRUE'` o dong 506).
Chua doi vi hai dieu KHONG DO DUOC tu ban do:
1. Thu tu THAT tren may chu. Neu TP.HCM / Ha Noi dang o dau bang thi
sap A->Z se day hai thanh pho lon nhat xuong giua (chu T, chu H).
2. Collation cua CSDL — `ORDER BY ten_vn` voi collation khong phai
Vietnamese_CI_AS co the xep "Đồng Nai" ra sau chu Z.
⚠ CUNG KHONG cat bot + "xem them" nhu V57: cat 41 tinh theo thu tu NGAU
NHIEN thi nguoi o Nghe An khong con cach nao tim ra. V57 cat duoc vi
danh sach phan nganh CO sap theo do lon (counter DESC).
⚠ DAC HIEU voi `.panel a` cua css_cls.css (0,1,1):
`body[data-yp-kind="listing"] .ypx-fchips a` = (0,2,2) => thang, khong can
!important. `.panel a` dat 10 thuoc tinh — phai dap DU CA 10.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypx-fchips{
display:grid; grid-template-columns:repeat(3, 1fr);
gap:6px; padding:8px 6px 4px;
}
body[data-yp-kind="listing"] .ypx-fchips a{
display:flex; align-items:center; justify-content:center;
min-height:44px; padding:0 10px;
margin:0; width:auto; clear:none;
background:var(--surface);
border:1px solid var(--line); border-radius:8px;
font-size:12.5px; line-height:1.25; text-align:center;
color:var(--ink); text-decoration:none; text-transform:none;
overflow:hidden; text-overflow:ellipsis;
}
body[data-yp-kind="listing"] .ypx-fchips a:active{
background:var(--action-tint); border-color:var(--action-line);
color:var(--action-deep);
}
}
/* ============================================================================
V62 — CHIP "XAC THUC" LEN HANG KIM CUONG / "TAI TRO"
----------------------------------------------------------------------------
Phan lam duoc bang ASP nam o cls.asp. O day CHI mot luat, va no la mot
DANH DOI phai noi ro.
Do be rong tung manh @421px:
.ypx-tt (5 kim cuong + "Tai tro") 158,5px
.duocxacthuc khong ngay 87,5px
.duocxacthuc CO "(ngay: dd/mm/yyyy)" 198,6px
nut "i" (.ypx-xt) 23,0px
gap cua .ypx-bdg 10px x 2
Hai to hop THAT SU ton tai — chip co ngay chi o nhanh KHONG TAITRO, ma
nhanh do khong co chu "Tai tro":
to hop 360px 390px 421px
A TAITRO gem + "Tai tro" + Xac thuc 2 dong 1 hang 1 hang
B khac gem + Xac thuc + "(ngay:..)" 2 dong 2 dong 1 hang
B' nhu tren + AN phan ngay o mobile 1 hang 1 hang 1 hang
"(ngay: dd/mm/yyyy)" chiem 111px va la thu DUY NHAT lam hang vo.
⚠ DANH DOI: ngay xac thuc KHONG con hien tren dien thoai. Ban bàn may giu
nguyen. Day la thong tin that bi bo bot, va nguoi dung khong xin dieu do
— lam vi khong co no thi "ngang voi kim cuong" khong thanh o hau het may.
MUON TRA LAI: xoa dung khoi nay.
⚠ Chua tron: to hop A o 360px van xuong 2 dong (can 289px, co 278px). KHONG
siet `gap` 10 -> 4px de ep cho vua: lam vay thi MOI the tren trang trong
chat lai chi de cuu mot kho may. Tu 390px tro len la mot hang.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypx-bdg .duocxacthuc .text-black-50{ display:none }
}
/* ============================================================================
V64 — BO NUT "Chi tiet →" O CHAN THE, BAN DIEN THOAI
----------------------------------------------------------------------------
Hai cau hoi phai tra loi bang PHEP DO truoc khi bo mot loi goi hanh dong:
1. Bo no co lam MAT DUONG DI khong? KHONG.
cls.asp:1422 ten cong ty -> /lgs/{cq_idall*3+657153}/{...}.html
cls.asp:1670 nut Chi tiet -> /lgs/{cq_idall*3+657153}/{...}.html
Y HET nhau. Ten cong ty da la lien ket, va no la dong to nhat trong the.
Nut chi la duong THU HAI toi cung mot cho — chu thich V31 ngay tren cung
da ghi "hai nut mot dich trong mot the".
2. Co PHEP TU KIEM nao bam vao no khong? CO, va an KHONG lam no bao sai.
cls.asp:1996 ["nut chan the", ".ypx-detail"] trong bang CHECKS cua
phep do tuong phan chay ngay tren trang.
cls.asp:1980 function bgOf(e){ ...cs(n,"backgroundColor")... parentElement }
Ham nay CHI doc computed style va di len cay cha — khong
getBoundingClientRect, khong elementFromPoint. Phan tu display:none van
tra ve color/backgroundColor binh thuong nen phep do van chay dung.
(No cung chi chay khi ?bando=1 — cls.asp:239 — khong phai san xuat.)
⚠ Chi AN bang CSS, KHONG go khoi markup. Nho vay phep tu kiem van tim thay
phan tu, va muon bat lai chi can xoa dung khoi nay.
⚠ Nguong 991px (ranh gioi dien thoai/ban may cua tep nay), KHONG phai 500px:
nut nay khong lien quan gi toi so cot cua dai anh.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypx-detail{ display:none }
}
BEN TRONG — da thu bang html5lib:
trinh duyet ve dung, nhung do la HTML khong hop le (span la phrasing,
details la flow).
O day giu
lam ANH EM cua roi DAN LIEN bang CSS: bo bo goc
phia trong, bo vien giua, triet khe flex bang margin am. Hinh dang y het
mockup, ma cay DOM van hop chuan.
============================================================================ */
/* nua trai — vien thuoc "Xac thuc" */
/* nua TRAI cua vien thuoc — bo vien phai de noi lien voi nua phai */
body[data-yp-kind="listing"] .ypx-bdg .duocxacthuc{
border-radius:8px 0 0 8px; border-right:0; padding-right:7px;
}
/* dau kiem SVG — theo mau he, thay anh xacminh6.png mau xanh duong */
body[data-yp-kind="listing"] .ypx-ck{
width:11.5px; height:11.5px; flex:0 0 auto; display:block; /* V30 — 13 -> 11,5 */
color:var(--xt-ink);
}
/* nua phai — dau "?"; margin am triet dung khe gap:10px cua .ypx-bdg */
body[data-yp-kind="listing"] .ypx-xt[open] > summary{
background:var(--xt-ink); border-color:var(--xt-ink); color:var(--surface);
}
/* ============================================================================
HANG H1 — "Inox, Thep Khong Gi" + "745 cong ty · 29 tinh thanh"
----------------------------------------------------------------------------
V34 — CAN THEO DUONG CO CHU.
Truoc V34 hai khoi can bang `padding-top:7px` — mot so UOC LUONG BANG TAY.
Do bang moc duong co chu (chen inline-block 1x1px roi doc rect.bottom,
vi day hop cua mot inline-block rong nam DUNG tren duong co chu):
dong dem CAO HON co chu H1 5,0 px -> chinh la cho "lech" nhin thay.
7px khong the dung duoc, vi khoang tu dinh hop den duong co chu phu thuoc CA
HAI co chu (28px va 14px) lan line-height — va se sai LAI moi lan doi co chu.
`align-items:baseline` la phep can THAT: trinh duyet tu tinh, dung mai.
⚠ Chuyen sang flex thi hai the con THOI LA FLOAT, nen the cha lan dau tien
BAO duoc chung: khoi H1 phinh 41 -> 49px, tuc DAY banner xuong 2px, nguoc
y muon lam chat. Bu bang dem doc 8px -> 4px => khoi H1 ve DUNG 41px.
Do lai: 41 -> 41. Va the chu tu 8px-tren/0px-duoi (lech) thanh 4/4 (can).
⚠ column-gap:0 — khe ngang giua H1 va dong dem DA co san 8px tu `ps-2` cua
chinh dong dem. Them gap la cong doi. Do lai: x chu dau dong dem 433,4 ->
433,4, me phai H1 425,4 -> 425,4. Khong nhich.
⚠ `:has()` vi the boc KHONG CO lop rieng — no chi mang lop tien ich bootstrap
dung chung ca trang. Bam vao con truc tiep la neo hep nhat co the ma khong
phai sua ASP.
============================================================================ */
body[data-yp-kind="listing"] .container-xxl:has(> .float-start > h1){
display:flex; align-items:baseline; flex-wrap:wrap; column-gap:0;
padding-top:4px!important; padding-bottom:4px!important;
}
body[data-yp-kind="listing"] .container-xxl:has(> .float-start > h1) > .float-start{
float:none!important;
}
body[data-yp-kind="listing"] .ypx-cnt{
font-size:14px; color:var(--muted); padding-top:0!important; /* V34 — bo doan 7px */
}
body[data-yp-kind="listing"] .ypx-cnt b{ color:var(--ink); font-weight:600 }
/* ----------------------------------------------------------------------------
V34 — HAI KHE CUA CUM BANNER TOP 4 NGANG
khe TREN 16 = mb-2 cua khoi H1 (8) + p-2 tren cua the boc (8) -> 10 (-6)
khe DUOI 24 = p-2 duoi cua the boc (8) + mt-3 cua khoi sau (16) -> 16 (-8)
Sua bang DEM cua dung the boc do. KHONG dung margin am, va KHONG dong toi
.p-2 / .mb-2 / .mt-3 cua bootstrap — chung dung chung ca trang.
Chi tac dung o kho PC: `.d_pc` = none tu <=991px (chinh tep nay ghi o §1090).
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .container-xxl.d_pc:has(> .ypx-r1){
padding-top:2px!important; padding-bottom:0!important;
}
/* V26 — O VUONG VANG DA BO. No 1,34:1 (khong phai tin hieu), va no nam
BEN TRAI chu trong khi ca cum bi day sang PHAI (`text-end`) => dau muc
tro vao khoang trong. Do la cho mat can bang, khong phai vi tri chu.
Bo o vuong thi chu nam sat me phai banner, can. */
body[data-yp-kind="listing"] .div_banner p:has(> .star_text){ margin-top:5px!important }
/* ============================================================================
P1 — mau truot AA cuoi cung · loi ra cho so bi che
----------------------------------------------------------------------------
.orange_bg #ff7500 = 2,69:1 tren chu trang — mau truot AA thu 5 va cuoi
cung. L5 va L6 deu co y hoan lai vi day la NUT CHUYEN DOI, dang duoc nhin
rieng. var(--cta) = 5,18:1, cung sac cam-do.
.orange_bg la (0,1,0), luat nay (0,2,1) => thang, khong can !important.
============================================================================ */
body[data-yp-kind="listing"] .orange_bg{ background:var(--cta) }
body[data-yp-kind="listing"] .orange_bg:hover{ background:var(--cta-deep) }
/* loi ra cho so dien thoai bi che — mockup v23 §.up */
body[data-yp-kind="listing"] .ypx-up{
margin-left:7px; white-space:nowrap;
font-size:12px; font-weight:600; color:var(--cta);
}
body[data-yp-kind="listing"] .ypx-up:hover{
color:var(--cta-deep)!important; text-decoration:underline;
}
/* ============================================================================
Q1 — MOT COT ICON (bat bien B3 cua dac ta v23)
----------------------------------------------------------------------------
Mockup: .row .k{ flex:0 0 16px; text-align:center } — nam icon nam trong
mot cot rong 16px nen chu gia tri o ca nam dong bat dau tai CUNG MOT toa
do x. Hien tai moi icon rong theo hinh chu cai nen nam dong lech nhau.
⛔ Goi DICH DANH nam lop icon, KHONG quet ".yp_diachi_logo i":
trong cung khoi con co .fa-circle-xmark kem .text-danger (dong 1400 —
"Thong tin nay co the khong con chinh xac"). Quet ca khoi se ep dau X
canh bao do thanh mau nhat. Do la tin hieu cho nguoi mua, khong duoc mo.
Hai icon phong bi (dong 1470/1477) von THIEU .text-black-50 nen dam hon
ba icon kia — luat nay dong thoi go not cho lech mau do.
.pe-1 cua bootstrap kem !important nen phai co !important de doi sang
margin — khe giua icon va chu phai nam NGOAI cot 16px.
============================================================================ */
body[data-yp-kind="listing"] .yp_noidunglistings .fa-location-arrow,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-location-dot,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-phone,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-mobile-screen-button,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-envelope,
body[data-yp-kind="listing"] .yp_noidunglistings .fa-globe{
display:inline-block; width:16px; text-align:center;
color:var(--faint)!important;
font-size:13px;
padding-right:0!important; margin-right:9px;
}
/* V30 — nam dong lien he TACH LAM HAI BAC, khong con mot co chu.
= thong tin phu (dia chi · email · website) -> 13px
khong = so goi duoc ngay (dien thoai · hotline) -> 14px
13px la bac CO SAN tren thang (--ypx-t-scan-2), khong phai so la.
Website tu V30 cung duoc boc trong ASP nen ba dong phu dong bac. */
/* ============================================================================
V42 — THE KHONG CO LOGO: KHOI LIEN HE VE SAT ME TRAI
----------------------------------------------------------------------------
Do bang pixel tren anh that (1601px): me trai the x=449 · khung logo cua the
CO logo x 490->616 · dong dia chi bat dau x=631 TREN CA BA THE, co logo hay
khong. The khong logo mat trang 141px.
Nguyen nhan la mot dau IF dat sai cho, va NHANH DIEN THOAI DA LAM DUNG:
dien thoai (§1407): IF boc CA the
cot logo -> khong co logo, khong
co the nao
PC (§1474): IF nam BEN TRONG the
-> the van dung, rong ruot
V42 cho PC lam giong dien thoai.
⚠ Bo cai IF THOI CHUA DU: `.yp_diachi_logo` co be rong rieng khai trong
css_cls.css — TEP KHONG CO trong phien nay. Bo cot logo di thi khoi lien he
van giu be rong cu. Nen phai co lop danh dau + luat duoi day.
⚠ !important o day la LUA CHON CO CAN NHAC: khong doc duoc css_cls.css nen
khong biet do dac hieu ben do. Bo chon neo hep (0,3,1). Lat nao co
css_cls.css thi do lai roi bo !important.
Do sau lat (cot noi dung 696px): khoi lien he 497 -> 638px, lui vao 141 -> 0.
The CO logo khong doi mot pixel nao.
============================================================================ */
body[data-yp-kind="listing"] .ypx-nologo .yp_diachi_logo{
float:none!important; width:100%!important;
/* V43 — do lai tren anh SAU KHI deploy V42: van con 13px le trai.
Hai moc doc lap cung chi mot so: dong "Ngay cap nhat" o x=580 va chu
"NGANH" o x=581, con dong dia chi o x=593.
`.yp_diachi_logo` mang mot le trai rieng khai trong css_cls.css. Khi CO
logo, 13px do la khoang tho giua cot logo va chu — dung. Khi KHONG co
logo no thanh le thua.
⚠ Khong doc duoc css_cls.css nen khong biet no dung THUOC TINH nao.
13px la so DO DUOC; ten thuoc tinh la SUY DINH. Nen dat ve 0 CA BA
cach mot khoi co the bi day vao trong MA KHONG nhin thay duong ke.
(border-left thi se NHIN THAY duong ke, anh chup khong co — bo qua.)
Lat nao co css_cls.css thi do lai roi giu dung mot dong can thiet. */
margin-left:0!important; padding-left:0!important; text-indent:0!important;
}
body[data-yp-kind="listing"] .yp_diachi_logo > p{ font-size:14px; line-height:1.62 }
body[data-yp-kind="listing"] .yp_diachi_logo > p > small{ font-size:13px }
/* ============================================================================
R23 — HAI VUNG DOANH THU BAN DIEN THOAI
----------------------------------------------------------------------------
Sau lat nay ca BON vung doanh thu noi cung mot ngon ngu voi vach vang cua
the tra tien (L7e) va cua muc dang xem o cot loc (M5): thay vach vang o
dau la biet cho do co nguoi tra tien de xuat hien.
⚠️ R2 xep banner bang float w-50 / w-100 tuy truong "mixcell". Dat
display:grid o day se PHA cach xep do — GIU NGUYEN float, chi them nen,
vach va o vien. Khac R1: R1 dung bootstrap .row nen M4 luoi hoa duoc.
============================================================================ */
/* R2 — dai addtop tren cung, ban dien thoai */
body[data-yp-kind="listing"] .ypx-r2{
position:relative;
background:var(--brand-soft);
border:1px solid var(--line);
border-left:0;
border-radius:12px;
padding-bottom:8px!important;
}
body[data-yp-kind="listing"] .ypx-r2 > div{
padding:6px!important;
}
body[data-yp-kind="listing"] .ypx-r2 img{
/* ⚠ V60: PHAI co !important. Luat nay truoc day CHET — do tren tep dang
chay ra vien #DEE2E6 chu khong phai #EAE6DD. The ![]()
mang class
`border` cua Bootstrap, ma utility Bootstrap deu !important; dac hieu
khong bao gio thang !important (bai hoc V56). Luat ANH EM ngay duoi
(.banneradd_mobile img) da co !important tu truoc — khoi nay bi bo sot. */
border:1px solid var(--line)!important; border-radius:0px!important;
background:var(--surface);
}
/* R3 — dai banner xen giua listing, ban dien thoai */
body[data-yp-kind="listing"] .banneradd_mobile img{
border:1px solid var(--line)!important;
border-radius:0px!important;
background:var(--surface);
}
/* ============================================================================
S1 — DAI ANH theo v23: o co dinh 76px + o "Chi tiet"
----------------------------------------------------------------------------
Do truoc: .img_sanpham la width:20% float. Cot giua nay rong 788px nen moi
o 157px, tru dem con 144px. Mockup dat --pic-w:76px co dinh.
144 -> 76: anh nho gan mot nua, dai anh thoi chiem het be ngang the, va
cho trong con lai dung cho o "Chi tiet".
⚠️ .hienthisanpham (o thu 5, an o <=500px) la mot CONG TAC display. Luat
duoi CHI dat flex-basis va width, TUYET DOI khong dat display — dung bai
hoc cua L7a-prime khi .ypx-bdg de len cong tac .hienthi_mobile.
============================================================================ */
body[data-yp-kind="listing"]{ --ypx-pic-cols:6; --ypx-pic-gap:8px }
body[data-yp-kind="listing"] .ypx-pics{
display:grid;
grid-template-columns:repeat(var(--ypx-pic-cols),1fr);
gap:var(--ypx-pic-gap);
align-items:start;
}
/* 🔴 .ypx-pics mang class .clearfix cua bootstrap:
.clearfix::after{ display:block; clear:both; content:"" }
Trong FLEX o do rong 0 nen vo hai. Trong GRID no thanh O THU 7 va
day xuong hang hai. Do chieu cao luoi (the 6 anh, truoc -> sau):
vp 640 114 -> 106 · vp 768 136 -> 128 · vp 1521 132 -> 124
Mat dung 8px (mot khe) o MOI the neu khong go. */
body[data-yp-kind="listing"] .ypx-pics::after{ display:none }
/* CHI width — khong dat display, de cong tac .hienthisanpham giu nguyen
quyen an o anh thu 5 duoi 500px (bai hoc L7a-prime).
width:auto de o an theo track 1fr; min-width:0 de anh dai khong
pha vo be rong track (mac dinh cua o luoi la min-width:auto). */
body[data-yp-kind="listing"] .ypx-pics > .img_sanpham{
width:auto; min-width:0;
float:none; padding-right:0!important;
}
body[data-yp-kind="listing"] .ypx-pics .div_img_sanpham{
height:auto!important; aspect-ratio:1/1;
display:grid!important; place-items:stretch;
/* V50 — 4px -> 8px, va ghi TUNG CANH mot chu khong viet gon.
Do tren anh chup that: dem trai 4px · phai 7px · DUOI 0px — anh tran
xuong roi bi overflow:hidden cat. Da thu tai hien tren ban do voi bon
ti le anh va bon huong sua: CA BON cho 4px deu bon canh, tuc nguyen
nhan KHONG o tep nay ma o css_cls.css (tep khong co trong phien lam).
Ghi tung canh + !important thi EP DOI XUNG bat ke ai dang lam lech,
dong thoi dap ung dung yeu cau "tang khoang cach anh va khung".
Anh 89,7 -> 81,7px moi chieu (-17% dien tich). */
padding-top:8px!important; padding-right:8px!important;
padding-bottom:8px!important; padding-left:8px!important; overflow:hidden;
}
body[data-yp-kind="listing"] .ypx-pics .div_img_sanpham_table_cell{
display:contents;
}
/* V24 — `contain` giu ti le nen anh ngang det chi cao 40px trong khung
100x100, anh doc thi hep: dai anh ra hang loi khong deu.
`cover` lam anh LAP DAY khung, phan thua cat deu hai ben => moi o
bang nhau, dai anh thanh mot hang phang.
⚠ cover CAT anh. Voi anh san pham (chup san pham giua khung) thi cat
vien la vo hai; neu co anh day chu o mep thi se mat chu — do la danh
doi cua cover, khong tranh duoc. object-position:center de phan giu
lai luon la phan giua. */
/* V51 — EP ANH VUONG. Do tren anh chup SAU KHI deploy V50:
o 98x98 · dem TREN 8px (V50 co tac dung) · dem DUOI 0px
anh ve 89px cao trong hop dem chi 80px => cao hon 9px, tran xuong
roi bi overflow:hidden cat.
Nguyen nhan: `height:100%` o day KHONG co !important (0,3,1), con
css_cls.css — tep khong co trong phien lam — gan nhu chac chan co
`.img_size{height:auto!important}`; !important thang bat ke do dac hieu.
⚠ Ban do V50 KHONG tai hien duoc vi no thieu css_cls.css nen khong co gi
de thang. V51 mo phong dung gia thuyet do va TAI HIEN DUOC:
anh 3:4 cao 108,9px trong hop 81,7px -> tran -19,2px
anh 4:3 · 1:1 · 16:9 -> khong sao
Khop dung trieu chung: chi vai o bi cham chu khong phai tat ca.
Sau khi sua: ca nam ti le deu dem 8 / 8.
HAI LOP DOC LAP NHAU:
a. width/height mang !important -> thang luat !important ben kia
b. aspect-ratio:1/1 lam DU PHONG -> neu height:100% van khong giai
duoc (phan tram tren hang luoi tu co — cung ho voi V29) thi ti le
tu ep hop anh thanh vuong, khong phu thuoc mot phan tram nao.
Hai cai KHONG danh nhau: khi height:100% giai duoc thi no bang dung
be rong nen ti le van thoa; khi khong giai duoc thi no thanh auto va
aspect-ratio moi vao viec.
min-*:0 va align/justify-self:stretch de bit not cac duong khac. */
body[data-yp-kind="listing"] .ypx-pics .img_size{
width:100%!important; height:100%!important;
aspect-ratio:1/1;
min-width:0; min-height:0;
align-self:stretch; justify-self:stretch;
max-width:none; max-height:none;
object-fit:cover; object-position:center; border-radius:5px;
}
/* o "Chi tiet" — cung co voi o anh, noi tiep cuoi dai */
/* V31 — .ypx-pdetail DA BO. O "Chi tiet" canh dai anh tro DEN DUNG trang ma
.ypx-detail o chan the da tro toi; hai nut mot dich trong mot the.
Dai anh GIU 6 COT: so anh chay 1..5 nen moi the it hon so cot deu chua
trong — ha xuong 5 cot khong xoa duoc khoang trong, chi phong o len
+21,6% va bien dai anh thanh khoi to nhat trong the. Xem chu thich S1. */
/* ============================================================================
L1 — DAI 501-991px
----------------------------------------------------------------------------
991px la nguong DA CO SAN cua css_cls.css, khong phai nguong moi.
Sau cong tac bam vao no: d_pc · d_mobile · pc_display · banneradd_mobile.
============================================================================ */
@media screen and (max-width:991px){
/* --------------------------------------------------------------------------
L1.a — LO TABLET. Day la thay doi NHIN THAY DUOC cua lat nay.
Voi nganh CHUA CO addtop, khoi khuyen mai "Dang ky / Quang cao Trang vang"
nam o hai nhanh ELSE:
· nhanh PC dong 940 .yp_top4ngang_pc — nhung nam TRONG khoi cha
dong 908 mang .d_pc, ma .d_pc = none tu <=991px
=> con an theo cha, bat ke .yp_top4ngang_pc van la block
· nhanh mobile dong 1079 .yp_top4ngang_m — chi block tu <=500px
⇒ Trong dai 501-991px KHONG khoi nao hien. Nganh chua ban duoc mat sach
CTA thu hut khach hang moi tren toan bo lanh tho iPad nam ngang.
Sua: cho .yp_top4ngang_m hien tu <=991px thay vi <=500px.
Kiem lai bang mo phong cascade (xem patch_ypcls_L1.py BUOC 6):
>991px -> chi .yp_top4ngang_pc hien
<=991px -> chi .yp_top4ngang_m hien
Dung MOT khoi o moi be ngang, khong bao gio hai, khong bao gio khong.
-------------------------------------------------------------------------- */
/* L5 — dac ta v23: h1.cat ha 23px o <=991px */
body[data-yp-kind="listing"] h1,
body[data-yp-kind="listing"] h1.fs-4{ font-size:23px!important }
body[data-yp-kind="listing"] .yp_top4ngang_m{ display:block }
/* --------------------------------------------------------------------------
L1.b — GO PHU THUOC THU TU DONG. KHONG doi mot pixel nao.
Trong css_cls.css, khoi @media 991 xep:
.div_nganh {display:block} <- (0,1,0)
.div_listing{...}
.div_banner{display:block} <- (0,1,0)
.pc_display{display:none} <- (0,1,0) THANG chi vi dung SAU 1 dong
Ca hai sidebar mang them .pc_display (dong 1108 va 1672), nen chung bi an
tren dien thoai CHI NHO thu tu dong. Sap xep lai css_cls.css la ca hai bung
ra va tong be rong thanh 18% + 100% + 27% = 145%.
Luat duoi day (0,2,1) thang tuyet doi, khong con phu thuoc thu tu.
Hien chuong §7 van cam sap xep lai css_cls.css — day la luoi an toan, khong
phai giay phep.
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .pc_display{ display:none }
}
/* ============================================================================
V3 — CHUOI KHONG KHOANG TRANG LAM TRAN NGANG CA TRANG (bay B16)
----------------------------------------------------------------------------
Do tren the that, website that 58 ky tu khong gach noi:
viewport 320/360/390/500 -> scrollWidth 589/592/594/602 = TRAN
link rong 470px trong hang chi co 287px
Nguong: 33 ky tu lien khong gach noi.
`anywhere` chu KHONG phai `break-word`: chi `anywhere` doi kich thuoc
min-content, tuc lam HOP CHA co lai. `break-word` de hop cha phong ra
roi van tran — do dung la ly do bay nay song sot o lgs.
Do lai sau khi sua: 320/360/390/500 scrollWidth = dung bang viewport.
Desktop 1521: 154 thuoc tinh DA TINH tren 14 phan tu, KHONG cai nao doi.
============================================================================ */
body[data-yp-kind="listing"] .yp_diachi_logo p,
body[data-yp-kind="listing"] .yp_diachi_logo_mobile p,
body[data-yp-kind="listing"] .text_quangcao{ overflow-wrap:anywhere }
/* ============================================================================
V4 — THANG CO CHU v24. Ba luat PHAI dat cuoi tep (bay B13).
----------------------------------------------------------------------------
1+2. markup mang .fs-4 (h1) va .fs-5 (h2) cua bootstrap, ma bootstrap khai
chung bang !important. Luat khong-!important cua ta THUA bat ke do
dac hieu. Da chay 29px/21px tren giay ma 24px/20px tren man hinh.
Do bang gia tri DA TINH moi thay; grep khong thay.
3. Khoi rao: hop day cot, DONG CHU chan 480px (Hien chuong Luat 3).
la inline nen max-width khong an => phai display:block.
font-size:inherit de go small{font-size:.875em} cua bootstrap,
neu khong 13px se thanh 11,375px.
============================================================================ */
body[data-yp-kind="listing"] h1.fs-4{ font-size:28px!important }
body[data-yp-kind="listing"] .yp_noidunglistings h2.fs-5{ font-size:18px!important }
/* BAY B13 (thu tu nguon) — DO DUOC, khong suy luan:
luat @media 991 {h1.fs-4{23px!important}} nam o GIUA tep, con luat 28px
o tren nam CUOI tep. Cung do dac hieu (0,3,1), cung !important =>
luat DUNG SAU thang, va h1 ra 28px o CA 390px. Do bang gia tri da tinh
moi thay. => phai lap lai nguong 991 o CUOI, sau luat 28px. */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] h1.fs-4{ font-size:23px!important }
}
body[data-yp-kind="listing"] .text_quangcao{ font-size:13px }
/* V24 — BO tran 480px cua V4.
V4 dat theo Hien chuong Luat 3 (chan dong van xuoi). Do duoc:
tran 480px -> 4 dong · 88px · ~57 ky tu/dong
het be rong -> 3 dong · 66px · ~76 ky tu/dong
🔴 76 ky tu/dong CAO HON nguong de doc, va Luat 3 sinh ra de tranh
dieu do. Nhung Luat 3 noi ve VAN XUOI — thu nguoi ta DOC tu dau den
cuoi. Khoi rao tren trang danh sach la thu nguoi ta QUET: doc 1-2
dong roi quyet dinh bam hay khong. Voi viec quet, SO DONG quan trong
hon so ky tu moi dong: 4 -> 3 dong la bot 25% chieu cao khoi.
Neu sau nay thay kho doc that, dua tran ve 560px (--ypx-prose):
~66 ky tu/dong va VAN 3 dong. Mot con so.
`display:block` phai giu: la inline, khong co no thi
font-size:inherit van chay nhung khoi khong xuong dong dung. */
body[data-yp-kind="listing"] .text_quangcao > small{
display:block; font-size:inherit;
}
/* ============================================================================
V5 — RAY SO: 6% troi noi -> 30px co dinh. The thanh flex.
----------------------------------------------------------------------------
css_cls.css dong 162-163 chia the bang %: 6% + 89% = 95%.
5% con lai la DU CUA PHEP CHIA, khong phai dem co y — do duoc 39,3px
khoang chet ben phai MOI the, 45 the moi trang.
Mockup v24 do o 390 / 768 / 1521px: card padding 16/16/16/10, rail 30px,
o so 26x26 bo goc 7px khong bong, chu 13px/700. GIU NGUYEN o moi be ngang
— khong co ban dien thoai rieng.
Sau lat: .cbody 699,5 -> 730,0 · khoang chet 39,3 -> 0
⛔ KHONG them overflow:hidden (mockup co): .ypx-xtp — khung giai thich
dau "?" cua lat L7b — la position:absolute nam TRONG the, se bi cat.
::before (vach vang) la position:absolute nen KHONG thanh o flex.
============================================================================ */
body[data-yp-kind="listing"]{
--ypx-rail-no:30px; /* mockup --rail */
--ypx-card-pad:16px; /* mockup --card-pad */
--ypx-card-pad-l:10px; /* mockup --card-pad-l — hep hon vi con vach vang 4px */
}
body[data-yp-kind="listing"] .ypx-card{
display:flex; align-items:flex-start;
padding-left:var(--ypx-card-pad-l);
padding-right:var(--ypx-card-pad);
}
/* le tren giu nguyen 16px o day, KHONG chuyen len the: .yp_noidunglistings
dung .mt-3 (=16px) cua bootstrap, dat them padding-top cho the la cong don
thanh 32px. Hai con dang canh nhau dung — do bang toa do y, khong doi. */
body[data-yp-kind="listing"] .ypx-card > .yp_sothutu{
flex:0 0 var(--ypx-rail-no); width:var(--ypx-rail-no);
/* V30 — dem 2px/2px -> 0px/4px. Ray van 30px (bat bien §9), o so van 26px;
chi doi CHO DUNG cua no trong ray: le trai -2, khe sang ten DN +2. */
float:none; padding:16px 4px 0 0;
}
body[data-yp-kind="listing"] .ypx-card > .yp_noidunglistings{
flex:1 1 auto; width:auto; min-width:0; float:none;
}
/* o so: 26x26 — dat CHIEU CAO tuong minh nhu mockup (.no{width:26;height:26;
display:grid;place-items:center}) chu KHONG tinh nguoc tu line-height.
Lan dau tu tinh: pt-1(4)+line-height(18)+pb-1(4)=26, do ra 27 — lech 1px
do metric cua phong. Dat height + place-items:center thi khong con phu
thuoc metric. box-sizing:border-box cua bootstrap khien height DA GOM dem,
nen pt-1/pb-1 (!important, khong de duoc) khong lam phinh o.
BO GOC: mockup dat 7px. KHONG khai o day — markup mang .rounded-2 cua
bootstrap = var(--bs-border-radius) = 6px, CO !important. Khai 7px khong
!important thi trinh duyet van dung 6px, tuc CSS noi doi. Da do: r6px.
Chenh 1px tren o 26px khong mua duoc gi — khong danh !important vi no. */
body[data-yp-kind="listing"] .yp_sothutu_txt,
body[data-yp-kind="listing"] .yp_sothutu_txt_small{
height:26px; display:grid; place-items:center; line-height:1;
box-shadow:none!important;
font-weight:700; font-variant-numeric:tabular-nums;
}
/* be rong chu so do bang phong that trong hop 26px:
13px "999"=27 TRAN · 12px "999"=24 vua
cls.asp dong 1308 tu chon lop theo dem_sothutu < 100 */
body[data-yp-kind="listing"] .yp_sothutu_txt{ font-size:13px }
body[data-yp-kind="listing"] .yp_sothutu_txt_small{ font-size:12px }
/* ============================================================================
V7 — DAI ANH: 5 COT DUOI 500px
----------------------------------------------------------------------------
KHONG phai lua chon tham my — la he qua cua chinh markup:
cls.asp 1550
css_cls.css 199 @media(max-width:500px){ .hienthisanpham{display:none} }
Duoi 500px chi con 4 anh + o "Chi tiet" = 5 o. Voi 6 cot thi cot thu 6
BO TRONG mot cach he thong va 5 o kia bi ep nho vo co.
Do duoc: vp 390 6 cot -> o 40,7px | 5 cot -> o 50,4px (+24%)
vp 500 6 cot -> o 59,0px | 5 cot -> o 72,4px (+23%)
500px la nguong DA CO SAN cua css_cls.css (dung 3 lan), khong phai so moi.
============================================================================ */
@media screen and (max-width:500px){
/* V63 — 5 -> 4 cot. Do @421px TRUOC: 4 anh hien nhung luoi dat 5 cot,
nen cot thu 5 BO TRONG va o cuoi dung truoc mep phai 69,4px
(57,2px @360 · 85,2px @500). Mep TRAI thi trung khop khoi chu quang
cao (lech 0), chi mep PHAI la hong — trong nhu luoi bi thut vao.
⚠ Nguyen nhan goc, khong phai tham my: chu thich V7 ngay tren ghi
"duoi 500px chi con 4 anh + o Chi tiet = 5 o". Hoi do o thu 5 CHUA
nut "Chi tiet". Nut ay DA DOI sang .ypx-cfoot (cls.asp:1670), nam
NGOAI luoi — da dem. Token 5 bi bo lai tu do. Doi ve 4 la TRA LAI
dung y dinh cua V7, khong phai gia tri moi.
Mot token nay chua CA HAI dieu nguoi dung xin: o to ra
(61,4 -> 78,8px @421, +28%) VA thang mep voi khoi chu quang cao. */
body[data-yp-kind="listing"]{ --ypx-pic-cols:4 }
}
/* ============================================================================
V8 — VO: DAU TRANG + CHAN TRANG ve day mau v24. CHI CSS, 0 byte ASP.
----------------------------------------------------------------------------
V2 doi 10 token mau nhung VO khong di theo: no lay mau tu lop tien ich
bootstrap va tu css_cls.css, khong qua token. Do gia tri DA TINH sau V7:
vien duoi dau trang #DEE2E6 (.border-bottom cua bootstrap) LANH
bong dau trang rgba(0,0,0,.075) (.shadow-sm) mockup KHONG co
nen o tim kiem #E8EAED (css_cls.css:29) LANH
chu o tim kiem #555555
nav 13,5px #111 (css_cls.css:34) nua pixel
nen chan trang #F6F6F6 (css_cls.css:12) LANH
🔴 CHAN TRANG VO HINH: #F6F6F6 vs canvas #F4F3F1 = 1,026:1.
Dai cao 118px ma mat khong phan biet duoc voi nen. Chu thich L4.a
da canh bao tu thang 7; V2 doi canvas sang #F4F3F1 lam no trung hon.
Mockup: #1E2126 vs canvas = 14,559:1.
Vi sao an toan du 94% moc dong bang nam o dau trang: con so do noi ve
MARKUP (id, name, ten ham JS). Lat nay khong dong mot ky tu markup nao.
============================================================================ */
/* --- DAU TRANG ------------------------------------------------------------ */
/* V13 — 8 luat dau trang cua V8/L5b DA XOA.
cls.asp gio dung chung voi index, nen
.yp_height_menu · .yptimkiem_click · #yp_top1/2/3 · .danhmuc KHONG CON
TON TAI trong trang => 8 luat do thanh CSS chet.
Luat cho topbar moi nam o yp_css/yp_header.css (tep DUNG CHUNG). */
/* --- CHAN TRANG ----------------------------------------------------------- */
/* V11 — 6 luat .bg_chantrang cua V8 DA XOA.
Ly do: cls.asp gio dung chung voi index,
lop .bg_chantrang khong con ton tai trong trang => 6 luat do thanh CSS
chet. Giu lai la de mot cai bay: nguoi doc sau se tuong chan trang cls
van do tep nay dieu khien.
⚠ V8 lam chan trang cls thanh MAU TOI theo mockup v24. Nhung ban that
dung chung (yp_footer.css) la MAU TRANG + vien tren. Mockup va production
da phan ky o VO tu truoc. Muon chan trang toi thi doi trong yp_footer.css
— mot cho, ca ba trang doi theo. */
/* ============================================================================
V9 — THANH LOC NGANG DUOI 1260px (mockup #filterbar.sidebar-h)
----------------------------------------------------------------------------
Duoi 1260px cot loc trai BIEN MAT hai lan: 992-1259 do luat luoi N2/V6,
<=991 do .pc_display. Nguoi dung dien thoai/tablet mat sach kha nang loc
theo nganh con va theo tinh thanh.
🔴 KHONG be nguyen cach cua mockup sang duoc. Mockup co 11 chip; trang
Inox that co 49 (12 nganh + 8 xem them + 29 tinh). Do chieu cao neu de
chip xuong dong tu do:
vp 1259 407px · 1024 480px · 768 607px · 390 **1191px**
1191px la ba man hinh chip TRUOC KHI thay mot cong ty.
Cach dung: MOI NHOM MOT HANG CUON NGANG, nhan dinh sticky ben trai.
vp 1259 183 · 1024 183 · 991 175 · 768 175 · 390 175
Chieu cao gan nhu khong doi, va KHONG giau mot chip nao.
Da can nhac va loai: cat bot bang nth-of-type (giau lien ket, khong co
loi ra) · max-height+overflow:hidden (cat cut) ·
(can markup).
============================================================================ */
@media screen and (max-width:1259px){
/* 1 — bat cot loc hien lai. (0,3,1) thang .pc_display (0,2,1) cua L1.b */
body[data-yp-kind="listing"] .ypx-cols > .div_nganh.pc_display{ display:block }
/* 2 — o dai 992-1259 .ypx-cols la luoi 2 cot: chiem tron hang dau.
Duoi 992 no la khoi thuong, tu nam tren .div_listing theo thu tu markup. */
body[data-yp-kind="listing"] .ypx-cols > .div_nganh{
grid-column:1 / -1;
margin-bottom:var(--ypx-gap)!important; /* .mb-5 = 48px, qua rong o day */
}
/* 3 — panel 1 la NGANH DANG XEM: h1 ngay tren da noi roi, va lien ket cua
no tro ve chinh trang nay. Mockup cung khong co nhom nay. */
body[data-yp-kind="listing"] .div_nganh > .ypx-panel:first-child{ display:none }
/* 4 — moi panel thanh MOT HANG cuon ngang */
body[data-yp-kind="listing"] .div_nganh .ypx-panel{
display:flex; flex-wrap:nowrap; align-items:center; gap:8px;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin;
padding:11px 16px!important; margin-bottom:8px;
}
/* 5 — nhan dinh ben trai de luon biet dang loc theo gi khi cuon */
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p.h6{
flex:0 0 auto;
margin:0!important; padding:0 6px 0 0!important;
border-bottom:0;
position:sticky; left:0; z-index:1; background:var(--surface);
}
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p.h6.pt-4{ margin-top:0!important }
/* 6 — moi muc thanh mot chip, khong xuong dong.
(0,5,1) thang M5 .ypx-panel > p:not(.h6) (0,4,1) */
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p:not(.h6){
flex:0 0 auto;
margin:0!important; padding:0!important;
border-bottom:0; border-left:0; background:none;
white-space:nowrap;
}
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p:not(.h6) a{
display:inline-block; white-space:nowrap;
padding:5px 11px; border-radius:999px;
background:var(--canvas); color:var(--muted); font-weight:500;
}
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p:not(.h6) a:hover{
background:var(--action-tint); color:var(--action-deep)!important;
}
/* 7 — muc DANG XEM giu vach vang, nhung o dang chip.
(0,5,2) thang M5 .ypx-panel > p.mt-1 + p (0,4,1) */
body[data-yp-kind="listing"] .div_nganh .ypx-panel > p.mt-1 + p a{
background:var(--brand-soft); border:1px solid var(--brand-line);
color:var(--ink); font-weight:600;
}
}
/* ============================================================================
V27 — KHUNG LOGO CO DINH
----------------------------------------------------------------------------
css_cls.css 166-167 dat:
.logo_company{ width:100%; min-height:68px; display:table!important }
.logo_company_table_cell{ display:table-cell; vertical-align:middle }
.yp_logo_img_max{ max-width:100%; max-height:89px }
=> khung CAO THEO ANH: logo 40px thi khung 68px, logo 89px thi khung 89px.
Moi the mot chieu cao khac nhau, hang loi khong deu.
Doi sang khung VUONG co dinh 96x96, logo canh TAM ca hai truc.
⚠ `contain` chu KHONG phai `cover` nhu anh san pham (V24): anh san pham
cat vien thi vo hai, LOGO bi cat la hong nhan dien thuong hieu.
⚠ .logo_company_table_cell la `display:table-cell` — trong khung grid thi
sai. `display:contents` cho no bien mat khoi cay bo cuc, anh thanh con
truc tiep cua khung va nhan duoc place-items:center.
⚠ V29 — VI SAO V27 VAN TRAN, VA DONG NAO CHUA NO.
Do bang getBoundingClientRect tren Chromium 149, 8 ti le anh x 2 nguong,
loc offsetParent !== null:
truoc: tran toi +213,0px (PC 1521) · +235,0px (dien thoai 768)
sau : tran -9,0px · -7,0px (nam trong dem)
chieu cao khung 96,0 / 72,0 — KHONG doi truoc sau.
Nguyen nhan KHONG phai `contain`, KHONG phai `place-items`:
.yp_logo_img_max la PHAN TU LUOI. Phan tu luoi mang `min-width/min-height:
auto`, ma co toi thieu tu dong cua mot phan tu THAY THE chinh la CO NOI TAI
cua anh. Co toi thieu do THANG max-height:100%. Nen hang luoi phinh dung
bang chieu cao anh (do duoc: 138,844px · 190px · 300px) va anh lo ra ngoai.
⚠ DA THU VA DA BO `grid-template:1fr / 1fr`: do duoc +213,0 / +235,0 —
y het ban chua sua, KHONG doi mot pixel nao. Khong giu dong khong mua
duoc gi (B24).
⚠ `object-fit:contain` duoi day dang VO HIEU (hop anh dung bang co noi tai
da cap => ti le hop == ti le anh, khong co gi de nhet). GIU CO Y: la luoi
an toan cho §6.6 neu ve sau co luat ep ca width lan height, va la bat bien
§9 (contain phai == 1). Doi no khong lam thay doi gi hom nay.
⚠ Anh NHO HON khung GIU NGUYEN CO (40px van 40px) — PA A nguoi dung chot.
PA B (ep anh lap day o, object-fit moi that su lam viec) da dung trong ban
do va bi loai: lam nhoe logo nho.
============================================================================ */
body[data-yp-kind="listing"] .logo_company{
display:grid!important; place-items:center;
/* V30 — 96 -> 88 (nguoi dung xin bot 6-8) va dem 8 -> 5. Nhanh <=991px
o duoi (72px / 6px) KHONG DOI: phep do la tren man hinh PC. */
width:100%; height:88px; min-height:0;
padding:5px; box-sizing:border-box;
background:var(--surface);
border:1px solid var(--line); border-radius:8px;
}
body[data-yp-kind="listing"] .logo_company .logo_company_table_cell{
display:contents;
}
body[data-yp-kind="listing"] .logo_company .yp_logo_img_max{
max-width:100%; max-height:100%; width:auto; height:auto;
/* V29 — DONG GANH VIEC. Go co toi thieu tu dong cua phan tu luoi; neu
khong thi max-height:100% o tren khong bao gio duoc ap dung. */
min-width:0; min-height:0;
object-fit:contain; object-position:center;
}
@media screen and (max-width:991px){
/* V54 — 72 -> 56px. Do tren anh chup that o 421px: khung logo 51x71,
nang "Xác thực" ben phai chi cao ~30 => con ~41px trong ben phai logo,
duoi cai nang. Ban dang chay lap cho do bang mot dong "Ngành: ..." —
ta khong lam vay vi ten nganh DA co o chan the, them nua la ban sao
thu hai (dung bay ma V52 vua don). Thu khoang trong lai thi gon hon.
Do sau lat: the cao 255 -> 239px · trong ben phai 45 -> 20px.
45 the moi trang => trang ngan di khoang 720px.
56px KHONG nho hon ban dang chay: khung logo ben do do duoc ~62px. */
body[data-yp-kind="listing"] .logo_company{ height:56px; padding:6px }
/* Nang huy hieu nam GIUA chieu cao logo thay vi dinh len tren.
⚠ An toan: .yp_diachi_logo_mobile xuat hien DUNG MOT lan trong markup
(cls.asp §1413) va chi chua cai nang — da dem. Dat display:flex len
no khong dung toi khoi dia chi nao. */
body[data-yp-kind="listing"] .yp_diachi_logo_mobile{
display:flex; align-items:center; min-height:56px;
}
body[data-yp-kind="listing"] .yp_diachi_logo_mobile > .ypx-bdg{ margin-top:0!important }
}
/* ============================================================================
V52 — DIEN THOAI: BO BAN SAO THUA CUA BO LOC
----------------------------------------------------------------------------
Do tren ban dung that, the doanh nghiep dau tien bat dau o:
1400px y= 89 · 1259px y=304 · 1100px y=304 · 992px y=304
991px y=647 · 768px y=599 · 421px y=524
Duoi 992px trang dung DONG THOI hai giao dien loc mang CUNG MOT du lieu:
· hai accordion .d_mobile (cls.asp §1038, §1066) — chi hien tu <=991px
· ba dai chip cuon ngang, tuc chinh .div_nganh, do lat R23 bat lai
o <=1259px (xem chu thich R23 phia tren trong tep nay)
⚠ KHONG PHAI LOI CUA R23. O dai 992-1259px, .d_mobile la `none` nen dai
chip la giao dien loc DUY NHAT — bo no thi tablet mat sach bo loc. R23
dung o dai do. Cho no sai la o DUOI 992, noi accordion xuat hien va
thanh ban sao thu hai. Luat duoi day chi cat dung doan bi chong.
Vi sao giu ACCORDION chu khong giu DAI CHIP o <=991:
· accordion dong san (dau "+") nen an het chieu cao cho toi khi can —
thu nguoi ta den de xem la DANH SACH DOANH NGHIEP, khong phai bo loc
· dai chip luon mo, an 175px, va giau noi dung ben phai mep man hinh;
tren cam ung it nguoi biet ma keo ngang
· ban dang chay tren yellowpages.vn lam dung nhu vay
Do sau lat: 421px y=524 -> 316 · 991px y=647 -> 439 ( -208px )
1100 / 1259 / 1400px KHONG DOI
⚠ Ban do (?bando=1) do be rong cot loc qua $("#railfilter"); tu <=991px cot
do la display:none nen phep do ay ra 0 tren dien thoai. Ban do la cong cu
noi bo — ghi lai de khong ai tuong la loi moi.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypx-cols > .div_nganh.pc_display{ display:none }
/* Cum banner tren cung: bo khung. Ban dang chay de bon banner nam tran tren
nen trang; ban cua ta boc chung trong mot the kem co vien va bo goc — tren
man 421px do la ~16px chrome khong mang thong tin, va lam cum quang cao
trong giong mot the noi dung. Do: khoi cao 136 -> 120px o 421px.
⚠ CHI o <=991px. Cum banner ban PC (.ypx-r1) GIU NGUYEN khung kem + vach
vang cua V45. Muon tra lai khung tren dien thoai: xoa ba dong duoi. */
body[data-yp-kind="listing"] .ypx-r2{
background:none; border:0; border-radius:0;
/* V61 — 0 -> 6px. Dem o vua ha xuong 1px de bang-ron to ra, keo theo
le duoi chi con 1px (gan cham khoi MAIN LAYOUT). Tra khoang thoat o
DAY thay vi o dem o: nhu vay le duoi ve 7px ma anh van 192,6px.
⚠ Khong trong cho `mt-3` cua cls.asp:1227 lo viec nay — do la LUAT
CHET: `.m-auto{margin:auto!important}` cung the phat SAU `.mt-3`
nen thang, va margin-top:auto tren khoi thuong tinh ra 0. Da do. */
padding-bottom:6px!important;
}
/* V61 — DAO LAI CHIEU CUA V60. V60 hieu nguoc y: nguoi dung muon bang-ron
TO RA (giam dem 2-3px), toi lai tang dem 3px lam no be di.
Do @421px, bon phuong an:
dem 7px -> anh 180,8 · khe ngang 17,7 · le duoi 7 (V60, sai chieu)
dem 4px -> anh 186,8 · khe ngang 11,8 · le duoi 4 (goc)
dem 2px -> anh 190,6 · khe ngang 7,9 · le duoi 2
dem 1px -> anh 192,6 · khe ngang 5,9 · le duoi 1 <- lay cai nay
1px la het bien do nguoi dung cho (giam 3). Anh to hon GOC 5,9px.
⚠ Le duoi tut con 1px la khong the chap nhan — xem luat .ypx-r2 ben
duoi: le duoi duoc TRA LAI bang padding-bottom cua khoi bao, nen
bang-ron khong phai hy sinh gi de doi lay khoang thoat. */
body[data-yp-kind="listing"] .ypx-r2 > div{ padding:1px!important }
}
/* ============================================================================
V55 — DIEN THOAI: NOI BE RONG, SIET KHOANG DOC, ACCORDION CO SO DEM
----------------------------------------------------------------------------
Do pixel tren anh ban dang chay (categories.asp) va ban ta, ca hai o 421px:
dang chay ban ta sau lat
le hai ben cua the 13px 24px 12px
be rong the 395px 373px 397px
accordion -> banner hang 1 5px 16px 12px
banner hang 1 -> hang 2 8px 8px 8px
banner hang 2 -> the 9px 24px 8px
1. `padding-inline:24px` la con so DUNG cho vo 1320px tren may ban. Tren
man 421px no la 5,7% be ngang MOI BEN — 11,4% tong, chi de lam le.
Ha ve 12px lay lai 24px cho noi dung (+6,4%).
2. ⚠ KHE GIUA HAI HANG BANNER: KHONG DONG TOI. Doc tu anh ra 16px, nhung
ban do tren markup that cho 8px — dung bang ban mau. Chenh lech la vi
anh banner co san mot vien trang ben trong: mat nguoi thay no la khe,
may do thi khong. Sua theo con so doc tu anh se bop khe that xuong 4px.
3. ⚠ KHE TREN dung o 12 chu khong xuong 5 nhu ban mau. Hai khe (tren, va
giua hai hang) DUNG CHUNG mot don bay: le tren cua o banner (mt-2 = 8px).
Ep khe tren ve 5 thi khe giua hai hang con 4 — da thu va do duoc. Ben
kia dat 5 vi ho xep khac: o banner cua ho khong co le tren, khe sinh tu
mt-1 cua vo. Doi cach xep la doi markup ca hai nhanh; khong dang cho 7px.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .container-xxl:not(.ps-0){ padding-inline:12px!important }
body[data-yp-kind="listing"] .ypx-r2{ padding-top:4px!important }
body[data-yp-kind="listing"] div:has(> .ypx-cols){ margin-top:0!important }
}
/* ----------------------------------------------------------------------------
V55 — SO DEM TREN NUT ACCORDION. Hoc tu categories.asp §653-696.
Cai dang gia nhat o ban mau KHONG phai cai chevron — la CAI SO. Mot accordion
dong kin khong noi duoc ben trong co gi; nguoi dung phai bam de biet. Con so
tra lo cai do TRUOC khi bam: "23 nganh", "42 tinh". Do la thong tin.
⚠ KHONG dong toi dau "+" / "−". Toan bo luat cua .accordion nam trong
css_cls.css — tep KHONG CO trong phien lam (da dem: 0 luat .accordion o
day). Doi "+" thanh chevron ma khong nhin thay luat goc la doan mo.
"+"/"−" da noi dung trang thai dong/mo; cai thieu la SO.
-------------------------------------------------------------------------- */
body[data-yp-kind="listing"] .ypx-acc-cnt{
display:inline-block; margin-left:8px;
min-width:22px; padding:1px 7px; border-radius:999px;
background:var(--canvas); border:1px solid var(--line);
font-size:11.5px; font-weight:600; color:var(--muted);
text-align:center; vertical-align:1px;
}
/* ============================================================================
V56 — NUT LOC DIEN THOAI: CHEVRON, 46px, VIEN THEO BANG MAU AM
----------------------------------------------------------------------------
Do o 421px, TRUOC lat nay:
nut 405 x 42,5px 42,5 < 44 (WCAG 2.5.5)
vien #DEE2E6 Bootstrap .border, khong phai --line
bo goc 16px .rounded-4
dau mo "+" 15px float:right (css_cls.css dong 150)
bong .shadow-sm
chu #000 .text-black
bieu tuong den, thua ke
BON CAI SUA:
1. Cao toi thieu 46px. Nguong cham WCAG 2.5.5 la 44; lay 46 de con cho
cho vien 1px moi ben ma van du sau khi lam tron.
2. "+" -> chevron. "+" nghia la "them vao"; nut nay "mo xuong". Chevron ve
bang border nen khong phu thuoc phong bieu tuong co tai kip hay khong,
va XOAY 180deg khi mo — chuyen dong noi trang thai ro hon doi glyph.
3. Vien --line thay #DEE2E6. Xam lanh cua Bootstrap choi bang mau am
V44/V45; ca khoi trong nhu dan tu trang khac sang.
4. Bieu tuong -> --gold. §4.4: teal = CHI hanh dong. Hai bieu tuong nay la
TRANG TRI, nen theo gold giong V44 da lam voi cac bieu tuong khac.
⚠ DAC HIEU (chi ap voi css_cls.css — Bootstrap utility xem o duoi):
css_cls.css .accordion (0,1,0)
css_cls.css .accordion:after (0,1,1)
css_cls.css .active:after (0,1,1)
o day ... .accordion (0,2,1) thang
o day ... .accordion::after (0,2,2) thang
o day ... .accordion.active::after (0,3,2) thang
Cong them: tep nay nap SAU css_cls.css (cls.asp dong 610-611).
⚠ SAU !important (5 o luat goc + 1 o luat hover/active). Ban dau toi chi dinh dung HAI, va do lai tren tep DA VA
thi vien / bo goc / bong DEU KHONG AN. Ly do: bang dac hieu o tren chi
doi chieu voi css_cls.css — toi quen han cac UTILITY CUA BOOTSTRAP dang
nam tren chinh cai nut, va utility Bootstrap deu mang !important. Dac
hieu KHONG BAO GIO thang !important. Ca sau cai deu chi de danh
mot utility CO TEN, da do, tren CUNG mot phan tu:
.border{border:...!important} -> vien ve --line
.rounded-4{border-radius:...!important}-> bo goc ve 12px
.shadow-sm{box-shadow:...!important} -> bo bong
.text-black{color:#000!important} -> chu ve --ink
.pe-1{padding-right:.25rem!important} -> ve 0, vi `gap` da lo khoang cach
yp_cls2.css nap SAU bootstrap => !important cua ta thang khi ngang hang.
⇒ V57 se go `rounded-4 border shadow-sm text-black` khoi markup va bo
lai bon !important nay; luc do dang sua markup san roi.
⚠ Neo vao `.accordion` chu khong them lop moi: lat nay thuan CSS nen khong
duoc dong vao markup. An toan vi cls.asp dung chuoi `class="accordion`
DUNG 2 lan, ca hai la hai nut nay — da dem o cong dau vao. Bootstrap 5 co
thanh phan cung ten nhung cls.asp khong dung no o dau.
⚠ KHONG xep hai nut canh nhau: da do o 421px, moi nut 194,5px, tru bieu
tuong + vien so + chevron chi con ~95px cho nhan => "Phan ng...". Giu doc.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .accordion{
display:flex; align-items:center; gap:9px;
min-height:46px; margin-top:8px;
background:var(--surface);
border:1px solid var(--line);
border-radius:12px;
box-shadow:none;
font-size:14.5px;
color:var(--ink);
transition:border-color .18s ease, background-color .18s ease;
}
body[data-yp-kind="listing"] .accordion:hover,
body[data-yp-kind="listing"] .accordion.active{
background:var(--surface);
border-color:var(--action-line);
}
body[data-yp-kind="listing"] .accordion > i{
flex:0 0 auto; padding-right:0!important;
color:var(--gold); font-size:14px;
}
body[data-yp-kind="listing"] .ypx-acc-lbl{
flex:0 1 auto; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body[data-yp-kind="listing"] .ypx-acc-cnt{
flex:0 0 auto; margin-left:0;
min-width:24px; padding:2px 8px;
font-variant-numeric:tabular-nums;
}
body[data-yp-kind="listing"] .accordion::after{
content:""; flex:0 0 auto; float:none;
margin-left:auto; margin-right:2px;
width:8px; height:8px; border-radius:1px;
border-right:2px solid var(--muted);
border-bottom:2px solid var(--muted);
transform:translateY(-2px) rotate(45deg);
transition:transform .22s ease;
}
body[data-yp-kind="listing"] .accordion.active::after{
content:"";
transform:translateY(2px) rotate(-135deg);
}
}
/* ============================================================================
V57 — DANH SACH PHAN NGANH: HANG 44px, COT SO, TACH MO TA, MUC DANG XEM
----------------------------------------------------------------------------
Do o 421px TRUOC lat nay:
vung cham moi muc 23,7px (1 dong) / 43,4px (2 dong) 13/13 duoi 44
khe doc giua cac muc 10px
panel khi mo 691px
con so cuoi chuoi chu, co khi cuoi dong 2
dau dau muc dau kiem, ca 13 muc
text-transform capitalize (.panel a cua css_cls.css)
SAU CAI SUA, xep theo muc nang:
1. 23,7px -> 44px. Loi nang nhat cua ca khoi. WCAG 2.5.5.
2. So ve COT NEO PHAI, tabular-nums. Danh sach DA sap theo do lon — do la
tai san lon nhat o day — nhung so bi chon cuoi chuoi chu nen mat khong
so sanh duoc. Dua ra cot thi quet doc mot cai la thay.
3. Bo dau kiem trang tri. Dau kiem = "DA CHON" / "da xac thuc" (§4.5), va
chinh no dang mang nghia that o huy hieu "Xac thuc" ngay ben duoi.
Dat truoc ca 13 muc khi khong muc nao duoc chon la pha nghia ky hieu.
4. Muc dang xem: vach vang 3px + nhan. Dung ngon ngu §4.2 da co.
5. Ten dai: tach o dau NGOAC, phan trong ngoac xuong dong phu mo, cat
bang ellipsis. Chi tach o ngoac — xem chu thich ham YPTenC trong cls.asp.
6. text-transform ve none. Du lieu vao da la chu hoa dau tu roi; capitalize
chong len lam ca dong thanh Title Case, doc rat nhieu. H1 cua chinh
trang dung dung truong ay MA KHONG capitalize va doc de hon han.
⚠ VI SAO PHAI CAT CON 8: da do, nang moi hang len 44px thi panel tu 691 ->
734,6px — tuc XAU HON hien trang ve mat day noi dung. Cat con 8 thi con
537px (-154). "Hien 8" khong phai trang tri, no la dieu kien de lat nay
khong thanh mot buoc lui.
⚠ DAC HIEU voi `.panel a` cua css_cls.css (0,1,1):
`body[data-yp-kind="listing"] .ypx-fitem` = (0,2,1) => thang, KHONG can
!important. `.panel a` dat 10 thuoc tinh (text-transform, margin-bottom,
padding, background, border-*, border-radius, width, display, clear,
margin-right) — phai dap DU CA 10, thieu mot cai la con vet.
============================================================================ */
@media screen and (max-width:991px){
/* ⚠ V65 — DOI TEN tu .ypx-fwrap sang .ypx-fpan.
V57 (chinh toi) dat ten vo boc panel bo loc la `.ypx-fwrap` — DUNG CAI
TEN ma yp_footer.css dang dung cho vo boc chan trang. Dau tep
yp_footer.css ghi ro no chon ten do vi "khong ton tai o bat ky file CSS
nao khac, nen khong the va cham". Toi da pha bat bien ay.
Dac hieu: luat cua toi (0,2,1) > .ypx-foot .ypx-fwrap (0,2,0), va
`padding` viet gon nen dat padding-inline ve 0.
Do @421px TRUOC khi sua: chan trang padding-inline = 0px (dang le 16px)
=> chu phap nhan chay sat mep man hinh. Chi trang cls dinh, vi chi no
nap ca hai tep.
Da quet 11 ten lop V57/V58 tren 4 tep CSS: chi DUY NHAT cai nay va
cham; `ypx-fpan` = 0 lan o ca bon. */
body[data-yp-kind="listing"] .ypx-fpan{ padding:2px 0 8px }
body[data-yp-kind="listing"] .ypx-fitem{
display:flex; align-items:center; gap:12px;
min-height:44px; padding:6px;
margin:0; width:auto; clear:none;
background:transparent;
border:0; border-bottom:1px solid var(--line-soft); border-radius:0;
text-transform:none; text-decoration:none; color:var(--ink);
}
body[data-yp-kind="listing"] .ypx-fitem:last-child{ border-bottom:0 }
body[data-yp-kind="listing"] .ypx-fitem:active{ background:var(--line-soft) }
body[data-yp-kind="listing"] .ypx-fitem-t{ flex:1 1 auto; min-width:0 }
body[data-yp-kind="listing"] .ypx-fitem-n{
display:block; font-size:14px; font-weight:500; line-height:1.34; color:var(--ink);
}
body[data-yp-kind="listing"] .ypx-fitem-d{
display:block; margin-top:1px; font-size:11.5px; line-height:1.3;
color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body[data-yp-kind="listing"] .ypx-fitem-c{
flex:0 0 auto; min-width:44px; text-align:right;
font-size:13px; font-weight:600; color:var(--muted);
font-variant-numeric:tabular-nums;
}
body[data-yp-kind="listing"] .ypx-fitem.ypx-fnow{
background:var(--brand-soft);
border-left:3px solid var(--brand);
border-bottom-color:transparent;
border-radius:0 8px 8px 0;
padding-left:9px;
}
body[data-yp-kind="listing"] .ypx-fnow .ypx-fitem-n{ font-weight:600 }
body[data-yp-kind="listing"] .ypx-fnow .ypx-fitem-c{ color:var(--brand-mark) }
body[data-yp-kind="listing"] .ypx-fnow-b{
display:inline-block; margin-left:7px; padding:1px 7px;
border-radius:999px; background:var(--brand); color:var(--ink);
font-size:10px; font-weight:700; letter-spacing:.02em;
text-transform:uppercase; vertical-align:2px; white-space:nowrap;
}
body[data-yp-kind="listing"] .ypx-fgrp{
display:flex; align-items:center; gap:8px;
margin:14px 0 2px; padding:0 6px;
font-size:11px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--faint);
}
body[data-yp-kind="listing"] .ypx-fgrp > span{
font-weight:600; letter-spacing:0; color:var(--muted);
}
body[data-yp-kind="listing"] .ypx-fgrp::after{
content:""; flex:1 1 auto; height:1px; background:var(--line-soft);
}
body[data-yp-kind="listing"] .ypx-fhid{ display:none }
body[data-yp-kind="listing"] .ypx-fmore{
display:flex; align-items:center; justify-content:center;
width:100%; min-height:44px; margin:2px 0 0; padding:0;
background:transparent; border:0; border-top:1px solid var(--line-soft);
font-size:13.5px; font-weight:600; color:var(--action);
cursor:pointer;
}
body[data-yp-kind="listing"] .ypx-fmore::after{
content:""; width:7px; height:7px; margin-left:8px;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);
}
}
/* ============================================================================
V58 — PANEL TINH/THANH PHO: LUOI 3 COT, O 44px
----------------------------------------------------------------------------
Do o 421px, 53 tinh, TRUOC lat nay:
chip 25,7px cao · rong 64,3-133,3px · 53/53 duoi nguong 44
xuong dong 16 hang, mep RACH (3 hoac 4 chip moi hang)
khoi chip 587px
vien #DDD (tu `.panel a` cua css_cls.css)
chu capitalize
BA PHUONG AN DA DUNG VA DO, cung 53 tinh:
hien trang 25,7px · 16 hang · 587px · 53/53 duoi 44
A chip 34px 34px · 16 hang · 676px · 53/53 duoi 44
B chip 44px 44px · 17 hang · 888px · 0
C luoi 3 cot 44px · 18 hang · 906px · 0 <- chon
Khong phuong an nao cat mat ten tinh (scrollWidth vs clientWidth = 0).
Chon C vi no la cai DUY NHAT co cot thang de mat lan xuong. Voi 53 muc,
mep rach nghia la phai doc tung cai. 44px giu dung nhip da dat o V57.
⚠ GIA PHAI TRA: +319px (587 -> 906). Khong giau con so nay. Doi lai 53/53
chip dat nguong cham va danh sach lan dau tien QUET DUOC.
⚠ CHUA SAP A -> Z, du do duoc rang thu tu hien tai la NGAU NHIEN:
truy van dong 444 co `ORDER BY tinh_thanhpho.hienthi DESC`, ma `hienthi`
la CO BOOLEAN (chinh tep nay dung `hienthi = 'TRUE'` o dong 506).
Chua doi vi hai dieu KHONG DO DUOC tu ban do:
1. Thu tu THAT tren may chu. Neu TP.HCM / Ha Noi dang o dau bang thi
sap A->Z se day hai thanh pho lon nhat xuong giua (chu T, chu H).
2. Collation cua CSDL — `ORDER BY ten_vn` voi collation khong phai
Vietnamese_CI_AS co the xep "Đồng Nai" ra sau chu Z.
⚠ CUNG KHONG cat bot + "xem them" nhu V57: cat 41 tinh theo thu tu NGAU
NHIEN thi nguoi o Nghe An khong con cach nao tim ra. V57 cat duoc vi
danh sach phan nganh CO sap theo do lon (counter DESC).
⚠ DAC HIEU voi `.panel a` cua css_cls.css (0,1,1):
`body[data-yp-kind="listing"] .ypx-fchips a` = (0,2,2) => thang, khong can
!important. `.panel a` dat 10 thuoc tinh — phai dap DU CA 10.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypx-fchips{
display:grid; grid-template-columns:repeat(3, 1fr);
gap:6px; padding:8px 6px 4px;
}
body[data-yp-kind="listing"] .ypx-fchips a{
display:flex; align-items:center; justify-content:center;
min-height:44px; padding:0 10px;
margin:0; width:auto; clear:none;
background:var(--surface);
border:1px solid var(--line); border-radius:8px;
font-size:12.5px; line-height:1.25; text-align:center;
color:var(--ink); text-decoration:none; text-transform:none;
overflow:hidden; text-overflow:ellipsis;
}
body[data-yp-kind="listing"] .ypx-fchips a:active{
background:var(--action-tint); border-color:var(--action-line);
color:var(--action-deep);
}
}
/* ============================================================================
V62 — CHIP "XAC THUC" LEN HANG KIM CUONG / "TAI TRO"
----------------------------------------------------------------------------
Phan lam duoc bang ASP nam o cls.asp. O day CHI mot luat, va no la mot
DANH DOI phai noi ro.
Do be rong tung manh @421px:
.ypx-tt (5 kim cuong + "Tai tro") 158,5px
.duocxacthuc khong ngay 87,5px
.duocxacthuc CO "(ngay: dd/mm/yyyy)" 198,6px
nut "i" (.ypx-xt) 23,0px
gap cua .ypx-bdg 10px x 2
Hai to hop THAT SU ton tai — chip co ngay chi o nhanh KHONG TAITRO, ma
nhanh do khong co chu "Tai tro":
to hop 360px 390px 421px
A TAITRO gem + "Tai tro" + Xac thuc 2 dong 1 hang 1 hang
B khac gem + Xac thuc + "(ngay:..)" 2 dong 2 dong 1 hang
B' nhu tren + AN phan ngay o mobile 1 hang 1 hang 1 hang
"(ngay: dd/mm/yyyy)" chiem 111px va la thu DUY NHAT lam hang vo.
⚠ DANH DOI: ngay xac thuc KHONG con hien tren dien thoai. Ban bàn may giu
nguyen. Day la thong tin that bi bo bot, va nguoi dung khong xin dieu do
— lam vi khong co no thi "ngang voi kim cuong" khong thanh o hau het may.
MUON TRA LAI: xoa dung khoi nay.
⚠ Chua tron: to hop A o 360px van xuong 2 dong (can 289px, co 278px). KHONG
siet `gap` 10 -> 4px de ep cho vua: lam vay thi MOI the tren trang trong
chat lai chi de cuu mot kho may. Tu 390px tro len la mot hang.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypx-bdg .duocxacthuc .text-black-50{ display:none }
}
/* ============================================================================
V64 — BO NUT "Chi tiet →" O CHAN THE, BAN DIEN THOAI
----------------------------------------------------------------------------
Hai cau hoi phai tra loi bang PHEP DO truoc khi bo mot loi goi hanh dong:
1. Bo no co lam MAT DUONG DI khong? KHONG.
cls.asp:1422 ten cong ty -> /lgs/{cq_idall*3+657153}/{...}.html
cls.asp:1670 nut Chi tiet -> /lgs/{cq_idall*3+657153}/{...}.html
Y HET nhau. Ten cong ty da la lien ket, va no la dong to nhat trong the.
Nut chi la duong THU HAI toi cung mot cho — chu thich V31 ngay tren cung
da ghi "hai nut mot dich trong mot the".
2. Co PHEP TU KIEM nao bam vao no khong? CO, va an KHONG lam no bao sai.
cls.asp:1996 ["nut chan the", ".ypx-detail"] trong bang CHECKS cua
phep do tuong phan chay ngay tren trang.
cls.asp:1980 function bgOf(e){ ...cs(n,"backgroundColor")... parentElement }
Ham nay CHI doc computed style va di len cay cha — khong
getBoundingClientRect, khong elementFromPoint. Phan tu display:none van
tra ve color/backgroundColor binh thuong nen phep do van chay dung.
(No cung chi chay khi ?bando=1 — cls.asp:239 — khong phai san xuat.)
⚠ Chi AN bang CSS, KHONG go khoi markup. Nho vay phep tu kiem van tim thay
phan tu, va muon bat lai chi can xoa dung khoi nay.
⚠ Nguong 991px (ranh gioi dien thoai/ban may cua tep nay), KHONG phai 500px:
nut nay khong lien quan gi toi so cot cua dai anh.
============================================================================ */
@media screen and (max-width:991px){
body[data-yp-kind="listing"] .ypx-detail{ display:none }
}