/* huthamcaubephot.com — CLAUDE.md mục 5.
   Ý tưởng cốt lõi: xanh lá KHÔNG phải màu thương hiệu mà là tín hiệu trạng thái.
   Mọi đối thủ dùng xanh lá làm màu chính vì họ tự nhận là "công ty môi trường";
   ta là bên tra cứu/kiểm định nên đi navy + CTA cam, và để xanh lá cho badge "đã kiểm định". */

:root{
  --brand-900:#0E2E4A; --brand-700:#17456B; --brand-100:#E8F0F7;
  --cta:#F2600C; --cta-hover:#D45208;
  --verified:#0F7B55; --pending:#B7791F; --unknown:#6B7684; --removed:#C0392B;
  --bg:#F7F8FA; --surface:#fff; --text:#16202B; --text-2:#5A6675; --border:#E2E6EB;
  --radius:10px; --wrap:960px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.62 "Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-bottom:78px; /* chừa chỗ cho thanh gọi cố định */
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
a{color:var(--brand-700)}
h1{font-size:1.72rem;line-height:1.28;margin:.6em 0 .4em;font-weight:700}
h2{font-size:1.3rem;line-height:1.32;margin:2em 0 .5em;font-weight:700;
   padding-top:.6em;border-top:1px solid var(--border)}
h2.khu-vuc{border-top:0;margin-top:1.6em}
h3{font-size:1.08rem;margin:1.5em 0 .4em;font-weight:600}
p{margin:.7em 0}
.lead{font-size:1.06rem;color:var(--text-2)}
.small,.src{font-size:.86rem;color:var(--text-2)}
.muted{color:var(--text-2)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Header ─────────────────────────────────────────── */
.site-head{background:var(--brand-900);color:#fff}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
/* Logo minh hoạ (public/assets/img/logo.svg) đặt trên nền trắng bo góc: vành kính màu navy
   trùng đúng màu header, không có nền trắng thì vành kính biến mất. */
.brand-logo{width:42px;height:42px;flex:0 0 42px;display:block;
  background:#fff;border-radius:10px;padding:3px}
/* Màn hẹp: bỏ nút gọi ở header — thanh gọi cố định dưới đáy đã làm việc đó, tên thương hiệu
   dài nên header sẽ bị chật nếu giữ cả hai. */
@media (max-width:420px){.head-call{display:none}}
.brand-text{font-weight:700;line-height:1.15;font-size:1rem}
.brand-text small{display:block;font-weight:400;font-size:.72rem;opacity:.75}
.head-call{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;
  border:1px solid rgba(255,255,255,.35);padding:7px 12px;border-radius:8px}

/* ── Điều hướng / callout ───────────────────────────── */
.crumb{font-size:.85rem;color:var(--text-2);margin:14px 0 0}
.callout{border-radius:var(--radius);padding:14px 16px;margin:1em 0;border-left:4px solid}
.callout-info{background:var(--brand-100);border-color:var(--brand-700)}
.callout-empty{background:#FFF7E8;border-color:var(--pending)}

/* ── Bảng top 3 ─────────────────────────────────────── */
.cards{display:grid;gap:14px;margin:1em 0}
.card{display:flex;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px}
.card-thieu-dl{background:#FCFCFD}
.card-rank{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:8px;
  background:var(--brand-900);color:#fff;font-weight:700;font-size:.95rem}
.card-body{flex:1;min-width:0}
.card-name{margin:.1em 0 .2em;font-size:1.08rem}
.alias{margin:0 0 .4em;font-size:.85rem;color:var(--text-2)}

.badges{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:.4em 0}
.badge{font-size:.76rem;font-weight:600;padding:3px 9px;border-radius:999px;
  background:#EEF1F4;color:var(--text-2);white-space:nowrap}
.v-ok{background:#E4F4EE;color:var(--verified)}
.v-mid{background:#FBF1DE;color:var(--pending)}
.v-low{background:#EEF1F4;color:var(--unknown)}
.v-info{background:var(--brand-100);color:var(--brand-700)}
.v-neutral{background:#EEF1F4;color:var(--text-2)}
.v-removed{background:#FBEAE8;color:var(--removed)}

.facts{margin:.6em 0 0;display:grid;gap:2px}
.facts>div{display:flex;gap:8px;font-size:.9rem;padding:3px 0;border-bottom:1px dashed var(--border)}
.facts dt{flex:0 0 132px;color:var(--text-2)}
.facts dd{margin:0;flex:1}
.note-phi{margin:.5em 0 0;font-size:.86rem;background:#FFF7E8;border-radius:6px;padding:7px 9px}
.note{margin:.4em 0 0;font-size:.86rem;color:var(--text-2)}
.media-empty{margin:.5em 0 0;font-size:.83rem;color:var(--unknown);font-style:italic}

.btn-choose{margin-top:.8em;width:100%;background:var(--cta);color:#fff;border:0;
  border-radius:8px;padding:12px 14px;font:600 1rem/1 "Be Vietnam Pro",sans-serif;cursor:pointer}
.btn-choose:hover{background:var(--cta-hover)}
.table-foot{font-size:.88rem;color:var(--text-2);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}

/* ── Bảng dữ liệu ───────────────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1em 0}
.tbl{width:100%;min-width:520px;border-collapse:collapse;background:var(--surface);font-size:.93rem}
.tbl th,.tbl td{border:1px solid var(--border);padding:9px 11px;text-align:left;vertical-align:top}
.tbl th{background:var(--brand-100);font-weight:600;color:var(--brand-900)}
.tbl .num{white-space:nowrap}
.tbl .unit{color:var(--text-2);font-size:.85em}

.signs,.levels,.commit,.how,.near,.licensed{padding-left:1.15em}
.signs li,.levels li,.commit li,.how li{margin:.45em 0}
.licensed{list-style:none;padding:0}
.licensed li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;margin:.6em 0}

.two-col{display:grid;gap:14px;margin:1em 0}
.two-col>div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.col-h{font-weight:600;margin:0 0 .4em}
.col-h.ok{color:var(--verified)}
.col-h.bad{color:var(--removed)}
.two-col ul{padding-left:1.1em;margin:0}
.two-col li{margin:.35em 0;font-size:.93rem}

/* ── FAQ ────────────────────────────────────────────── */
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:11px 14px;margin:.5em 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:.6em 0 0;color:var(--text-2)}

.page-meta{font-size:.87rem;color:var(--text-2);margin-top:2em;
  border-top:1px solid var(--border);padding-top:1em}

/* ── Trang chủ ──────────────────────────────────────── */
.hero{padding:1.2em 0 .4em}
.search{position:relative;margin:1em 0 .5em}
.search input{width:100%;padding:14px 16px;font-size:1rem;border:2px solid var(--border);
  border-radius:10px;background:var(--surface);font-family:inherit}
.search input:focus{outline:none;border-color:var(--brand-700)}
.search-res{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;
  list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 8px 24px rgba(14,46,74,.12);max-height:320px;overflow:auto}
.search-res li a{display:block;padding:9px 11px;border-radius:7px;text-decoration:none;color:var(--text)}
.search-res li a:hover,.search-res li a:focus{background:var(--brand-100)}
.hero-note{font-size:.9rem;color:var(--text-2)}
.loc-grid{display:grid;gap:12px;margin:1em 0}
.loc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.loc-card h3{margin:0 0 .2em}
.loc-card ul{margin:.5em 0 0;padding-left:1.1em}

/* ── Hộp thoại chọn đơn vị ──────────────────────────── */
.dlg{border:0;border-radius:14px;padding:22px;max-width:420px;width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(14,46,74,.28)}
.dlg::backdrop{background:rgba(14,46,74,.55)}
.dlg-h{margin:0 0 .5em;font-size:1.12rem}
.dlg code{background:var(--brand-100);color:var(--brand-900);font-weight:700;
  padding:2px 8px;border-radius:6px;font-size:1.05em}
.dlg-free{background:#FFF7E8;border-radius:8px;padding:10px 12px;font-size:.92rem}
.btn-block{display:block;text-align:center;margin:1em 0 .5em}
.btn-ghost{width:100%;background:none;border:1px solid var(--border);border-radius:8px;
  padding:10px;font:inherit;color:var(--text-2);cursor:pointer}

/* ── Thanh gọi cố định ──────────────────────────────── */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;
  gap:12px;padding:9px 14px;background:var(--brand-900);color:#fff;
  box-shadow:0 -4px 18px rgba(14,46,74,.22)}
.callbar-txt{flex:1;min-width:0;line-height:1.25}
.callbar-txt strong{display:block;font-size:.9rem}
.callbar-txt span{font-size:.76rem;opacity:.8}
.btn-call{background:var(--cta);color:#fff;text-decoration:none;font-weight:700;
  padding:12px 18px;border-radius:9px;white-space:nowrap}
.btn-call:hover{background:var(--cta-hover)}

/* ── Footer ─────────────────────────────────────────── */
.site-foot{margin-top:2.5em;background:var(--brand-900);color:#C9D6E2;padding:22px 0 28px}
.site-foot a{color:#fff}
.foot-lead{color:#fff;margin-top:0}
.foot-nav{display:flex;flex-wrap:wrap;gap:14px;margin:.8em 0}
.foot-legal{font-size:.83rem;line-height:1.55}

/* ── Từ tablet trở lên ──────────────────────────────── */
@media (min-width:700px){
  h1{font-size:2rem}
  .two-col{grid-template-columns:1fr 1fr}
  .loc-grid{grid-template-columns:repeat(3,1fr)}
  .callbar{justify-content:center;gap:20px}
  .callbar-txt{flex:0 1 auto}
}
@media (min-width:960px){
  body{padding-bottom:0}
  .callbar{position:sticky;bottom:0}
}