/* =====================================================================
 * YPVN-BUILD: cls-v24-V59  |  2026-08-24
 * ---------------------------------------------------------------------
 * ⚠ MOI TEP CSS DUNG CHUNG PHAI CO DONG YPVN-BUILD O DAY.
 *   Bay B23 (deploy nham/thieu tep) truoc day chi duoc chan cho tep
 *   .asp va yp_cls2.css. Ba tep CSS dung chung tao o V11/V13/V15 thi
 *   KHONG CO — va V17 da hong vi dung ly do do: may chu con giu ban
 *   yp_search.css cu, markup moi khong nhan mot luat nao, va khong co
 *   cach nao biet ngoai viec nhin trang hong.
 *
 * ⚠ TU V18, LUAT CUA O TIM KIEM NAM TRONG TEP NAY.
 *   yp_css/yp_search.css KHONG con duoc nap. Xoa no khoi may chu.
 *   Ly do: o tim kiem gio nam tron ven trong yp_header.asp (nut o
 *   topbar + lop tha xuong + man phu + JS), va yp_header.asp <->
 *   yp_header.css von da la MOT CAP. Bot mot tep la bot mot tep de quen.
 * ===================================================================== */
:root{ --ypx-hdr-build:"cls-v24-V23" }

/* =====================================================================
 * yp_header.css   [YPVN-BUILD: hdr-V54 | sua vi tri nut menu tren trang chu | 2026-08-24] — TOPBAR DUNG CHUNG cho MOI trang yellowpages.vn
 * Cap doi voi yp_header.asp. Dat 01/08/2026.
 * Nguon thiet ke: ypvn_mockup_trangchu_v25.html §header
 *
 * ⚠ NGOAI LE co chu dich voi luat "moi selector bat dau bang
 *   body[data-yp-page=...]": topbar la thu PHAI giong nhau tren ca ba
 *   trang index / cls / lgs, pham vi hoa theo trang se pha muc dich.
 *   Thay vao do pham vi hoa bang .ypx-hbar — lop moi hoan toan.
 *
 * ⚠ MOI bien deu co GIA TRI DU PHONG: var(--ypx-ink, #171510). :root chua
 *   token nam trong yp_home2.css, ma cls.asp / lgs.asp KHONG nap file do.
 *
 * NGUONG 991: mat sau cua max-width:991 DA CO trong css_home.css va
 *   yp_home2.css => khong them so moi vao he.
 * ===================================================================== */

.ypx-hbar{
  background:var(--ypx-surface, #FFFFFF);
  border-bottom:1px solid var(--ypx-line, #E7E5E1);
  position:relative; z-index:20;
}
.ypx-hwrap{
  max-width:var(--ypx-shell, 1320px);
  margin:0 auto;
  padding-inline:24px;
}
.ypx-head{
  display:flex; align-items:center; gap:28px;
  height:var(--ypx-head-h, 74px);
}

.ypx-logo{ display:flex; align-items:center; gap:10px; flex:0 0 auto; text-decoration:none }
.ypx-logo img{ display:block; width:36px; height:36px; border-radius:var(--ypx-r-ctrl, 6px) }
.ypx-wm{ font-weight:700; font-size:21px; letter-spacing:-.02em; line-height:1.15; color:var(--ypx-ink, #171510) }
.ypx-wm span{ font-weight:400; color:var(--ypx-muted, #5B5851) }
.ypx-logo:hover .ypx-wm{ color:var(--ypx-ink, #171510) }

.ypx-nav{ display:flex; align-items:center; gap:24px }
.ypx-nav a{
  font-size:14px; font-weight:600; color:var(--ypx-ink, #171510);
  padding:8px 0; border-bottom:2px solid transparent; text-decoration:none;
}
.ypx-nav a:hover{
  color:var(--ypx-action, #0E6B73)!important;
  border-bottom-color:var(--ypx-action, #0E6B73); text-decoration:none;
}

.ypx-right{ margin-left:auto; display:flex; align-items:center; gap:20px }
.ypx-txt{ font-size:14px; color:var(--ypx-muted, #5B5851); text-decoration:none }
.ypx-txt:hover{ color:var(--ypx-action, #0E6B73)!important; text-decoration:none }
.ypx-adlink{ font-size:14px; font-weight:500; color:var(--ypx-action, #0E6B73); text-decoration:none }
.ypx-adlink:hover{ color:var(--ypx-action-deep, #0A5157)!important; text-decoration:underline }
.ypx-cta{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:var(--ypx-cta, #C2410C); color:#fff!important;
  font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:var(--ypx-r-ctrl, 6px); text-decoration:none;
}
.ypx-cta:hover{ background:var(--ypx-cta-deep, #9A3412); color:#fff!important; text-decoration:none }

/* ---- ban dien thoai ---- */
.ypx-h-mb{ display:none }
.ypx-mbtn{
  margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; cursor:pointer;
  background:none; color:var(--ypx-ink, #171510);
  border:1px solid var(--ypx-line, #E7E5E1); border-radius:var(--ypx-r-ctrl, 6px);
}
.ypx-mbtn:hover{ background:var(--ypx-canvas, #F4F3F1) }
.ypx-mpanel{
  display:none;
  border-top:1px solid var(--ypx-line-soft, #F0EFEB);
  background:var(--ypx-surface, #FFFFFF);
  padding:6px 24px 18px;
}
.ypx-mpanel a{
  display:block; padding:13px 2px;
  border-bottom:1px solid var(--ypx-line-soft, #F0EFEB);
  font-size:15px; font-weight:500;
  color:var(--ypx-ink, #171510)!important; text-decoration:none;
}
.ypx-mpanel a:hover{ color:var(--ypx-action, #0E6B73)!important; text-decoration:none }
.ypx-mdone{
  margin-top:14px; width:100%; padding:11px 0; cursor:pointer;
  background:var(--ypx-canvas, #F4F3F1); color:var(--ypx-ink, #171510);
  border:1px solid var(--ypx-line, #E7E5E1); border-radius:var(--ypx-r-ctrl, 6px);
  font-size:15px; font-weight:600;
}
.ypx-mdone:hover{ background:var(--ypx-line-soft, #F0EFEB) }

@media screen and (max-width:1199px){
  .ypx-head{ gap:18px }
  .ypx-nav{ gap:16px }
  .ypx-right{ gap:14px }
  .ypx-nav a, .ypx-adlink{ font-size:14px }
}
@media screen and (max-width:1050px){
  .ypx-txt{ display:none }
}
@media screen and (max-width:991px){
  .ypx-h-pc{ display:none }
  .ypx-h-mb{ display:flex; height:64px; gap:12px }
  .ypx-hwrap{ padding-inline:16px }
  .ypx-logo img{ width:32px; height:32px }
  .ypx-wm{ font-size:19px }
  .ypx-mpanel{ padding-inline:16px }
}

/* =====================================================================
 * v28 | MENU DIEN THOAI: TU BANG DAY XUONG THANH NGAN KEO
 * ---------------------------------------------------------------------
 * Ban cu: .ypx-mpanel la mot bang XO XUONG duoi topbar, day het noi dung
 * trang xuong. Tren dien thoai no co ba van de:
 *   · day trang xuong => mat vi tri cuon, dong menu lai thi lac
 *   · dai hon man hinh => phai cuon CA TRANG de thay het menu
 *   · khong co man phu => khong ro dang o mot LOP hay da roi trang
 * Ban moi: ngan keo truot tu PHAI (nut ☰ o phai — tay cham dau thi lop
 * mo ra tu do), cao het man hinh, than tu cuon rieng, co man phu.
 *
 * Rong min(360px, 88vw): chua 12vw de van thay trang phia sau => nguoi
 * dung luon biet minh dang o mot LOP PHU, chua roi trang.
 * Moi dong cao 52px: tren nguong cham 44px cua WCAG 2.5.5 + bien an toan.
 * ===================================================================== */
html.ypx-lock{ overflow:hidden }

.ypx-isprite{ position:absolute; width:0; height:0; overflow:hidden }

.ypx-scrim{
  position:fixed; inset:0; z-index:98; background:rgba(23,21,16,.42);
  opacity:0; transition:opacity .22s ease;
}
.ypx-scrim.on{ opacity:1 }

/* ghi de HOAN TOAN luat .ypx-mpanel cu */
.ypx-mpanel{
  position:fixed; top:0; right:0; bottom:0; left:auto; z-index:99;
  width:min(360px, 88vw); max-width:none;
  border-top:0; padding:0;
  background:var(--ypx-surface, #FFFFFF);
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  box-shadow:-8px 0 32px rgba(23,21,16,.16);
}
/* JS goc dat display:block; ta bien no thanh flex de dau/than/chan xep dung */
.ypx-mpanel[style*="block"]{ display:flex!important }
.ypx-mpanel.on{ transform:translateX(0) }

/* ---- dau ngan keo ---- */
.ypx-mp-head{
  display:flex; align-items:center; gap:12px; padding:16px; flex:0 0 auto;
  border-bottom:1px solid var(--ypx-line-soft, #F0EFEB);
}
.ypx-mp-mk{ width:40px; height:40px; flex:0 0 auto; border-radius:var(--ypx-r-card, 8px) }
.ypx-mp-t{ min-width:0 }
.ypx-mp-t b{ display:block; font-size:15px; font-weight:700; line-height:1.3; color:var(--ypx-ink, #171510) }
.ypx-mp-t span{ display:block; font-size:12.5px; color:var(--ypx-muted, #5B5851) }

/* nut dong: tu nut "Dong" toan chieu ngang o day -> nut tron o dau */
.ypx-mdone{
  margin:0 0 0 auto; width:40px; height:40px; flex:0 0 auto; padding:0;
  border-radius:999px; border:0;
  background:var(--ypx-canvas, #F4F3F1); color:var(--ypx-ink, #171510);
  display:grid; place-items:center; cursor:pointer;
}
.ypx-mdone:hover{ background:var(--ypx-line, #E7E5E1) }

/* ---- than cuon rieng ---- */
.ypx-mp-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 0 4px }
.ypx-mp-lb{
  margin:0; padding:16px 16px 6px;
  font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ypx-muted, #5B5851);
}
.ypx-mpanel .ypx-mi{
  display:flex!important; align-items:center; gap:12px;
  min-height:52px; padding:8px 16px!important;
  border-bottom:0!important;
  font-size:15px; font-weight:500;
  color:var(--ypx-ink, #171510)!important; text-decoration:none;
}
.ypx-mi:active{ background:var(--ypx-canvas, #F4F3F1) }
.ypx-mi-ic{
  flex:0 0 auto; width:32px; height:32px; border-radius:var(--ypx-r-ctrl, 6px);
  background:var(--ypx-canvas, #F4F3F1); color:var(--ypx-muted, #5B5851);
  display:grid; place-items:center;
}
.ypx-mi-ic svg{ width:17px; height:17px; display:block }
.ypx-mi-tx{ flex:1 1 auto; min-width:0 }
.ypx-mi-ar{ flex:0 0 auto; color:var(--ypx-muted, #5B5851); font-size:17px; line-height:1 }
.ypx-mi-tag{
  flex:0 0 auto; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--ypx-verify-tint, #EAF6EE); color:#14602F;
}
/* CHI MOT dong noi bat trong ca menu. Hai dong thi khong con dong nao noi bat. */
.ypx-mpanel .ypx-mi-hi{
  background:var(--ypx-verify-tint, #EAF6EE);
  margin:2px 10px; border-radius:var(--ypx-r-card, 8px); padding-inline:10px!important;
}
.ypx-mi-hi .ypx-mi-ic{ background:#fff; color:#15803D }
.ypx-mi-hi .ypx-mi-tx{ font-weight:600 }

/* ---- chan: DICH cua ca menu ----
   Nguoi xem het danh sach ma chua thay thu can thi van con so dien thoai. */
.ypx-mp-foot{
  flex:0 0 auto; background:var(--ypx-ink, #171510); color:#fff;
  padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.ypx-mp-flb{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ypx-brand, #FFDE06);
}
.ypx-mpanel .ypx-mp-tel{
  display:block; margin:8px 0 4px; font-size:24px; font-weight:700;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  color:#fff!important; text-decoration:none;
}
.ypx-mp-foot p{ margin:0 0 12px; font-size:12.5px; line-height:1.55; color:#C9C5BC }
.ypx-mpanel .ypx-mp-zalo{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#0068FF; color:#fff!important; font-weight:600; font-size:14px;
  padding:12px; border-radius:var(--ypx-r-card, 8px); text-decoration:none;
}

/* Xoay ngang tu dien thoai sang may tinh khi menu dang mo: JS cu de lai
   style="display:block" noi tuyen. Chan lai o bac may tinh. */
@media screen and (min-width:992px){
  .ypx-mpanel{ display:none!important }
  .ypx-scrim{ display:none!important }
  html.ypx-lock{ overflow:auto }
}
@media (prefers-reduced-motion:reduce){
  .ypx-mpanel, .ypx-scrim{ transition:none }
}

/* =====================================================================
 * O TIM KIEM tren topbar — DA CHUYEN sang yp_css/yp_search.css (21/08/2026)
 * ---------------------------------------------------------------------
 * V13 dat o day mot NUT (.ypx-hsearch) mo modal. V15 doi no thanh <form>
 * hai truong that, va moi luat lien quan chuyen sang yp_search.css — tep
 * cap doi voi khoi <form> trong yp_header.asp.
 * Giu chu thich nay lam dau vet: dung tim .ypx-hsearch o day nua.
 * ===================================================================== */


/* =====================================================================
 * O TIM KIEM + TOPBAR  (V20 — dung so cua mockup v24)
 *   · .ypx-srch  O TIM INLINE tren topbar, 460x44
 * Ban V17/V18 dung NUT + LOP THA XUONG (.ypx-hsearch / .ypx-sp /
 * .ypx-srch-hero) vi topbar khong du cho. Nav rut con 4 muc thi du cho,
 * nen quay lai dang inline dung nhu mockup. Ba ho lop do da bo han.
 * ===================================================================== */

/* ============ TOPBAR — DUNG SO CUA MOCKUP v24 ============
   Do tren chinh mockup: .topin cao 62 (padding 9px 0) · thuong hieu 18px/700
   · nav gap 18, moi lien ket 14px/500 mau --muted · CTA cao 40, dem 9/16,
   bo 8px · O TIM 460x44 nen --canvas vien 1px bo 999px, o nhap 14px,
   nut tron 34x34 nen --brand.
   Ban truoc lech 7 cho: cao 74 · logo 36 · chu hieu 21 · nav 600 dam ·
   nav mau --ink · gap 16 · CTA 10/18 bo 6. */
.ypx-head{ gap:24px }
.ypx-logo img{ width:30px; height:30px }
.ypx-wm{ font-size:18px }
.ypx-nav{ gap:18px }
.ypx-nav a{
  font-size:14px; font-weight:500; color:var(--ypx-muted, #5B5851);
  padding:6px 0; border-bottom:2px solid transparent;
}
.ypx-nav a:hover{
  color:var(--ypx-action, #0E6B73)!important;
  border-bottom-color:var(--ypx-action, #0E6B73);
}
.ypx-right{ gap:18px }
.ypx-adlink{ font-size:14px; font-weight:500; color:var(--ypx-muted, #5B5851) }
.ypx-adlink:hover{ color:var(--ypx-action, #0E6B73)!important; text-decoration:none }
.ypx-txt{ font-size:14px; font-weight:500 }
.ypx-cta{ font-size:14px; font-weight:600; padding:9px 16px; border-radius:8px }

/* ============ NUT NGANH NGHE tren topbar (.ypx-hsearch) ============
   Nut doc nhu NHAN "ban dang o day", khong phai loi moi sua. Ten nganh dai
   hon o thi cat bang dau ba cham — ten day du nam trong <h1> ngay duoi. */
.ypx-hsearch{
  flex:0 1 clamp(150px, 20vw, 280px); min-width:0;
  display:flex; align-items:center; gap:9px;
  height:40px; padding:0 15px;
  background:var(--ypx-canvas, #F4F3F1);
  border:1px solid var(--ypx-line, #E7E5E1);
  border-radius:999px;
  color:var(--ypx-muted, #5B5851);
  font-size:14px; font-weight:500; text-align:left; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.ypx-hsearch:hover{
  background:var(--ypx-surface, #FFFFFF);
  border-color:var(--ypx-action, #0E6B73);
  color:var(--ypx-ink, #171510);
}
.ypx-hsearch:focus-visible{
  outline:0; border-color:var(--ypx-action, #0E6B73);
  box-shadow:0 0 0 3px rgba(14,107,115,.16);
}
.ypx-hsearch svg{ flex:0 0 auto; width:16px; height:16px; color:var(--ypx-faint, #807D74) }
.ypx-hsearch span{
  flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ============ LOP TIM KIEM THA XUONG (.ypx-sp) ============
   KHONG phai modal toan man: modal che mat ket qua nguoi dung dang doc va
   bat ho dinh vi lai khi dong. Lop nay chi chiem phan tren.
   XEP CHONG — .ypx-hbar co z-index:20 => ngu canh rieng; trong do
   topbar (12) > lop (11) > man phu (10). Topbar luon bam duoc. */
.ypx-has-search .ypx-hwrap{ position:relative; z-index:12 }
.ypx-sp-scrim{
  position:fixed; inset:0; z-index:10;
  background:rgba(23,21,16,.44);
  opacity:0; transition:opacity .2s ease;
}
.ypx-sp-scrim.on{ opacity:1 }
.ypx-sp{
  position:absolute; top:100%; left:0; right:0; z-index:11;
  background:var(--ypx-surface, #FFFFFF);
  border-bottom:1px solid var(--ypx-line, #E7E5E1);
  box-shadow:0 16px 38px rgba(23,21,16,.14);
  padding:28px 24px 26px;
  opacity:0; transform:translateY(-10px);
  transition:opacity .2s ease, transform .2s ease;
}
.ypx-sp.on{ opacity:1; transform:none }
.ypx-sp-in{ max-width:1000px; margin:0 auto; position:relative }
.ypx-sp-x{
  position:absolute; top:-10px; right:-44px; width:34px; height:34px; padding:0;
  border:1px solid var(--ypx-line, #E7E5E1); border-radius:999px;
  background:var(--ypx-surface, #FFFFFF); color:var(--ypx-muted, #5B5851);
  display:grid; place-items:center; cursor:pointer; font-size:13px; line-height:1;
}
.ypx-sp-x:hover{ background:var(--ypx-canvas, #F4F3F1); color:var(--ypx-ink, #171510) }
@media (prefers-reduced-motion:reduce){ .ypx-sp, .ypx-sp-scrim{ transition:none } }

/* ============ O TIM KIEM CO LON (.ypx-srch-hero) ============
   Bay thu cua mot danh ba B2B, khong phai o tim kiem trang chu bung to:
     · o cao 64px (boi so luoi 8, tren nguong cham WCAG 2.5.5)
     · vach chia 1x28px DUNG GIUA — vien mot ben chay het chieu cao lam
       hai o trong nhu roi nhau
     · nut tim kiem CO CHU, khong chi bieu tuong: chi co kinh lup thi
       nguoi dung phai doan
     · vong focus tren CA HOP — hop la mot don vi, khong phai hai o
     · hang tuy chon tach ra: tuy chon trai, goi y ban phim phai
   MOI luat phai ghi de css_cls.css (float / width% / height px /
   background-image) nen phai dat lai TUNG thuoc tinh. */
.ypx-srch-hero .yp_box_timkiem{
  width:100%; height:auto; margin:0; float:none;
  display:flex; align-items:stretch;
  background:var(--ypx-surface, #fff);
  border:1px solid var(--ypx-line, #E7E5E1);
  border-radius:12px!important;
  /* KHONG overflow:hidden — bo mot bien so cua TVAC (neu thu vien dat
     khung goi y BEN TRONG #auto thi overflow:hidden se cat mat no).
     Bo goc van giu duoc: nut tim kiem tu bo goc phai. */
  box-shadow:0 6px 22px rgba(23,21,15,.10);
  transition:box-shadow .15s ease;
}
.ypx-srch-hero .yp_box_timkiem:focus-within{
  border-color:var(--ypx-action, #0E6B73);
  box-shadow:0 6px 22px rgba(23,21,15,.10), 0 0 0 4px rgba(14,107,115,.16);
}
.ypx-srch-hero .yp_timgi_div{
  height:auto; width:auto; flex:1 1 56%; min-width:0; float:none;
  display:flex; align-items:center; position:relative; border:0;
  padding-left:18px;
}
/* vach chia dung giua, khong chay het chieu cao */
.ypx-srch-hero .yp_odau_div{
  height:auto; width:auto; flex:1 1 34%; min-width:0; float:none; margin-top:0;
  display:flex; align-items:center; position:relative;
  background-image:none; border:0; padding-left:18px;
}
.ypx-srch-hero .yp_odau_div::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:28px; background:var(--ypx-line, #E7E5E1);
}
.ypx-srch-hero .ypx-ico{
  flex:0 0 auto; display:flex; align-items:center; margin-right:11px;
  color:var(--ypx-faint, #807D74);
}
.ypx-srch-hero .ypx-ico svg{ display:block }
.ypx-srch-hero .yp_timgi_div > p,
.ypx-srch-hero .yp_odau_div > p{ margin:0; flex:1 1 auto; min-width:0; position:relative }
.ypx-srch-hero .yp_input_timgi,
.ypx-srch-hero .yp_input_odau{
  width:100%!important; height:64px; border:0; background:none; border-radius:0;
  font-family:inherit; font-size:16px; line-height:64px;
  color:var(--ypx-ink, #171510); padding:0 34px 0 0!important;
  /* ⚠ Vong focus MAC DINH cua Chrome ve mot khung den vuong quanh o nhap
     khi JS goi focus() luc mo lop — dam hon ca hop, nhin nhu loi.
     Bo duoc vi da co tin hieu focus THAY THE o cap tren: ca hop doi vien
     sang teal + vong sang (:focus-within). Chi bo tren HAI o nhap nay. */
  outline:0;
}
.ypx-srch-hero input::placeholder{ color:var(--ypx-muted, #5B5851); opacity:1 }
.ypx-srch-hero .yp_timkiem_div{ height:auto; width:auto; flex:0 0 auto; padding:0; float:none }
.ypx-srch-hero .yp_submit_timkiem{
  height:64px; width:auto; padding:0 28px; border:0;
  border-radius:0 11px 11px 0;   /* thay cho overflow:hidden cua hop */
  background:var(--ypx-brand, #FFDE06); color:var(--ypx-ink, #171510);
  font-family:inherit; font-size:15px; font-weight:600;
  display:flex; align-items:center; gap:9px; white-space:nowrap; cursor:pointer;
  transition:background .15s ease;
}
.ypx-srch-hero .yp_submit_timkiem:hover{ background:var(--ypx-brand-deep, #E9C900) }
/* NUT XOA — css_cls.css dong 84-85 dat display:none, va cls.asp chi bat no
   trong onkeydown. Lop mo ra voi o DA DIEN SAN nen chua go phim nao =>
   nut khong hien, nguoi muon tim thu khac phai boi den va xoa tay.
   Hien MAC DINH o day. Trinh nghe cu van chay nguyen (no dat display noi
   tuyen, thang luat nay), nen luong cu khong hong.
   ⚠ Phai dep o CA `block` LAN `grid` vi JS dat display:"block" => can giua
      bang line-height, KHONG dung grid. */
.ypx-srch-hero .xoakey_what,
.ypx-srch-hero .xoakey_where{
  display:block; position:absolute;
  top:50%; transform:translateY(-50%); right:8px;
  height:22px; width:22px; padding:0;
  font-size:11px; line-height:22px; text-align:center;
  border:0; border-radius:50%;
  background:var(--ypx-canvas, #F4F3F1)!important;
  color:var(--ypx-muted, #5B5851)!important;
  cursor:pointer; transition:background .12s ease, color .12s ease;
}
.ypx-srch-hero .xoakey_what:hover,
.ypx-srch-hero .xoakey_where:hover{
  background:var(--ypx-line, #E7E5E1)!important;
  color:var(--ypx-ink, #171510)!important;
}
/* neo cho khung goi y cua TVAC (gan vao #auto / #auto1) */
.ypx-srch-hero #auto,
.ypx-srch-hero #auto1{ position:relative }

/* hang tuy chon: tuy chon trai · goi y ban phim phai */
.ypx-sp-opt{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:12px; flex-wrap:wrap;
}
/* ⚠ cls.asp dong 917 dat `#timcty.style.display = "block"` NOI TUYEN khi
   go phim. Kieu noi tuyen thang moi luat CSS, nen parent doi tu flex
   sang block va hai the con xuong dong.
   Chua o TANG CON: cho chung `inline-flex` + `vertical-align:middle`
   => nam ngang du parent la flex HAY block, va JS van bat/tat duoc
   parent nhu cu. KHONG dung mot !important nao de danh nhau voi JS.
   `gap` chi chay khi parent la flex nen doi sang margin-left tren the chu. */
.ypx-srch-hero .timcongty{
  display:flex; align-items:center; flex:0 0 auto;
  width:auto; margin:0!important; padding:0!important;
  background:none!important; opacity:1; line-height:22px;
}
.ypx-srch-hero .timcongty .timcongty_check{
  float:none; display:inline-flex; align-items:center; vertical-align:middle;
  height:auto; width:auto;
}
.ypx-srch-hero .timcongty_check input{
  margin:0; width:16px; height:16px; cursor:pointer;
  accent-color:var(--ypx-action, #0E6B73);
}
.ypx-srch-hero .timcongty .timcongty_text{
  float:none; display:inline-flex; align-items:center; vertical-align:middle;
  height:auto; margin:0 0 0 8px; color:var(--ypx-muted, #5B5851);
}
.ypx-srch-hero .timcongty label{ font-size:13px; cursor:pointer; margin:0 }
.ypx-sp-hint{ font-size:12px; color:var(--ypx-faint, #807D74) }
.ypx-sp-hint kbd{
  font-family:inherit; font-size:11px; font-weight:600;
  padding:2px 6px; border-radius:5px;
  background:var(--ypx-canvas, #F4F3F1);
  border:1px solid var(--ypx-line, #E7E5E1);
  color:var(--ypx-muted, #5B5851);
}

@media screen and (max-width:991px){
  /* V53 — O TIM KIEM THANH MOT NUT VUONG.
     Truoc V53: `flex:1 1 auto` cho no gian ra nuot ca thanh — 266px trong
     389px o kho 421, tuc 68% thanh dau trang, va chu hieu khong con cho.
     Hai le do bo:
       · no la <button> mo hop thoai chu KHONG phai o nhap, nhung trong y
         het mot o nhap (vien + nen xam + kinh lup + chu mo ben trong).
         Nguoi dung cham vao cho go chu, lai bi bat mot hop thoai — loi
         khoi goi, cung ho voi nut "Chi tiet" mau xam da chua o V50.
       · chu ben trong no lap lai dung ten nganh ma H1 ngay duoi da noi.
     ⚠ `flex:0 0 auto` con chua mot khuyet tat nua: truoc day .ypx-mbtn
       bi CO LAI theo be ngang — do duoc 42,0 / 40,6 / 36,2 / 32,0 / 26,3px
       o 575 / 421 / 390 / 360 / 320. Nut menu la duong DUY NHAT vao dieu
       huong tren dien thoai; 26,3px thi khong cham trung. Nay co dinh 42. */
  /* V54 — SUA LOI CUA V53. Truoc day `margin-left:auto` nam o day, tren
     CHINH nut tim. Nhung nut tim chi duoc dung khi ypHS co gia tri; tren
     TRANG CHU no khong ton tai nen khong con gi mang cai auto ay, va nut
     menu dung cach me phai 169,1px (do duoc). Nay auto nam o le phai cua
     LOGO — thu luon ton tai o ca hai trang. Do lai: 0px / 0px.
     Bai hoc: dung treo margin:auto len mot phan tu CO DIEU KIEN. */
  .ypx-h-mb .ypx-logo{ margin-right:auto }
  .ypx-h-mb .ypx-hsearch{
    flex:0 0 auto; width:42px; height:42px; padding:0; justify-content:center;
    margin-left:0;
  }
  .ypx-h-mb .ypx-hsearch span{ display:none }
  .ypx-h-mb .ypx-hsearch svg{ width:19px; height:19px }
  .ypx-h-mb .ypx-mbtn{ flex:0 0 auto; margin-left:0 }
  .ypx-sp{ padding:18px 16px 20px }
  .ypx-sp-x{ right:0; top:-12px }
}
@media screen and (max-width:767px){
  .ypx-srch-hero .yp_box_timkiem{ flex-direction:column }
  .ypx-srch-hero .yp_timgi_div{
    border-bottom:1px solid var(--ypx-line, #E7E5E1); flex:1 1 auto;
  }
  .ypx-srch-hero .yp_odau_div{ flex:1 1 auto }
  .ypx-srch-hero .yp_odau_div::before{ display:none }
  .ypx-srch-hero .yp_input_timgi,
  .ypx-srch-hero .yp_input_odau{ height:56px; line-height:56px; font-size:16px }
  .ypx-srch-hero .yp_timkiem_div{ flex:1 1 auto }
  .ypx-srch-hero .yp_submit_timkiem{
    width:100%; height:52px; justify-content:center;
    border-radius:0 0 11px 11px;   /* hop xep doc => nut nam DUOI */
  }
  .ypx-sp-hint{ display:none }
}

/* ============ NAV con 4 MUC ============
   Muc luc nganh nghe A-Z · Quang cao · ENGLISH · [+ Dang ky trang vang mien phi]
   "Ve Trang Vang" va "Lien he" an luon — ca hai con o chan trang dung chung
   va trong ngan keo dien thoai.
   Thu tu theo DOM: Muc luc · ENGLISH · Quang cao · [CTA]. */
.ypx-has-search .ypx-nav a:nth-child(2){ display:none }
.ypx-has-search .ypx-right > .ypx-txt:first-child{ display:none }

/* Nut 280px (khong phai o tim 460) nen nav tho hon 180px so voi V20. */
@media screen and (max-width:1199px){
  .ypx-has-search .ypx-right > .ypx-txt{ display:none }
}
@media screen and (max-width:1099px){
  .ypx-has-search .ypx-adlink{ display:none }
}
/* V53 — DA BO luat giau chu hieu o <=575px.
   Truoc day: @media (max-width:575px){ .ypx-wm{ display:none } }
   Do la ly do tren dien thoai chi con mot ky hieu vuong nho ma khong ai
   doc ra la YellowPages. Chu hieu vua la neo thuong hieu vua la duong ve
   trang chu — tren dien thoai no can hon ca tren may ban.
   Cho da lay lai tu viec o tim kiem thanh nut vuong (xem khoi <=991 tren).

   V53 — MAN RAT HEP: thu khe va co chu de van du cho.
   Do tren ban dung, cho du con lai:
     575px 257,1 · 421px 103,1 · 414px 96,1 · 390px 106,4
     375px  91,4 · 360px  76,4 · 320px  36,4      — khong kho nao tran
   Neu giu khe 24px va co chu 18px thi 320px chi con du 2,1px: mot lan doi
   phong hoac nguoi dung phong to chu la vo. */
@media screen and (max-width:400px){
  .ypx-head.ypx-h-mb{ gap:10px }
  .ypx-wm{ font-size:17px }
}
/* =====================================================================
 * V59 — NUT THOAT (×) CUA O TIM KIEM, KHO DIEN THOAI
 * ---------------------------------------------------------------------
 * Nguoi dung bao: tren PC bam ok, tren mobile rat kho bam. Do @421px voi
 * markup that (yp_header.asp:103-118):
 *
 *     nut ×  (.ypx-sp-x)      34 x 34px
 *     nut menu (.ypx-mbtn)    42 x 42px      <- cai nguoi dung bao DE bam
 *     nguong WCAG 2.5.5       44 x 44px
 *     × nam dai               6 .. 40px tinh tu dinh tam
 *     o tim bat dau o         18px tinh tu dinh tam
 *     => × DE LEN GOC O TIM   22px
 *
 * Cai thu hai moi la ly do that. × la `position:absolute` nen ve DE LEN
 * TREN o nhap — 22px trong 34px cua no chong len goc phai o tim. Ngon tay
 * cham vao dai do khong biet dang bam cai nao: nham × thi truot vao o
 * nhap, nham o nhap thi lai dong mat hop thoai.
 *
 * Tren PC khong co ca hai loi vi luat goc la `right:-44px` — nut nam HAN
 * ngoai le trang ben phai. Chi khi xuong <=991, luat doi thanh
 * `right:0; top:-12px`, no moi chui vao trong tam va dam vao o tim.
 *
 * SUA: cho × mot DAI RIENG o dinh tam.
 *     .ypx-sp   padding-top  18 -> 58px
 *     .ypx-sp-x top -12 -> -52px · 34 -> 44px · chu 13 -> 15px
 *   Tinh lai: × nam 6..50px, o tim bat dau 58px => khe 8px, khong de.
 *   Tam cao them 40px (253 -> 293). Day la hop thoai, mo roi dong ngay;
 *   40px de duong ra co cho dung rieng la dang.
 *
 * Mau chu --ypx-muted -> --ypx-ink: nut thoat cua hop thoai la DUONG RA,
 * no phai tim thay duoc chu khong phai mo di.
 *
 * ⚠ KHONG nang nut menu 42 -> 44 o day. No dang o muc "con treo" voi ghi
 *   chu "se day cac phep do khac", va nguoi dung khong phan nan ve no.
 * ⚠ KHONG dong toi #xoakey / #xoawhere (hai dau × nho BEN TRONG o nhap).
 * ⚠ Dac hieu: cung (0,1,0) voi luat o @media dong 497. Nap sau => thang.
 * ===================================================================== */
@media screen and (max-width:991px){
  .ypx-sp{ padding-top:58px }
  .ypx-sp-x{
    top:-52px; right:0;
    width:44px; height:44px;
    font-size:15px;
    color:var(--ypx-ink, #171510);
  }
}