/* =====================================================================
 * yp_lgs2.css — TANG THAN TRANG cho ho `lgs` cua yellowpages.vn
 * Sinh bang may tu <style> cua YPVN_LGS_THIETKE_V16.html
 *   (md5 00f9285acd08bd3e797f6d35ab046d48) bang sinh_yplgs2.py — L3a, 2026-08-30.
 * KHONG SUA TAY TEP NAY. Sua ban mau roi sinh lai.
 *
 * BON PHEP BIEN DOI, moi phep mot cong trong sinh_yplgs2.py:
 *
 *  1. BO 62 quy tac thuoc phan da co tang khac lo:
 *       .top .srch .crumb      -> yp_header.asp + yp_header.css
 *       .az  .bar              -> yp_abc.asp + yp_cls2.css (.ypf-az-keys)
 *       .foot .lk              -> yp_footer.asp + yp_footer.css
 *       .bench .swb .cmp .ok .dev -> ban do tu kiem cua chinh ban mau
 *     ⚠ .mk va .crumb TUNG bi bo nham o ban dau — chung la THAN TRANG,
 *       nay da giu lai.
 *
 *  2. DOI TEN moi lop:  .x -> .ypl-x
 *     29/87 lop cua ban mau dai <= 2 ky tu (.a .b .h .k .q .s .v .w .on ...).
 *     ⚠ .on la bang chung: yp_header.css DA khai 4 bo chon .on va JS cua
 *       yp_header.asp bat/tat lop do 10 lan. Bao vay khong cuu duoc cho do
 *       vi menu dau trang cung nam trong body. Doi ten thi cuu duoc.
 *     Tien to `ypl-` da do: 0 lan xuat hien trong MOI tep cua du an.
 *
 *  3. BAO VAY: moi bo chon cap goc mang body[data-yp-kind="listing"].
 *     Cung khoa yp_cls2.css dung, da bat o L2a — khong them thuoc tinh moi.
 *     Bao vay xu ly luon .card: Bootstrap 5.2.3 cung co .card, ma
 *     (0,2,1) thang (0,1,0). lgs.asp hien dung .card cua Bootstrap 0 lan.
 *
 *  4. NEO HAI MAU ve tang token — 17/19 mau cua ban mau da khop chinh xac
 *     voi yp_tokens.css. Hai cai lech la hai cai V45 da doi:
 *        --yp-canvas #F4F3F1 -> var(--ypx-canvas, #FAF8F2)
 *        --yp-line   #E7E5E1 -> var(--ypx-line,   #EAE6DD)
 *     Neo roi thi chung khong the lech lai. 41 bien --yp-* con lai giu nguyen
 *     ten (khong dung voi --ypx-* cua tokens, cung khong dung voi --* cua
 *     yp_cls2.css — da do: giao nhau rong ca hai phia).
 *
 * ⚠ HAI KHAI BAO BI BO khoi moi quy tac:
 *     body{padding-bottom:170px} — cho thanh co dinh cua ban mau, khong dung
 *     *{box-sizing:border-box}   — Bootstrap dat roi, dat lai la thua
 *
 * ⚠ TEP NAY TRO NEN neu the body thieu data-yp-kind="listing" (bay 38),
 *   y het yp_cls2.css. Dat sai khoa thi ca hai tang cung cam.
 * ===================================================================== */

body[data-yp-kind="listing"]{
  --yp-brand:#FFDE06;
  --yp-brand-deep:#E9C900;
  --yp-brand-tint:#FFFBE8;
  --yp-canvas: var(--ypx-canvas, #FAF8F2);
  --yp-surface:#FFFFFF;
  --yp-line: var(--ypx-line, #EAE6DD);
  --yp-line-soft:#F0EFEB;
  --yp-ink:#171510;
  --yp-muted:#5B5851;
  --yp-faint:#807D74;
  --yp-action:#0E6B73;
  --yp-action-deep:#0A5157;
  --yp-action-tint:#E6F2F2;
  --yp-cta:#C2410C;
  --yp-cta-deep:#9A3412;
  --yp-cta-tint:#FCEDE6;
  --yp-verify:#15803D;
  --yp-verify-deep:#14602F;
  --yp-verify-tint:#EAF6EE;
  --yp-tier:#9A3412;
  --yp-r-card:8px;
  --yp-r-ctrl:6px;
  --yp-shell:1320px;
  --yp-content:1320px;
  --yp-prose:560px;
  --yp-pad:24px;
  --yp-gap:24px;
  --yp-col-gap:16px;
  --yp-rail-contact:330px;
  --t-h1:28px;
  --t-h2:24px;
  --t-read-1:16px;
  --t-read-2:15px;
  --t-scan-1:14px;
  --t-scan-2:13px;
  --t-h3:18px;
  --t-h3b:16px;
  --t-num:21px;
  --t-label:12px;
  --t-cap:12.5px;
  --lh-read:1.6;
  --lh-scan:1.45;
  --lh-head:1.3;
}
body[data-yp-kind="listing"]{
  margin:0;
  background:var(--yp-canvas);
  color:var(--yp-ink);
  font:400 var(--t-scan-1)/var(--lh-read) "Be Vietnam Pro",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body[data-yp-kind="listing"] .ypl-shell{
  max-width:var(--yp-content);
  margin-inline:auto;
  padding-inline:var(--yp-pad);
}
body[data-yp-kind="listing"] a{
  color:inherit;
  text-decoration:none;
}
body[data-yp-kind="listing"] .ypl-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:19px;
  line-height:1.15;
  flex:none;
  letter-spacing:-.02em;
  white-space:nowrap;
}
body[data-yp-kind="listing"] .ypl-logo i{
  flex:0 0 auto;
  width:30px;
  height:30px;
  background:var(--yp-brand);
  border-radius:var(--yp-r-ctrl);
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:17px;
  line-height:1;
  font-style:normal;
  color:var(--yp-ink);
}
body[data-yp-kind="listing"] .ypl-logo em{
  font-style:normal;
  font-weight:400;
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-crumb{
  font-size:var(--t-cap);
  color:var(--yp-muted);
  padding:15px 0 3px;
}
body[data-yp-kind="listing"] .ypl-crumb a:hover{
  color:var(--yp-action);
}
body[data-yp-kind="listing"] .ypl-crumb s{
  text-decoration:none;
  opacity:.45;
  margin:0 6px;
}
body[data-yp-kind="listing"] .ypl-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--yp-rail-contact);
  gap:var(--yp-gap) var(--yp-col-gap);
  align-items:start;
  padding:12px 0 64px;
}
body[data-yp-kind="listing"] .ypl-card{
  background:var(--yp-surface);
  border-radius:var(--yp-r-card);
  padding:22px;
  margin-bottom:var(--yp-gap);
}
body[data-yp-kind="listing"] h2{
  margin:0 0 16px;
  font-weight:700;
  font-size:var(--t-h2);
  line-height:var(--lh-head);
  letter-spacing:-.022em;
  text-transform:none;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--yp-ink);
}
body[data-yp-kind="listing"] h2 .ypl-ic-sm{
  flex:0 0 auto;
  width:20px;
  height:20px;
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] h2 em{
  font-style:normal;
  color:var(--yp-ink);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.11em;
}
body[data-yp-kind="listing"] h2 u{
  text-decoration:none;
  color:var(--yp-muted);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  font-size:var(--t-scan-1);
}
body[data-yp-kind="listing"] .ypl-hero{
  position:relative;
  padding-left:22px;
}
body[data-yp-kind="listing"] .ypl-hero::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:var(--yp-brand);
  border-radius:var(--yp-r-card) 0 0 10px;
}
body[data-yp-kind="listing"] .ypl-idt{
  display:flex;
  gap:20px;
}
body[data-yp-kind="listing"] .ypl-crest{
  width:96px;
  height:96px;
  flex:none;
  border:1px solid var(--yp-line);
  border-radius:var(--yp-r-card);
  background:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:var(--t-scan-2);
  line-height:1.3;
  color:var(--yp-muted);
  text-align:center;
  padding:8px;
}
body[data-yp-kind="listing"] h1{
  margin:0 0 12px;
  font-weight:700;
  font-size:var(--t-h1);
  line-height:var(--lh-head);
  letter-spacing:-.022em;
}
body[data-yp-kind="listing"] .ypl-rows{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:9px 12px;
  font-size:var(--t-scan-1);
  line-height:var(--lh-scan);
  align-items:baseline;
}
body[data-yp-kind="listing"] .ypl-rows i,
body[data-yp-kind="listing"] .ypl-rows .ypl-ic{
  font-style:normal;
  color:var(--yp-faint);
  width:16px;
  text-align:center;
  font-size:var(--t-scan-2);
}
body[data-yp-kind="listing"] .ypl-rows .ypl-ph{
  font-weight:700;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
body[data-yp-kind="listing"] .ypl-rows a{
  color:var(--yp-ink);
  font-weight:500;
  overflow-wrap:anywhere;
}
body[data-yp-kind="listing"] .ypl-rows a.ypl-w{
  color:var(--yp-action);
}
body[data-yp-kind="listing"] .ypl-rows a:hover{
  text-decoration:underline;
}
body[data-yp-kind="listing"] .ypl-zalo{
  font-weight:700;
  font-size:9px;
  line-height:1;
  background:#0068FF;
  color:#fff;
  padding:3px 5px;
  border-radius:3px;
  vertical-align:1px;
}
body[data-yp-kind="listing"] .ypl-cap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:1px;
  background:var(--yp-surface);
  border-radius:var(--yp-r-card);
  overflow:hidden;
  margin-top:20px;
}
body[data-yp-kind="listing"] .ypl-cap div{
  background:var(--yp-canvas);
  padding:13px 14px;
}
body[data-yp-kind="listing"] .ypl-cap span{
  display:block;
  font-weight:700;
  font-size:var(--t-label);
  line-height:1.1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--yp-muted);
  margin-bottom:7px;
}
body[data-yp-kind="listing"] .ypl-cap b{
  font-weight:600;
  font-size:var(--t-scan-1);
  line-height:1.4;
  display:block;
}
body[data-yp-kind="listing"] .ypl-cap em{
  font-style:normal;
  font-weight:400;
  color:var(--yp-muted);
  font-size:var(--t-cap);
  display:block;
  margin-top:2px;
}
body[data-yp-kind="listing"] .ypl-card.ypl-bare{
  background:none;
  border-radius:0;
  padding:0;
  margin-bottom:var(--yp-gap);
}
body[data-yp-kind="listing"] .ypl-card.ypl-bare .ypl-pill{
  background:var(--yp-surface);
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-card.ypl-bare .ypl-pill:hover{
  background:var(--yp-action-tint);
  color:var(--yp-action-deep);
}
body[data-yp-kind="listing"] .ypl-card.ypl-bare .ypl-faq{
  background:var(--yp-surface);
  border-radius:var(--yp-r-card);
  border-top:0;
  margin-bottom:8px;
  padding:0 18px;
}
body[data-yp-kind="listing"] .ypl-card.ypl-bare .ypl-faq summary{
  padding:15px 0;
}
body[data-yp-kind="listing"] .ypl-card.ypl-bare .ypl-faq .ypl-a{
  padding-bottom:16px;
}
body[data-yp-kind="listing"] .ypl-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:9px;
}
body[data-yp-kind="listing"] .ypl-shot{
  aspect-ratio:207/189;
  border:1px solid var(--yp-line);
  border-radius:var(--yp-r-card);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .3s;
}
body[data-yp-kind="listing"] .ypl-shot:hover{
  transform:translateY(-2px);
}
body[data-yp-kind="listing"] .ypl-shot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,#E9E9E6,#F7F7F5 55%,#E4E4E1);
}
body[data-yp-kind="listing"] .ypl-shot em{
  position:absolute;
  z-index:2;
  inset:auto 8px 7px;
  font-weight:500;
  font-size:var(--t-label);
  color:var(--yp-muted);
  font-style:normal;
}
body[data-yp-kind="listing"] .ypl-shot.ypl-more::after{
  background:#F0F0EE;
}
body[data-yp-kind="listing"] .ypl-shot.ypl-more em{
  inset:auto 0 47%;
  text-align:center;
  color:var(--yp-action);
  font-weight:600;
  font-size:var(--t-scan-2);
}
body[data-yp-kind="listing"] .ypl-tools{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:14px;
}
body[data-yp-kind="listing"] .ypl-tools input{
  flex:1;
  min-width:0;
  max-width:310px;
  border:1px solid var(--yp-line);
  border-radius:var(--yp-r-card);
  background:var(--yp-canvas);
  padding:10px 13px;
  font:var(--t-scan-1) "Be Vietnam Pro";
  outline:0;
}
body[data-yp-kind="listing"] .ypl-tools input::placeholder{
  color:var(--yp-muted);
  opacity:1;
}
body[data-yp-kind="listing"] .ypl-tools input:focus{
  border-color:var(--yp-action);
  background:#fff;
}
body[data-yp-kind="listing"] .ypl-tools span{
  font-size:var(--t-cap);
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-idx{
  columns:3;
  column-gap:22px;
  font-size:var(--t-scan-1);
  line-height:1.95;
  margin:0;
  padding:0;
  list-style:none;
}
body[data-yp-kind="listing"] .ypl-idx li{
  break-inside:avoid;
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-idx li::before{
  content:"▸ ";
  color:var(--yp-faint);
}
body[data-yp-kind="listing"] .ypl-idx li.ypl-hide{
  display:none;
}
body[data-yp-kind="listing"] .ypl-idx li.ypl-hit{
  font-weight:600;
  color:var(--yp-ink);
}
body[data-yp-kind="listing"] .ypl-idx li.ypl-hit::before{
  color:var(--yp-action);
}
body[data-yp-kind="listing"] .ypl-pill{
  display:inline-flex;
  font-weight:500;
  font-size:var(--t-scan-2);
  line-height:1;
  padding:9px 14px;
  border-radius:999px;
  margin:0 7px 8px 0;
  background:var(--yp-canvas);
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-pill:hover{
  background:var(--yp-action-tint);
  color:var(--yp-action-deep);
}
body[data-yp-kind="listing"] .ypl-quote{
  border-left:3px solid var(--yp-brand);
  padding:2px 0 2px 18px;
  max-width:100%;
}
body[data-yp-kind="listing"] .ypl-quote p{
  margin:0 0 12px;
  font-size:var(--t-read-2);
  line-height:var(--lh-read);
  max-width:var(--yp-prose);
}
body[data-yp-kind="listing"] .ypl-quote p:last-of-type{
  margin-bottom:0;
}
body[data-yp-kind="listing"] .ypl-quote b{
  font-weight:600;
}
body[data-yp-kind="listing"] .ypl-quote ul{
  margin:8px 0 14px;
  padding:0;
  list-style:none;
  max-width:620px;
}
body[data-yp-kind="listing"] .ypl-quote li{
  font-size:var(--t-read-2);
  line-height:1.62;
  padding-left:20px;
  position:relative;
  margin-bottom:6px;
}
body[data-yp-kind="listing"] .ypl-quote li::before{
  content:"●";
  position:absolute;
  left:2px;
  color:var(--yp-cta-deep);
  font-size:9px;
  top:6px;
}
body[data-yp-kind="listing"] .ypl-fold{
  margin-top:14px;
  font:600 var(--t-scan-1) "Be Vietnam Pro";
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color:var(--yp-ink);
  border-bottom:2px solid var(--yp-brand);
  font-size:var(--t-scan-1);
}
body[data-yp-kind="listing"] .ypl-src{
  font-size:var(--t-cap);
  color:var(--yp-muted);
  margin-top:16px;
  font-style:italic;
}
body[data-yp-kind="listing"] .ypl-dl{
  display:grid;
  grid-template-columns:minmax(120px,180px) minmax(0,1fr);
  gap:0 22px;
  max-width:720px;
  font-size:var(--t-scan-1);
}
@media (max-width:640px) {
  body[data-yp-kind="listing"] .ypl-dl{
    grid-template-columns:1fr;
  gap:0;
  }
  body[data-yp-kind="listing"] .ypl-dl dt{
    padding-bottom:2px;
  border-top:1px solid var(--yp-line-soft);
  }
  body[data-yp-kind="listing"] .ypl-dl dd{
    padding-top:0;
  border-top:0;
  }
  body[data-yp-kind="listing"] .ypl-dl dt:first-of-type{
    border-top:0;
  }
}
body[data-yp-kind="listing"] .ypl-dl dt{
  color:var(--yp-muted);
  font-weight:700;
  font-size:var(--t-label);
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:12px 0;
  border-top:1px solid var(--yp-line-soft);
}
body[data-yp-kind="listing"] .ypl-dl dd{
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--yp-line-soft);
  font-variant-numeric:tabular-nums;
  line-height:var(--lh-scan);
}
body[data-yp-kind="listing"] .ypl-dl dt:first-of-type,
body[data-yp-kind="listing"] .ypl-dl dd:first-of-type{
  border-top:0;
}
body[data-yp-kind="listing"] .ypl-faq{
  border-top:1px solid var(--yp-line-soft);
}
body[data-yp-kind="listing"] .ypl-faq:first-of-type{
  border-top:0;
}
body[data-yp-kind="listing"] .ypl-faq summary{
  list-style:none;
  cursor:pointer;
  padding:14px 0;
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:var(--t-h3b);
  font-weight:600;
  line-height:var(--lh-head);
}
body[data-yp-kind="listing"] .ypl-faq summary::-webkit-details-marker{
  display:none;
}
body[data-yp-kind="listing"] .ypl-faq summary::after{
  content:"+";
  margin-left:auto;
  color:var(--yp-action);
  font-weight:400;
  font-size:19px;
  line-height:1.1;
}
body[data-yp-kind="listing"] .ypl-faq[open] summary::after{
  content:"–";
}
body[data-yp-kind="listing"] .ypl-faq[open] summary{
  color:var(--yp-action);
}
body[data-yp-kind="listing"] .ypl-faq .ypl-a{
  padding:0 0 16px 0;
  font-size:var(--t-read-2);
  line-height:var(--lh-read);
  color:var(--yp-muted);
  max-width:var(--yp-prose);
}
body[data-yp-kind="listing"] .ypl-faq .ypl-a a{
  color:var(--yp-action);
  font-weight:600;
}
body[data-yp-kind="listing"] .ypl-faq .ypl-fld{
  margin-top:10px;
  font-weight:400;
  font-size:var(--t-label);
  color:var(--yp-muted);
  letter-spacing:.03em;
}
body[data-yp-kind="listing"] aside{
  position:sticky;
  top:16px;
}
body[data-yp-kind="listing"] .ypl-tool>header em{
  font-style:normal;
  color:var(--yp-ink);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.09em;
}
body[data-yp-kind="listing"] .ypl-tool .ypl-b{
  padding:18px 17px;
}
body[data-yp-kind="listing"] .ypl-who{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:11px;
  align-items:center;
  margin-bottom:15px;
}
body[data-yp-kind="listing"] .ypl-who .ypl-av{
  width:40px;
  height:40px;
  border-radius:var(--yp-r-card);
  background:var(--yp-canvas);
  border:1px solid var(--yp-line);
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:var(--t-scan-2);
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-who b{
  display:block;
  font-size:var(--t-scan-1);
  font-weight:600;
}
body[data-yp-kind="listing"] .ypl-who span{
  font-size:var(--t-cap);
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-primary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--yp-brand);
  color:var(--yp-ink);
  font:700 var(--t-num) "Be Vietnam Pro";
  padding:14px;
  border-radius:var(--yp-r-card);
  margin-bottom:8px;
  font-variant-numeric:tabular-nums;
  transition:transform .15s;
}
body[data-yp-kind="listing"] .ypl-primary:hover{
  transform:translateY(-1px);
}
body[data-yp-kind="listing"] .ypl-ch{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border-radius:var(--yp-r-card);
  margin-bottom:8px;
  background:var(--yp-canvas);
}
body[data-yp-kind="listing"] .ypl-ch:hover{
  background:var(--yp-action-tint);
}
body[data-yp-kind="listing"] .ypl-ch i,
body[data-yp-kind="listing"] .ypl-ch .ypl-ic{
  font-style:normal;
  color:var(--yp-faint);
  width:15px;
  text-align:center;
  font-size:var(--t-scan-2);
}
body[data-yp-kind="listing"] .ypl-ch s{
  display:block;
  text-decoration:none;
  font-weight:700;
  font-size:var(--t-label);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-ch b{
  display:block;
  font-weight:600;
  font-size:var(--t-scan-1);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
body[data-yp-kind="listing"] .ypl-sell{
  border-top:4px solid var(--yp-brand);
  border-radius:var(--yp-r-card);
  padding:20px;
  background:#fff;
}
body[data-yp-kind="listing"] .ypl-sell .ypl-free{
  display:inline-flex;
  align-items:center;
  background:var(--yp-brand-tint);
  color:var(--yp-ink);
  font-weight:700;
  font-size:var(--t-label);
  line-height:1;
  padding:7px 14px;
  border-radius:20px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:12px;
}
body[data-yp-kind="listing"] .ypl-sell h4{
  margin:0 0 8px;
  font-weight:700;
  font-size:var(--t-h3);
  line-height:var(--lh-head);
  letter-spacing:-.014em;
}
body[data-yp-kind="listing"] .ypl-sell p{
  margin:0 0 14px;
  font-size:var(--t-scan-2);
  color:var(--yp-muted);
  line-height:1.6;
}
body[data-yp-kind="listing"] .ypl-sell ul{
  margin:0 0 14px;
  padding:0;
}
body[data-yp-kind="listing"] .ypl-sell li{
  list-style:none;
  font-size:var(--t-scan-2);
  margin-bottom:8px;
  padding-left:19px;
  position:relative;
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-sell li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--yp-action);
  font-weight:700;
}
body[data-yp-kind="listing"] .ypl-sell .ypl-cta{
  display:block;
  text-align:center;
  background:var(--yp-cta);
  color:#fff;
  font-weight:600;
  font-size:var(--t-scan-1);
  padding:13px;
  border-radius:var(--yp-r-card);
}
@media (max-width:1259px) {
  body[data-yp-kind="listing"] .ypl-idx{
    columns:3;
  }
}
@media (max-width:991px) {
  body[data-yp-kind="listing"] .ypl-idx{
    columns:2;
  }
}
@media (max-width:1100px) {
  body[data-yp-kind="listing"] .ypl-idx{
    columns:2;
  }
}
@media (max-width:991px) {
  body[data-yp-kind="listing"] .ypl-wrap{
    grid-template-columns:1fr;
  }
  body[data-yp-kind="listing"] aside{
    position:static;
  }
  body[data-yp-kind="listing"] .ypl-strip{
    grid-template-columns:repeat(3,1fr);
  }
  body[data-yp-kind="listing"] .ypl-idx{
    columns:2;
  }
  body[data-yp-kind="listing"] h1{
    font-size:21px;
  }
  body[data-yp-kind="listing"] .ypl-idt{
    flex-direction:column;
  }
  body[data-yp-kind="listing"] .ypl-cap{
    grid-template-columns:1fr 1fr;
  }
  body[data-yp-kind="listing"] .ypl-hero{
    padding-left:16px;
  }
}
@media print {
  body[data-yp-kind="listing"] .ypl-wrap{
    grid-template-columns:1fr;
  }
  body[data-yp-kind="listing"]{
    background:#fff;
  }
}
@media (prefers-reduced-motion:reduce) {
  body[data-yp-kind="listing"] *{
    transition:none!important;
  }
}
body[data-yp-kind="listing"] .ypl-tool{
  border-top:4px solid var(--yp-brand);
  border-radius:var(--yp-r-card);
  background:#fff;
  overflow:hidden;
  margin-bottom:var(--yp-gap);
}
body[data-yp-kind="listing"] .ypl-tool>header{
  padding:16px 17px 0;
  border:0;
  background:#fff;
}
body[data-yp-kind="listing"] .ypl-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--yp-brand-tint);
  color:var(--yp-ink);
  border-radius:999px;
  padding:7px 14px;
  font-weight:700;
  font-size:var(--t-label);
  line-height:1;
  letter-spacing:.09em;
  text-transform:uppercase;
}
body[data-yp-kind="listing"] .ypl-chip .ypl-ic{
  width:15px;
  height:15px;
  color:var(--yp-ink);
}
body[data-yp-kind="listing"] .ypl-sec{
  padding:17px;
}
body[data-yp-kind="listing"] .ypl-sec+.ypl-sec{
  border-top:1px solid var(--yp-line-soft);
}
body[data-yp-kind="listing"] .ypl-sec>span.ypl-h{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:var(--t-label);
  line-height:1;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--yp-ink);
  margin-bottom:14px;
}
body[data-yp-kind="listing"] .ypl-sec>span.ypl-h .ypl-ic{
  color:var(--yp-ink);
  width:15px;
  height:15px;
}
body[data-yp-kind="listing"] .ypl-sec>span.ypl-h u{
  text-decoration:none;
  margin-left:auto;
  background:#F1F1EE;
  color:var(--yp-muted);
  border-radius:999px;
  padding:3px 9px;
  font-size:var(--t-label);
  letter-spacing:.02em;
  font-weight:600;
}
body[data-yp-kind="listing"] .ypl-pr{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:11px;
  padding:11px 12px;
  border-radius:var(--yp-r-card);
  margin:0 -12px;
}
body[data-yp-kind="listing"] .ypl-pr.ypl-p1{
  background:#FAFAF8;
  box-shadow:inset 3px 0 0 var(--yp-brand);
}
body[data-yp-kind="listing"] .ypl-pr+.ypl-pr{
  margin-top:8px;
}
body[data-yp-kind="listing"] .ypl-pr .ypl-av{
  width:38px;
  height:38px;
  border-radius:var(--yp-r-card);
  background:#F4F4F1;
  border:1px solid var(--yp-line);
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:var(--t-label);
  color:var(--yp-muted);
  letter-spacing:.01em;
}
body[data-yp-kind="listing"] .ypl-pr .ypl-nm{
  font-weight:600;
  font-size:15px;
  line-height:1.3;
  display:block;
}
body[data-yp-kind="listing"] .ypl-pr .ypl-rl{
  font-size:var(--t-cap);
  color:var(--yp-muted);
  display:block;
  margin-top:1px;
}
body[data-yp-kind="listing"] .ypl-pr .ypl-ln{
  grid-column:2;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}
body[data-yp-kind="listing"] .ypl-telrow{
  display:flex;
  align-items:center;
  gap:9px;
  padding:3px 0;
  transition:opacity .15s;
}
body[data-yp-kind="listing"] .ypl-telrow .ypl-ic{
  color:#9AA0A8;
  width:17px;
  height:17px;
}
body[data-yp-kind="listing"] .ypl-telrow b{
  font-weight:700;
  font-size:var(--t-num);
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.012em;
}
body[data-yp-kind="listing"] .ypl-telrow:hover{
  opacity:.66;
}
body[data-yp-kind="listing"] .ypl-telrow:hover b{
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
body[data-yp-kind="listing"] .ypl-telrow.ypl-sm b{
  font-size:var(--t-h3b);
}
body[data-yp-kind="listing"] .ypl-lnrow{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:var(--t-scan-1);
  padding:2px 0;
  line-height:var(--lh-scan);
}
body[data-yp-kind="listing"] .ypl-lnrow .ypl-ic{
  color:#A8AEB6;
  width:16px;
  height:16px;
  margin-top:1px;
}
body[data-yp-kind="listing"] .ypl-lnrow b{
  font-weight:500;
  word-break:break-word;
  overflow-wrap:anywhere;
}
body[data-yp-kind="listing"] .ypl-lnrow.ypl-w b{
  color:var(--yp-action);
  font-weight:600;
}
body[data-yp-kind="listing"] .ypl-lnrow:hover b{
  text-decoration:underline;
  color:var(--yp-action-deep);
}
body[data-yp-kind="listing"] .ypl-qr{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:var(--t-scan-2);
  padding:7px 0;
  border-top:1px solid #F1F1EE;
}
body[data-yp-kind="listing"] .ypl-qr:first-of-type{
  border-top:0;
  padding-top:0;
}
body[data-yp-kind="listing"] .ypl-qr s{
  text-decoration:none;
  color:var(--yp-muted);
}
body[data-yp-kind="listing"] .ypl-qr b{
  font-weight:700;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
body[data-yp-kind="listing"] .ypl-ic{
  width:18px;
  height:18px;
  flex:none;
  display:block;
}
body[data-yp-kind="listing"] .ypl-ic-sm{
  width:15px;
  height:15px;
}
body[data-yp-kind="listing"] .ypl-ic-gem{
  width:16px;
  height:14.5px;
  color:var(--yp-tier);
}
body[data-yp-kind="listing"] .ypl-marks{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:15px;
}
body[data-yp-kind="listing"] .ypl-gems{
  display:flex;
  align-items:center;
  gap:3px;
}
body[data-yp-kind="listing"] .ypl-mk{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 12px;
  font-weight:700;
  font-size:var(--t-label);
  line-height:1.1;
  border:1px solid;
}
body[data-yp-kind="listing"] .ypl-mk .ypl-ic{
  width:14px;
  height:14px;
}
body[data-yp-kind="listing"] .ypl-mk.ypl-s{
  background:#FDF1E9;
  border-color:#F6DCC9;
  color:#C2410C;
}
body[data-yp-kind="listing"] .ypl-mk.ypl-v{
  background:var(--yp-action-tint);
  border-color:#CDE3D9;
  color:var(--yp-verify);
}
body[data-yp-kind="listing"] .ypl-mk .ypl-q{
  width:15px;
  height:15px;
  flex:none;
  color:var(--yp-verify);
  opacity:.7;
}
body[data-yp-kind="listing"] .ypl-mk small{
  font-weight:500;
  font-size:11px;
  opacity:.8;
  letter-spacing:.01em;
}

/* ── BO SUNG: cho ANH THAT (ban mau khong co the img nao) ──────────── */
body[data-yp-kind="listing"] .ypl-wrap{
  --ypl-chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
body[data-yp-kind="listing"] .ypl-crest img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}
body[data-yp-kind="listing"] .ypl-shot img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:contain;
  background:var(--yp-surface); display:block;
}
body[data-yp-kind="listing"] .ypl-shot.ypl-empty::after{
  background:var(--yp-canvas);
}

/* ── BO SUNG (P1a): TEN SAN PHAM — MOT DONG, cat bang dau ba cham ────
   Do tren trang that: ten dai 44 ky tu, o rong 126,5px, chu 12px
   => 4 dong, cao 57,6px tren o cao 115,5px = CHE NUA ANH.
   Ban mau ve voi ten 15 ky tu nen khong lo. Ep mot dong + nen mo. */
body[data-yp-kind="listing"] .ypl-shot em{
  inset:auto 0 0;
  padding:5px 8px 6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:linear-gradient(to top,rgba(255,255,255,.96),rgba(255,255,255,.86));
  color:var(--yp-ink);
}

/* ── BO SUNG (P1a): NUT XEM NHIEU — TU no la nut ─────────────────────
   Do duoc: hop <a> rong 0px, nut ben trong tran ra roi bi overflow:hidden
   cat. Nguyen nhan: markup cu la <a> boc <button>, ma <a> KHONG duoc chua
   noi dung tuong tac. Nay bo <button>: dat dang nut thang len <a>.
   ⚠ Cung bo luon id yp_bgffde06 — id do xuat hien HAI lan trong trang
     (mot o anh thu 6, mot o o trong). Mau vang chuyen ve day. */
body[data-yp-kind="listing"] .ypl-shot .ypl-more-a{
  position:absolute; z-index:3; right:8px; bottom:8px;
  max-width:calc(100% - 16px);
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px;
  border-radius:var(--yp-r-ctrl,6px);
  background:var(--yp-brand);
  color:var(--yp-ink);
  font-weight:600; font-size:var(--t-label); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
body[data-yp-kind="listing"] .ypl-shot .ypl-more-a:hover{
  background:var(--yp-brand-deep); color:var(--yp-ink);
}
body[data-yp-kind="listing"] .ypl-shot.ypl-empty .ypl-more-a{
  right:auto; bottom:auto; left:50%; top:50%;
  transform:translate(-50%,-50%);
}

/* ── BO SUNG (P1b): NUT va TEN cung o day o -> CHONG NHAU ────────────
   Do tren anh chup sau P1a: o thu 6 co ca ten san pham (inset auto 0 0,
   tran het be ngang) lan nut XEM NHIEU (right 8, bottom 8). Nut de len
   duoi ten. Nam o kia khong co nut nen khong lo.
   Chua bang :has() — chi o NAO co nut moi chua cho. Du an da dung :has()
   6 lan trong yp_cls2.css nen day khong phai ky thuat moi.
   ⚠ Trinh duyet khong ho tro :has() se ve nhu truoc (nut de len ten),
     khong vo bo cuc. Do la suy giam nhe co chu dich. */
body[data-yp-kind="listing"] .ypl-shot:has(.ypl-more-a) em{
  padding-right:132px;
}
body[data-yp-kind="listing"] .ypl-shot.ypl-empty:has(.ypl-more-a) em{
  padding-right:8px;
}

/* ── BO SUNG (P3): ANH trong o tron 40px/38px cua cot cong cu ────────
   .ypl-av la o co dinh 40x40 (hoac 38x38) danh cho CHU VIET TAT — ban mau
   khong co the img nao. Anh that tran ra ngoai va de len ten doanh nghiep;
   do duoc tren anh chup sau P2b. Cung mot nguyen nhan voi .ypl-crest. */
body[data-yp-kind="listing"] .ypl-av img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

/* ── BO SUNG (P3): FAQ — bo giao dien mac dinh cua the details ──────
   .ypl-faq da co CSS trong ban mau, nhung dau tam giac mac dinh cua trinh
   duyet van hien. Thay bang dau +/- ben phai nhu ban mau ve. */
body[data-yp-kind="listing"] .ypl-faq summary::-webkit-details-marker{
  display:none;
}
body[data-yp-kind="listing"] .ypl-faq summary{
  list-style:none;
}

/* ── BO SUNG (P6): VIEN cho moi the ────────────────────────────────
   Ban mau ve the trang tren nen trang-nga MA KHONG CO VIEN — tren man
   that hai mau qua gan nhau (surface #FFFFFF vs canvas #FAF8F2, cach
   nhau L 0,021) nen KHONG THAY MEP THE. Vach vang cua hero vi the trong
   nhu lo lung. Nguoi dung chi ra khoi quang cao ben cls co vien va de
   nhin hon — dung.
   ⚠ Vien lay --yp-line (= var(--ypx-line) qua neo o phan 4). */
body[data-yp-kind="listing"] .ypl-card{
  border:1px solid var(--yp-line);
}
body[data-yp-kind="listing"] .ypl-card.ypl-bare{
  border:0;
}
body[data-yp-kind="listing"] .ypl-card.ypl-bare .ypl-faq{
  border:1px solid var(--yp-line);
}
body[data-yp-kind="listing"] .ypl-tool{
  border:1px solid var(--yp-line);
  border-top:4px solid var(--yp-brand);
}
/* ── VACH VANG HERO: bo ::before, dung border-left CUA CHINH THE ────
   ::before la mot hop tuyet doi rieng: no KHONG theo border-radius cua
   the, phai tu bo goc, va chi lech mot pixel la ho khe sang hoac tran ra
   ngoai. Da thu keo -1px, van khong chac.
   border-left cua chinh the thi LUON bo theo border-radius — khong the
   tran, khong the lech. Doi lai mat kha nang cho vach mau khac vien,
   nhung o day hai thu la mot. */
body[data-yp-kind="listing"] .ypl-hero::before{
  content:none;
}
/* ⚠ P19 — VACH VANG cho MOI khoi co vo, khong rieng khoi nhan dien.
   Do tren trang: 7 khoi cot trai = 1 hero + 4 khoi co vo + 2 khoi tran
   (thu vien anh, FAQ). Vach vang chi o hero khien no la diem nhan duy
   nhat, con bon khoi kia troi noi khong co neo thi giac.
   -> :not(.ypl-bare) — hai khoi tran GIU NGUYEN: thu vien anh tu la khoi
      hinh, va FAQ da co vien rieng cho tung cau hoi. Them vach cho chung
      la vach vang tren nen trong suot, khong neo vao dau. */
/* ⚠ P21 — 4px -> 3px. Vach 4px at khoi noi dung ben canh, nhat la o
   khoi Gioi thieu von da khong con vach trong (P19). Chi doi BE DAY:
   khong doi mau, khong doi vi tri, khong dung toi ba nap border-top. */
body[data-yp-kind="listing"] .ypl-card:not(.ypl-bare){
  border-left:3px solid var(--yp-brand);
}

/* ⚠ P19 — KHOI GIOI THIEU: bo vach vang BEN TRONG.
   .ypl-quote co border-left 3px vang + padding-left 18px. Khi ca the DA
   co vach vang o ngoai thi thanh HAI vach song song cach nhau 22px, va
   chu bi thut vao 18px so voi tieu de h2 ngay tren no.
   -> bo vach trong, keo chu ve thang le voi tieu de. */
body[data-yp-kind="listing"] .ypl-quote{
  border-left:0;
  padding-left:0;
}
/* ⚠ KHONG dat padding-left o day: ban goc co padding-left 22px va mot
   nhanh @media ha xuong 16px. Dat lai o phan bo sung (khong media) se
   de len CA HAI, va man hep mat 6px chuan. border-left cong THEM vao
   ngoai padding nen khong can bu. */

/* ── O LUOI BEN TRAI KHONG DUOC CO VO ────────────────────────────────
   Nguoi dung thay ca cot trai nhu nam trong MOT khung. O luoi la the div
   tran, dang le khong co nen/vien/dem nao — nhung neu mot tang khac
   (Bootstrap, css_lgs) cham vao no thi se sinh vo. Khang dinh o day. */
body[data-yp-kind="listing"] .ypl-wrap>div{
  background:none;
  border:0;
  padding:0;
  box-shadow:none;
}

/* ── MOI KHOI PHAI TACH ROI ──────────────────────────────────────────
   .ypl-card da co margin-bottom, nhung .ypl-bare (thu vien anh, nganh
   nghe, FAQ) khong co margin-top — hai khoi ke nhau co the dinh sat.
   Neo bang VI TRI de khong phu thuoc thu tu cac muc. */
body[data-yp-kind="listing"] .ypl-wrap>div>.ypl-card+.ypl-card{
  margin-top:var(--yp-gap);
}

/* ═══ P9 · THIET KE LAI DAI ANH SAN PHAM — chuan danh ba B2B ═════════
 * BON KHUYET TAT do duoc tren trang that:
 *
 *  1. object-fit:contain voi anh DOC => anh chi chiem ~55% be ngang o,
 *     hai ben trong lon. Luoi mat nhip, khong "chac".
 *     -> cover. Danh ba B2B (Alibaba, Europages, ThomasNet) deu dung cover
 *        cho luoi thumbnail: nhip deu quan trong hon giu tron khung anh,
 *        vi nguoi mua LUOT truoc roi moi BAM xem to.
 *     -> bam vao van mo lightbox o kich thuoc that, nen khong mat thong tin.
 *
 *  2. Ten san pham dat tren nen TRANG MO, chu den: tren anh sang thi chim,
 *     tren anh toi thi cham. Khong on dinh qua moi buc anh.
 *     -> nen chuyen sac DEN mo tu duoi len, chu TRANG. Doc duoc tren MOI anh.
 *        Day la nep chung cua moi luoi anh co chu de.
 *
 *  3. Nut XEM NHIEU DE len anh thu 6: o do khac han 5 o kia (mat can doi),
 *     va an mat ten san pham cua chinh no — tren anh chup chi con "N...".
 *     -> nut chuyen len canh TIEU DE muc. Khong o nao bi che, khong mat anh.
 *
 *  4. Day la muc DUY NHAT khong co tieu de h2 — mat nhip voi 6 khoi kia.
 *     -> them h2, va cho phep mot lien ket neo ben phai tieu de.
 *
 * ⚠ Anh SAN PHAM cong nghiep thuong co nhan/chu. cover cat mep tren-duoi
 *   nhieu nhat 9% (aspect 207/189 vs anh vuong) — chap nhan duoc, va bam
 *   vao van xem duoc ban day du.
 * ═══════════════════════════════════════════════════════════════════ */
body[data-yp-kind="listing"] .ypl-shot img{
  object-fit:cover;
  transition:transform .35s ease;
}
body[data-yp-kind="listing"] .ypl-shot:hover img{
  transform:scale(1.05);
}
body[data-yp-kind="listing"] .ypl-shot{
  box-shadow:0 1px 2px rgba(23,21,16,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body[data-yp-kind="listing"] .ypl-shot:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px -12px rgba(23,21,16,.45);
  border-color:var(--yp-action);
}
/* nhan ten: nen chuyen sac den mo, chu trang — doc duoc tren MOI anh */
body[data-yp-kind="listing"] .ypl-shot em{
  inset:auto 0 0;
  padding:16px 10px 8px;
  background:linear-gradient(to top,rgba(12,11,9,.82) 0%,rgba(12,11,9,.62) 55%,rgba(12,11,9,0) 100%);
  color:#fff;
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:10px;
}
/* nut XEM NHIEU khong con nam trong o anh — bo phan chua cho */
body[data-yp-kind="listing"] .ypl-shot:has(.ypl-more-a) em{
  padding-right:10px;
}

/* lien ket neo ben phai tieu de muc */
body[data-yp-kind="listing"] h2 .ypl-h2a{
  margin-left:auto;
  font-size:var(--t-scan-2);
  font-weight:600;
  letter-spacing:0;
  color:var(--yp-action);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
body[data-yp-kind="listing"] h2 .ypl-h2a:hover{
  color:var(--yp-action-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}
/* o trong lap day: giu nut o giua, nhung lam nhe di */
body[data-yp-kind="listing"] .ypl-shot.ypl-empty{
  box-shadow:none;
  border-style:dashed;
}
/* ═══ P12 · NGANH NGHE · HUY HIEU · DAI 5 O ════════════════
 * 1. MUI CHI cuoi vien nganh nghe hien ra la CHU "A".
 *    Nguyen nhan: content:"\203A" — Python doc \203 la so BAT PHAN roi
 *    ghi ra byte 0x83, con "A" con lai nguyen. Do duoc bang cach doc byte
 *    that cua tep sinh ra: content:"\x83A".
 *    -> KHONG dung escape nua. Ve bang SVG mask, y nhu yp_dangky.css ve dau
 *       kiem. Khong phu thuoc phong, khong co lop escape nao de sai.
 *
 * 2. DAI 5 O: hien la mot bang lien, ke bang gap 1px. Nguoi dung muon nam
 *    THE ROI co bieu tuong, nhu ban cls. -> gap that, bo goc, va cho phep
 *    mot bieu tuong dung truoc nhan. Co chu nhan ha 1px.
 *
 * 3. HUY HIEU: nen cua "Xac thuc" dang la --yp-action-tint (TEAL nhat) ma
 *    chu lai --yp-verify (XANH LA). Hai vai mau danh nhau tren cung mot vien.
 *    yp_tokens.css ghi ro vai: "xanh la = su that mien phi / xac thuc".
 *    -> nen ve --yp-verify-tint. Mot vai, mot mau.
 * ════════════════════════════════════════════════════════════════════ */
body[data-yp-kind="listing"] .ypl-card .ypl-pill{
  align-items:center;
  gap:9px;
  background:var(--yp-canvas);
  border:1px solid var(--yp-line);
  color:var(--yp-ink);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
body[data-yp-kind="listing"] .ypl-card .ypl-pill::after{
  content:"";
  width:7px;
  height:12px;
  flex:0 0 auto;
  background:var(--yp-faint);
  -webkit-mask:var(--ypl-chev) center/7px 12px no-repeat;
          mask:var(--ypl-chev) center/7px 12px no-repeat;
  transition:background .18s ease, transform .18s ease;
}
body[data-yp-kind="listing"] .ypl-card .ypl-pill:hover{
  background:var(--yp-surface);
  border-color:var(--yp-action);
  color:var(--yp-action-deep);
}
body[data-yp-kind="listing"] .ypl-card .ypl-pill:hover::after{
  background:var(--yp-action);
  transform:translateX(2px);
}

/* ── DAI 5 O: the roi, co bieu tuong, BE NGANG KHONG DEU ────────────
   Do tren trang that: nam o chia deu nhau, nhung noi dung khong deu —
   "2003" va "Toan Quoc" chi mot dong, con "Khach hang co nhu cau mua so
   luong lon" phai be lam ba dong trong khi hai o kia bo trong mot nua.
   -> doi tu grid deu sang FLEX co ba muc be ngang:
        mac dinh   flex-basis 160px
        hep (.ypl-c-sm)  146px   — Thanh lap · Ma so thue: noi dung ngan,
                                   luon mot dong, khong can rong
        rong (.ypl-c-lg) 220px + flex-grow 1.6 — Khach hang chinh: nhan
                                   phan du cua hai o hep
   Bang so: 5 o, khe 10px, cot 926px  =>  deu la 177px moi o.
            Sau khi doi: hai o hep 163px · ba o thuong 177px · o rong 212px.
   ⚠ Flex chu KHONG phai grid: so o thay doi theo du lieu (moi o co gac
     rieng), ma grid-template-columns co dinh thi 3 o se ra 3 cot rong het
     mot nua. Flex tu co gian theo so o thuc te. */
body[data-yp-kind="listing"] .ypl-cap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  background:none;
  border:0;
}
body[data-yp-kind="listing"] .ypl-cap>div{
  flex:1 1 160px;
  min-width:0;
  background:var(--yp-canvas);
  border:1px solid var(--yp-line);
  border-radius:var(--yp-r-card,10px);
  padding:11px 13px 12px;
}
body[data-yp-kind="listing"] .ypl-cap>.ypl-c-sm{
  flex:0.9 1 146px;
}
body[data-yp-kind="listing"] .ypl-cap>.ypl-c-lg{
  flex:1.6 1 220px;
}
body[data-yp-kind="listing"] .ypl-cap span{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--yp-tier,#9A6B2F);
  margin-bottom:5px;
}
body[data-yp-kind="listing"] .ypl-cap span i{
  font-size:11px;
  width:12px;
  text-align:center;
  opacity:.9;
}
body[data-yp-kind="listing"] .ypl-cap b{
  font-size:var(--t-scan-2);
  line-height:1.45;
}

/* ═══ P18 · BO DAM O BA CHO · CAN LAI HAI SO DIEN THOAI ═════════════
 * 1. Dai 5 o: gia tri dang <b> 600. Nhan muc DA la chu in hoa mau nau
 *    vang — do la thu phan tang. Gia tri dam THEM lan nua thi ca dai
 *    thanh mot khoi dam, khong con lop nao noi hon lop nao.
 *    -> 400. Va them 6px khoang cach tren cho dai tach khoi hang website.
 *
 * 2. Hang lien ket (Kenh chung + email nguoi phu trach): b 500 -> 400.
 *    Email va dia chi web la DU LIEU de doc, khong phai tieu de.
 *    ⚠ Giu 600 cho .ypl-w (dia chi web) — no la lien ket ra ngoai, can
 *      mot bac phan biet voi email.  KHONG — nguoi dung noi ca hai.
 *      -> ca hai ve 400, mau teal cua .ypl-w da du de phan biet.
 *
 * 3. Hai so dien thoai dang lech bac: co dinh 15px, di dong 17px. Ca hai
 *    deu la so de goi; lech bac ngu y so nay quan trong hon so kia, ma
 *    dieu do khong dung — tuy nguoi goi. Can lai o 15px.
 * ═══════════════════════════════════════════════════════════════════ */
/* ⚠ SUA LOI CUA CHINH TOI: ban mau co margin-top:20px. Toi doc "tang
   khoang cach len 6 pixel" thanh "dat bang 6px" va GHI DE, tuc GIAM 14px
   — nguoc han y nguoi dung. Va toi da khong DO gia tri dang co truoc khi
   ghi de, dung cai bay so mot cua du an.
   Dung phai la  20 + 8 = 28px.  Boi cua 4 nen giu nhip cua he. */
body[data-yp-kind="listing"] .ypl-cap{
  margin-top:28px;
}
body[data-yp-kind="listing"] .ypl-cap b{
  font-weight:400;
}
body[data-yp-kind="listing"] .ypl-lnrow b,
body[data-yp-kind="listing"] .ypl-lnrow.ypl-w b{
  font-weight:400;
}
/* ═══ P17 · COT CONG CU: ha thang chu ═══════════════════════════════
 * Do tren trang that: cot rong 330px ma so dien thoai 20px, ten nguoi
 * phu trach 15px, ten doanh nghiep 14px x 3 dong. Ca cot cao hon ca khoi
 * nhan dien ben trai — mat bi keo sang phai truoc khi kip doc ten cong ty.
 * Cot nay la CONG CU TRA CUU, khong phai tieu diem. Ha mot bac:
 *      ten doanh nghiep   14   -> 13     (3 dong -> van 3 dong nhung gon)
 *      ten nguoi phu trach 15  -> 14
 *      so di dong         20   -> 17
 *      so co dinh         16   -> 15
 *      hang lien ket      14   -> 13
 *      thong tin nhanh    13   -> 12,5
 * Van tren nguong doc duoc (12,5px la --t-cap, dang dung cho chu thich
 * anh va vai muc khac). Khong ha nhan muc (--t-label 12px) vi chung da
 * o day thang.
 * ═══════════════════════════════════════════════════════════════════ */
body[data-yp-kind="listing"] .ypl-who b{
  font-size:var(--t-scan-2);
}
body[data-yp-kind="listing"] .ypl-pr .ypl-nm{
  font-size:var(--t-scan-1);
}
/* ⚠ P18: hai so dien thoai CAN BANG o 15px. Truoc do so di dong 17px,
   so co dinh 15px — lech bac ngu y so nay quan trong hon so kia, ma dieu
   do khong dung: tuy nguoi goi. Sua TAI DAY chu khong chong them quy tac
   moi o duoi, vi khoi P18 nam TRUOC khoi nay nen se thua. */
body[data-yp-kind="listing"] .ypl-telrow b,
body[data-yp-kind="listing"] .ypl-telrow.ypl-sm b{
  font-size:15px;
}
body[data-yp-kind="listing"] .ypl-lnrow{
  font-size:var(--t-scan-2);
}
body[data-yp-kind="listing"] .ypl-qr{
  font-size:var(--t-cap);
}

/* ═══ P16 · DAI ANH: o anh la LIEN KET, khong con lightbox ══════════
 * Nguoi dung bo chuc nang bam-mo-anh (dang loi: lop phu den khong dong
 * duoc). Nhung de o anh TRO HOAN TOAN thi hai tin hieu con lai — con tro
 * ban tay va hieu ung nhac o len khi re chuot — hoa ra noi doi: mat bao
 * "bam duoc" ma bam khong co gi.
 * -> moi o thanh mot LIEN KET sang trang anh day du. Giu nguyen hieu ung,
 *    va lan nay tin hieu la that.
 * ⚠ The a la inline; .ypl-shot can aspect-ratio + position:relative nen
 *   phai ep display:block, neu khong ca luoi vo.
 * ═══════════════════════════════════════════════════════════════════ */
body[data-yp-kind="listing"] a.ypl-shot{
  display:block;
  text-decoration:none;
  color:inherit;
}
body[data-yp-kind="listing"] a.ypl-shot:hover{
  text-decoration:none;
}

/* ═══ P15 · GIOI THIEU · FAQ ════════════════════════════════════════
 * 1. Khoi gioi thieu "co sang trai, chua day khung":
 *    .ypl-quote p co max-width:var(--yp-prose) = 560px (chan dong van
 *    xuoi, 70 ky tu). Trong the rong 926px thi con 350px BO TRONG ben
 *    phai — dung nhu nguoi dung thay.
 *    ⚠ 560px la CO Y trong ban mau: dong qua dai thi mat kho bat lai dau
 *      dong sau. Nhung o day khoi da nam trong cot trai (~890px) va da co
 *      vach vang + dem, nen chan dong that su la ~840px. Noi ra 100%.
 *
 * 2. NUT "Xem day du gioi thieu": thu gon con 5 dong, co dai chuyen sac
 *    o day de bao "con nua". CSS o day; JS o lgs.asp.
 *    ⚠ Chi thu gon khi noi dung THUC SU dai hon nguong — JS do chieu cao
 *      that roi moi gan lop.
 *
 * 3. FAQ: nguoi dung noi dung mac chinh la SEO va bot AI, nguoi doc it.
 *    Nen bo dam va ha co chu — de no can bang voi cac muc khac thay vi
 *    hut mat. Cau hoi tu 15px/600 xuong 14,5px/500.
 * ═══════════════════════════════════════════════════════════════════ */
body[data-yp-kind="listing"] .ypl-quote p,
body[data-yp-kind="listing"] .ypl-quote ul{
  max-width:none;
}

body[data-yp-kind="listing"] .ypl-cut{
  position:relative;
  max-height:9.2em;
  overflow:hidden;
}
body[data-yp-kind="listing"] .ypl-cut::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3.2em;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--yp-surface) 88%);
  pointer-events:none;
}
body[data-yp-kind="listing"] .ypl-fold:hover{
  color:var(--yp-action-deep);
  border-bottom-color:var(--yp-action);
}

body[data-yp-kind="listing"] .ypl-faq summary{
  font-weight:500;
  font-size:var(--t-scan-1);
}
body[data-yp-kind="listing"] .ypl-faq[open] summary{
  font-weight:600;
}

/* ── TEN DOANH NGHIEP: ha co chu ──────────────────────────────────
   28px o man rong lam ten dai (nhu "Hóa Chất TM Grow — Công Ty Cổ Phần
   Quốc Tế TM GROW") be lam hai dong va lan at ca khoi nhan dien.
   25px van dung tren --t-h2 (24px) nen h1 con ro la cap cao nhat. */
body[data-yp-kind="listing"] .ypl-hero h1{
  font-size:25px;
}
@media screen and (max-width:991px){
  body[data-yp-kind="listing"] .ypl-hero h1{
    font-size:20px;
  }
}

/* ── NHAN ZALO: chu TRANG o MOI cho ────────────────────────────────
   Nhan nay xuat hien trong the a (hero) lan the span (cot cong cu).
   Trong the a, css_lgs.css co a:link{color:#111} — cung do dac hieu
   voi mot so bo chon khac nen ket qua phu thuoc thu tu nap. Ghim
   bang !important: nhan chi co MOT mau chu duy nhat, khong co ngoai le. */
body[data-yp-kind="listing"] .ypl-zalo{
  color:#fff!important;
  background:#0068FF;
}

/* ── HUY HIEU: DA BO ban tu che ─────────────────────────────────────
   Toi tung tu ve .ypl-mk / .ypl-gems cho "Nha tai tro" va "Xac thuc".
   SAI: yp_cls2.css DA CO san bo huy hieu chuan cua he —
     .ypx-bdg · .ypx-tt · .ypx-dm · .ypx-gem · .ypx-ck · .star_text ·
     .duocxacthuc · .ypx-xt · .ypx-xtp   (do duoc: 20+5+3+2+1+8+7+5+5 quy tac)
   va lgs.asp CUNG mang khoa data-yp-kind="listing" nen chung ap dung duoc
   NGAY, khong phai chep mot dong nao. P13 doi markup sang bo do.
   ⚠ Giu .ypl-marks (khung bao) — no chi la flex-wrap, khong ve mau. */

/* ── O TRON cot cong cu: bieu tuong thay chu viet tat ─────────── */
body[data-yp-kind="listing"] .ypl-av i{
  font-size:15px;
  color:var(--yp-faint);
}
body[data-yp-kind="listing"] .ypl-who .ypl-av i{
  font-size:17px;
}

/* ═══ P10 · DANH MUC CUNG UNG ═══════════════════════════════════════
 * 1. THUT LE TREO — do tren anh chup: muc dai xuong dong thi dong hai
 *    tran ve sat mep cot, khong thang hang voi chu cua dong mot
 *    ("Hoa chat cong nghiep nganh det / nhuom"). Mui ▸ la noi dung noi
 *    tuyen nen khong tao duoc le treo.
 *    -> padding-left + text-indent am. Cach nay khong pha `columns`.
 * 2. Trang thai KHONG CO KET QUA cho o loc nhanh.
 * ═══════════════════════════════════════════════════════════════════ */
body[data-yp-kind="listing"] .ypl-idx li{
  padding-left:14px;
  text-indent:-14px;
}
body[data-yp-kind="listing"] .ypl-tools input{
  transition:border-color .2s ease, background .2s ease;
}
body[data-yp-kind="listing"] .ypl-tools span{
  font-variant-numeric:tabular-nums;
}
body[data-yp-kind="listing"] .ypl-tools .ypl-clr{
  border:0;
  background:none;
  padding:4px 6px;
  cursor:pointer;
  color:var(--yp-muted);
  font-size:var(--t-cap);
  line-height:1;
  border-radius:var(--yp-r-ctrl,6px);
}
body[data-yp-kind="listing"] .ypl-tools .ypl-clr:hover{
  background:var(--yp-line-soft);
  color:var(--yp-ink);
}
body[data-yp-kind="listing"] .ypl-tools .ypl-clr[hidden]{
  display:none;
}
body[data-yp-kind="listing"] .ypl-empty-msg{
  margin:0;
  padding:14px 0 2px;
  color:var(--yp-muted);
  font-size:var(--t-scan-1);
}
body[data-yp-kind="listing"] .ypl-empty-msg[hidden]{
  display:none;
}

body[data-yp-kind="listing"] .ypl-shot.ypl-empty:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--yp-line);
}

/* ── BO SUNG (P6): STICKY dat DUNG CHO ──────────────────────────────
   Ban mau cho CA COT PHAI sticky (aside > .tool + .sell). Neu dat aside
   cho RIENG .ypl-tool thi khoi dang ky ben duoi cuon qua no va CHONG LEN
   — do duoc tren anh chup sau P5.
   Nen: .ypl-tool la div, con CA COT la aside. Them mot chan an toan:
   the aside nao nam TRONG luoi moi duoc sticky. */
body[data-yp-kind="listing"] .ypl-wrap>aside{
  align-self:start;
}
/* ⚠ KHONG duoc goi ten lop cua tang khac o day — cong 2 va cong 6 cua
   kiem_yplgs2.py bat ngay khi toi thu viet .ypdk va .ypf-bizr vao day.
   Khoang cach giua hai khoi cua cot phai: neo bang VI TRI, khong bang ten. */
body[data-yp-kind="listing"] .ypl-wrap>aside>*+*{
  margin-top:var(--yp-gap);
}

/* ⚠ P22 — BO DUOI THUA CUA .ypl-wrap.
   Ban mau dat padding:12px 0 64px (yp_lgs2.css d.149, nam trong THAN nen
   khong sua truc tiep duoc khi chua co mockup_lgs.html). 64px do khong
   ngan cach gi — no chi la duoi thua o day than trang. Truoc P21 no khong
   lo vi dai CTA .ypf-biz chen vao giua; go dai di thi no lo ra.
   Cong voi 48px cua mt-5 tren dai A-Z la 112px, gan NAM lan nhip 24px
   cua trang.
   Dat o day (cuoi tep) de day la KHAI BAO CUOI CUNG cho cung bo chon —
   bai hoc ⑵: them quy tac TRUOC quy tac cu thi vo hieu ma khong bao gi.
   Chi de bottom: 12px tren va 0 hai ben van giu nguyen. */
body[data-yp-kind="listing"] .ypl-wrap{
  padding-bottom:0;
}