/* =========================================================
   Trang minh bach: Bang gia thi truong + Phuong phap danh gia
   Ke thua token cua theme: --green --green2 --mint --cream --gold --line --ink --muted
   Chu ky thi giac dung chung: .ruler (thuoc khoang gia)
   ========================================================= */

.pg-eyebrow{display:inline-block;color:var(--gold);font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:16px}

/* ---------- Hero dung chung ---------- */
.pg-hero,.mt-hero{position:relative;padding:74px 0 62px;background:linear-gradient(180deg,var(--cream),#fff 82%);border-bottom:1px solid var(--line);overflow:hidden}
.pg-hero:after,.mt-hero:after{content:"";position:absolute;right:-120px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(28,122,105,.09),transparent 68%);pointer-events:none}
.pg-hero .container,.mt-hero .container{position:relative;z-index:1}
.pg-hero__title,.mt-hero__title{font-family:"Playfair Display",serif;font-size:clamp(38px,5.4vw,64px);line-height:1.06;letter-spacing:-.015em;margin:0 0 22px;max-width:19ch}
.pg-hero__title em,.mt-hero__title em{font-style:italic;color:var(--green)}
.pg-hero__lead,.mt-hero__lead{max-width:60ch;margin:0;color:var(--muted);font-size:16.5px;line-height:1.85}

.pg-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.pg-meta strong{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- Bang gia: luoi the ---------- */
.pg-body{padding:64px 0 88px}
.pg-intro{max-width:70ch;margin:0 0 40px;color:var(--muted)}
.pg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px}

.pg-card{position:relative;padding:28px 28px 24px;border:1px solid var(--line);border-radius:24px;background:#fff;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.pg-card:hover{border-color:#cfe2da;box-shadow:0 22px 54px rgba(20,54,45,.08);transform:translateY(-3px)}
.pg-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.pg-card__head h2{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:16px;font-weight:800;line-height:1.4;margin:0;letter-spacing:-.005em}
.pg-sample{flex:0 0 auto;padding:5px 11px;border-radius:999px;background:var(--mint);color:var(--green);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}

.pg-answer{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.pg-answer__value{font-family:"Playfair Display",serif;font-size:clamp(34px,4vw,44px);line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.pg-answer__label{color:var(--muted);font-size:12.5px}

.pg-band{margin:20px 0 0;padding-top:16px;border-top:1px dashed var(--line)}
.pg-band div{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.pg-band dt{color:var(--muted);font-size:12.5px}
.pg-band dd{margin:0;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}

/* ---------- Chu ky: thuoc khoang gia ---------- */
.ruler{--lo:0%;--hi:100%;--mid:50%}
.ruler__track{position:relative;height:12px;border-radius:999px;background:repeating-linear-gradient(90deg,#eef3f1 0 5px,#e7edea 5px 6px)}
/* Khong dung fill-mode: neu animation khong chay, thanh van hien dung do rong that. */
.ruler__band{position:absolute;top:0;bottom:0;left:var(--lo);width:calc(var(--hi) - var(--lo));border-radius:999px;background:linear-gradient(90deg,var(--green2),var(--green));transform-origin:left center;animation:rulerIn .7s cubic-bezier(.22,.8,.3,1)}
.ruler__mark{position:absolute;top:-6px;bottom:-6px;left:var(--mid);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 3px #fff}
.ruler__ends{display:flex;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
@keyframes rulerIn{from{transform:scaleX(.04);opacity:.35}to{transform:scaleX(1);opacity:1}}

/* ---------- Bang gia: khoi giai thich ---------- */
.pg-explain{margin-top:64px;padding:44px;border-radius:30px;background:var(--cream);border:1px solid var(--line)}
.pg-explain__head{margin-bottom:32px}
.pg-explain__head h2{font-family:"Playfair Display",serif;font-size:clamp(26px,3vw,34px);margin:0;line-height:1.2}
.pg-explain__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

.pg-legend{padding:26px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.ruler--demo{margin-bottom:22px}
.pg-legend__key{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pg-legend__key li{display:flex;align-items:flex-start;gap:12px;font-size:13.5px;line-height:1.65;color:var(--muted)}
.key{flex:0 0 auto;margin-top:5px;width:22px;height:10px;border-radius:999px}
.key--track{background:repeating-linear-gradient(90deg,#eef3f1 0 5px,#e7edea 5px 6px)}
.key--band{background:linear-gradient(90deg,var(--green2),var(--green))}
.key--mark{width:3px;height:16px;margin-top:2px;margin-left:9px;margin-right:10px;border-radius:2px;background:var(--ink)}

.pg-notes p{margin:0 0 20px;font-size:14.5px;line-height:1.85;color:var(--muted)}
.pg-notes p:last-child{margin-bottom:0}
.pg-notes strong{display:block;margin-bottom:4px;color:var(--ink);font-size:15px}

.pg-disclaimer{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.8}
.pg-disclaimer a{color:var(--green);font-weight:800;text-decoration:underline;text-underline-offset:3px}

.pg-empty{padding:44px;border:1px dashed var(--line);border-radius:24px;background:var(--cream);text-align:center}
.pg-empty strong{display:block;font-size:17px;margin-bottom:8px}
.pg-empty p{margin:0;color:var(--muted);font-size:14px}

/* =========================================================
   Phuong phap danh gia
   ========================================================= */
.mt-layout{display:grid;grid-template-columns:224px 1fr;gap:64px;align-items:start;padding:52px 0 76px}

.mt-nav__inner{position:sticky;top:104px;display:grid;gap:2px;padding-left:14px;border-left:2px solid var(--line)}
.mt-nav a{padding:9px 0;color:var(--muted);font-size:13.5px;font-weight:700;transition:color .2s ease,transform .2s ease}
.mt-nav a:hover{color:var(--green);transform:translateX(3px)}

.mt-main{max-width:74ch;min-width:0}
/* padding viet day du de khong dinh rule chung section{padding:88px 0} cua theme */
.mt-section{padding:0 0 40px;margin:0 0 40px;border-bottom:1px solid var(--line);scroll-margin-top:104px}
.mt-section:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
.mt-section h2{font-family:"Playfair Display",serif;font-size:clamp(27px,3.2vw,38px);line-height:1.18;margin:0 0 18px;letter-spacing:-.01em}
.mt-subhead{font-family:"Playfair Display",serif;font-size:23px;margin:34px 0 10px}
.mt-lead{color:var(--muted);font-size:15.5px;line-height:1.9;margin:0 0 22px}
.mt-note{margin:20px 0 0;color:var(--muted);font-size:13.5px;line-height:1.8}
.mt-note a{color:var(--green);font-weight:800;text-decoration:underline;text-underline-offset:3px}

.mt-callout{margin:28px 0 0;padding:20px 24px;border-left:3px solid var(--green);border-radius:0 16px 16px 0;background:var(--mint);color:#1c453c;font-size:14px;line-height:1.85}
.mt-callout--warn{border-left-color:var(--gold);background:#fdf8ef;color:#6d5220}

/* Thanh trong so */
.weight-bar{display:flex;height:52px;border-radius:14px;overflow:hidden;margin-bottom:26px;box-shadow:0 12px 30px rgba(20,54,45,.09)}
.weight-bar__seg{display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;min-width:0}
.weight-bar__seg--service{background:#0d5347}
.weight-bar__seg--staff{background:#17705f}
.weight-bar__seg--hygiene{background:#268a75}
.weight-bar__seg--facility{background:#4aa693}
.weight-bar__seg--price{background:#7cc4b2}

.weight-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.weight-list li{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.weight-list li:last-child{border-bottom:0}
.weight-list__dot{flex:0 0 auto;width:11px;height:11px;margin-top:5px;border-radius:50%}
.weight-list__dot--service{background:#0d5347}
.weight-list__dot--staff{background:#17705f}
.weight-list__dot--hygiene{background:#268a75}
.weight-list__dot--facility{background:#4aa693}
.weight-list__dot--price{background:#7cc4b2}
.weight-list li div{flex:1;min-width:0}
.weight-list strong{display:block;font-size:14.5px;margin-bottom:3px}
.weight-list span{color:var(--muted);font-size:13px;line-height:1.65}
.weight-list b{flex:0 0 auto;font-size:15px;font-variant-numeric:tabular-nums;color:var(--green)}

/* Danh sach hang muc doi chieu */
.check-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.check-grid li{display:flex;align-items:center;gap:11px;padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:14px;font-weight:600}
.check-grid li:before{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--mint);border:1.5px solid var(--green);box-shadow:inset 0 0 0 3px #fff}

/* Bac giay phep */
.tier-stack{display:grid;gap:12px}
.tier{display:flex;align-items:flex-start;gap:20px;padding:22px 24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.tier--2{background:linear-gradient(90deg,#fbfdfc,#fff)}
.tier--3{background:linear-gradient(90deg,var(--mint),#fff 62%);border-color:#cae0d8}
.tier__rank{flex:0 0 auto;display:grid;gap:4px;padding-top:3px}
.tier__rank i{display:block;width:26px;height:5px;border-radius:999px;background:#e6ecea}
.tier__rank i.is-on{background:var(--green)}
.tier__body strong{display:block;font-size:15.5px;margin-bottom:6px}
.tier__body p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.75}

/* Cac buoc tinh gia */
.step-list{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:4px}
.step-list li{counter-increment:step;position:relative;padding:18px 0 18px 54px;border-bottom:1px solid var(--line)}
.step-list li:last-child{border-bottom:0}
.step-list li:before{content:counter(step);position:absolute;left:0;top:16px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.step-list strong{display:block;font-size:15px;margin-bottom:4px}
.step-list span{color:var(--muted);font-size:13.5px;line-height:1.75}

/* Cam ket doc lap */
.pledge-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pledge-list li{position:relative;padding:16px 20px 16px 46px;border-radius:14px;background:var(--cream);color:var(--muted);font-size:14px;line-height:1.8}
.pledge-list li:before{content:"";position:absolute;left:20px;top:23px;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(15,91,79,.12)}
.pledge-list strong{color:var(--ink)}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  .mt-layout{grid-template-columns:1fr;gap:28px;padding-top:36px}
  .mt-nav__inner{position:static;display:flex;flex-wrap:wrap;gap:8px;padding:0;border-left:0}
  .mt-nav a{padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px}
  .mt-nav a:hover{transform:none;border-color:var(--green)}
  .pg-explain__grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:700px){
  .pg-hero,.mt-hero{padding:48px 0 40px}
  .pg-body{padding:40px 0 62px}
  .pg-grid{grid-template-columns:1fr}
  .pg-card{padding:22px 20px}
  .pg-explain{padding:26px 20px;border-radius:22px}
  .pg-legend{padding:20px}
  .mt-section{padding:0 0 32px;margin:0 0 32px}
  .weight-bar{height:44px}
  .weight-bar__seg{font-size:11px}
  .weight-bar__seg--facility,.weight-bar__seg--price{font-size:10px}
  .tier{flex-direction:column;gap:12px}
  .tier__rank{display:flex}
}

@media(prefers-reduced-motion:reduce){
  .ruler__band{animation:none}
  .pg-card:hover{transform:none}
  .mt-nav a:hover{transform:none}
}

/* Focus hien ro cho ban phim */
.mt-nav a:focus-visible,.pg-disclaimer a:focus-visible,.mt-note a:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
/* Bien dong gia theo thoi gian tren the dich vu */
.pg-trend{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.pg-trend em{font-style:normal;font-weight:600;opacity:.8;font-size:11px}
.pg-trend--up{background:#fdf2f2;color:#a33d3d}
.pg-trend--down{background:var(--mint);color:var(--green)}
.pg-trend--flat{background:#f2f4f3;color:#78817d}