/* TIXI CAMERA – Giao diện khách (Mua bán & Cho thuê) · v5
   Hệ thiết kế thống nhất: Be Vietnam Pro (chữ Việt chuẩn), thang chữ cố định, khoảng cách 4/8,
   than chì + cam theo logo, ảnh sản phẩm thật, chữ thường (không IN HOA khối lớn). */
:root {
  --brand: #e8772e;
  --brand-hi: #f0a043;
  --brand-lo: #d2561f;
  --brand-grad: linear-gradient(135deg, #f19a3e 0%, #e8772e 50%, #d9592c 100%);
  --brand-soft: #fdf2e9;
  --brand-line: #f6d2b5;
  --char: #1c1c1e;
  --char-2: #141415;
  --char-3: #2a2a2d;
  --ink: #16171a;
  --text: #3b3e44;
  --muted: #73777f;
  --faint: #a2a6ad;
  --line: #e7e8eb;
  --line-2: #f0f1f3;
  --bg: #f6f6f7;
  --page: #f6f6f7;
  --card: #ffffff;
  --price: #d63a2f;
  --ok: #178a4b;
  --ok-soft: #e7f5ed;
  --warn: #c76a07;
  --warn-soft: #fdf3e3;
  --bad: #d23a3a;
  --bad-soft: #fdeeee;
  --info: #2a62d6;
  --info-soft: #ebf1fd;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sh: 0 1px 2px rgba(22, 23, 26, .05), 0 1px 1px rgba(22, 23, 26, .03);
  --sh-soft: 0 1px 2px rgba(22, 23, 26, .04), 0 10px 28px -14px rgba(22, 23, 26, .16);
  --sh-lg: 0 24px 48px -20px rgba(22, 23, 26, .32);
  --ring: 0 0 0 1px rgba(22, 23, 26, .07);
  --f: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --f-cond: var(--f);
  --wrap: 1240px;
  --hdr: 118px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 15px/1.6 var(--f); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
.ic { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -.18em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: #fbd9bd; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Nút ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 14px; line-height: 1; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 17px; height: 17px; }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 16px -8px rgba(210, 86, 31, .7); }
.btn-primary:hover { background: var(--brand-lo); }
.btn-dark { background: var(--char); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-line { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-soft { background: var(--brand-soft); color: var(--brand-lo); }
.btn-soft:hover { background: #fbe3d0; }
.btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .18); }
.btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 9px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.icbtn { width: 36px; height: 36px; padding: 0; }
.link { color: var(--brand-lo); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { color: var(--ink); }
.link .ic { width: 16px; height: 16px; transition: transform .15s; }
.link:hover .ic { transform: translateX(2px); }

/* ---------- Form ---------- */
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field label i { color: var(--price); font-style: normal; }
.inp { height: 44px; border: 1px solid #d9dbe0; border-radius: 10px; padding: 0 14px; background: #fff; outline: none; width: 100%; font-size: 14.5px; transition: border-color .15s, box-shadow .15s; }
.inp::placeholder { color: var(--faint); }
textarea.inp { height: auto; min-height: 92px; padding: 11px 14px; resize: vertical; line-height: 1.5; }
.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232, 119, 46, .16); }
.inp.err { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(210, 58, 58, .12); }
select.inp, .sel { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2373777f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; padding-right: 38px; }
.sel { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding-left: 12px; font-size: 14px; outline: none; }
.sel:focus { border-color: var(--brand); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.hint { font-size: 13px; color: var(--muted); line-height: 1.5; }
.err-msg { font-size: 13px; color: var(--bad); }
.inline-form { display: flex; gap: 8px; }
.inline-form .inp { flex: 1; min-width: 0; }
.chk { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.chk input { accent-color: var(--brand); width: 17px; height: 17px; flex: none; }
.chk small { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- Pill / thông báo ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.mute { background: #eef0f2; color: var(--muted); }
.notice { background: var(--warn-soft); border: 1px solid #f3dcb4; color: #7a4704; border-radius: var(--r); padding: 12px 14px; font-size: 14px; line-height: 1.55; display: flex; gap: 10px; }
.notice .ic { color: var(--warn); width: 19px; height: 19px; flex: none; margin-top: 1px; }
.wk-note { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: #8a3d0f; background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 9px; padding: 6px 10px; margin-top: 8px; }
.wk-note .ic { color: var(--brand-lo); width: 15px; height: 15px; }

/* ---------- Topbar & Header ---------- */
.topbar { background: var(--char-2); color: #b9bbc0; font-size: 12.5px; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.topbar .promo { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .promo .ic { width: 14px; height: 14px; color: var(--brand-hi); }
.topbar .promo b { color: #fff; font-weight: 600; }
.topbar .promo .sep { width: 1px; height: 12px; background: #3a3a3d; flex: none; }
.topbar nav { display: flex; gap: 16px; align-items: center; flex: none; }
.topbar .sw { color: var(--brand-hi); font-weight: 600; }
.topbar .sw:hover { color: #fff; }
.topbar .soc { display: inline-flex; gap: 12px; align-items: center; }
.topbar .soc a { display: inline-grid; place-items: center; color: #c9cbd0; }
.topbar .soc a:hover { color: #fff; }
.topbar .soc a .ic { width: 15px; height: 15px; }
.topbar .soc a.zl { font-size: 11px; font-weight: 700; }

.header { background: var(--char); position: relative; z-index: 46; }
.header .bar { display: flex; align-items: center; gap: 28px; height: 76px; }
.logo { display: flex; align-items: center; gap: 12px; flex: none; }
.logo img { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(240, 160, 67, .45); }
.logo .wm { display: flex; flex-direction: column; line-height: 1; }
.logo .wm b { font-size: 21px; font-weight: 800; letter-spacing: .02em; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .wm small { font-size: 10px; letter-spacing: .22em; color: #8d9097; margin-top: 6px; text-transform: uppercase; font-weight: 500; }
.logo .wm i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--brand-grad); border-radius: 5px; padding: 3px 7px; margin-top: 6px; align-self: flex-start; }
.search { flex: 1; position: relative; max-width: 600px; }
.search form { display: flex; height: 46px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.search input { flex: 1; min-width: 0; border: 0; padding: 0 18px; outline: none; font-size: 14.5px; background: transparent; }
.search input::placeholder { color: var(--faint); }
.search button { border: 0; background: var(--brand-grad); color: #fff; width: 54px; display: grid; place-items: center; }
.search button .ic { width: 20px; height: 20px; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 14px; box-shadow: var(--sh-lg), var(--ring); overflow: hidden; z-index: 60; }
.suggest a { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line-2); }
.suggest a:hover, .suggest a.on { background: var(--brand-soft); }
.suggest .th { width: 52px; height: 40px; border-radius: 8px; flex: none; overflow: hidden; background: #f2f2f3; position: relative; }
.suggest .nm { font-weight: 500; color: var(--ink); font-size: 14px; }
.suggest .pr { color: var(--price); font-weight: 600; font-size: 13px; }
.suggest .pr s { color: var(--faint); font-weight: 400; margin-left: 6px; }
.suggest .all { justify-content: center; color: var(--brand-lo); font-weight: 600; border: 0; font-size: 13.5px; }
.suggest mark { background: none; color: var(--brand-lo); font-weight: 700; }
.h-actions { display: flex; align-items: center; gap: 22px; flex: none; margin-left: auto; }
.h-act { display: flex; align-items: center; gap: 10px; position: relative; color: #fff; background: none; border: 0; padding: 0; text-align: left; }
.h-act .ico { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: var(--brand-hi); display: grid; place-items: center; transition: background .15s; }
.h-act:hover .ico { background: rgba(255, 255, 255, .13); }
.h-act .ico .ic { width: 20px; height: 20px; }
.h-act small { display: block; color: #8d9097; font-size: 11.5px; line-height: 1.2; }
.h-act b { display: block; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.h-act .count { position: absolute; top: -5px; left: 27px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--char); }
.burger { display: none; border: 0; background: none; width: 40px; height: 40px; padding: 0; color: #fff; }
.burger .ic { width: 24px; height: 24px; }

/* Thanh menu */
.catbar { background: var(--char); border-top: 1px solid #2c2c2f; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 45; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .7); }
.catbar ul { list-style: none; margin: 0 auto; padding: 0 20px; display: flex; justify-content: center; max-width: var(--wrap); }
.catbar li { position: relative; }
.catbar li > a { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px; font-weight: 500; font-size: 14px; color: #d4d6da; white-space: nowrap; position: relative; transition: color .15s; }
.catbar li > a .ic { width: 14px; height: 14px; opacity: .55; }
.catbar li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--brand-grad); transform: scaleX(0); transition: transform .2s; }
.catbar li > a:hover, .catbar li.on > a { color: #fff; }
.catbar li > a:hover::after, .catbar li.on > a::after { transform: scaleX(1); }
.catbar li.hl > a { color: var(--brand-hi); }
.drop { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; color: var(--text); border-radius: 0 0 14px 14px; box-shadow: var(--sh-lg), var(--ring); padding: 8px; display: none; }
.catbar li:hover .drop, .catbar li:has(:focus-visible) .drop { display: block; }
.catbar ul:hover li:not(:hover) .drop, .catbar li.shut .drop { display: none; }
.drop a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 9px; font-size: 14px; }
.drop a .ic { width: 14px; height: 14px; color: var(--faint); }
.drop a:hover { background: var(--brand-soft); color: var(--brand-lo); }

/* Drawer mobile */
.drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.drawer.show { display: block; }
.drawer .shade { position: absolute; inset: 0; background: rgba(10, 10, 12, .5); }
.drawer .panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); background: #fff; overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 24px; box-shadow: var(--sh-lg); }
.drawer .panel .logo { padding: 4px 18px 16px; border-bottom: 1px solid var(--line); }
.drawer .panel .logo .wm small { color: var(--muted); }
.drawer .panel a { display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-weight: 500; font-size: 15px; color: var(--ink); }
.drawer .panel a .ic { width: 16px; height: 16px; color: var(--faint); }
.drawer .panel a.sub { padding: 9px 20px 9px 46px; font-weight: 400; font-size: 14px; color: var(--muted); }
.drawer .panel .grp { padding: 16px 20px 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; border-top: 1px solid var(--line); margin-top: 8px; }

/* ---------- Footer ---------- */
.newsletter { display: none; }
.footer { background: var(--char-2); color: #a9acb2; margin-top: 72px; font-size: 14px; }
.footer .nlrow { border-bottom: 1px solid #262629; }
.footer .nlrow .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 24px; align-items: center; padding-block: 30px; }
.footer .nlrow h3 { color: #fff; font-size: 19px; font-weight: 600; }
.footer .nlrow p { font-size: 14px; margin-top: 4px; }
.footer .nl { display: flex; gap: 8px; }
.footer .nl .inp { height: 46px; background: #1f1f22; border-color: #333338; color: #fff; }
.footer .nl .inp:focus { border-color: var(--brand); }
.footer .nl .btn { height: 46px; flex: none; }
.footer .top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-block: 44px 34px; }
.footer h4 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul li a { display: inline-flex; align-items: center; gap: 0; }
.footer ul li a .ic { display: none; }
.footer a:hover { color: #fff; }
.footer .about p { margin: 16px 0; line-height: 1.7; max-width: 46ch; }
.footer .about .logo .wm small { color: #77797f; }
.footer .addr { gap: 10px !important; }
.footer .addr li { display: flex; gap: 10px; align-items: flex-start; }
.footer .addr .ic { color: var(--brand-hi); margin-top: 3px; width: 16px; height: 16px; }
.footer .soc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.footer .soc a { width: 38px; height: 38px; border-radius: 10px; background: #222225; display: grid; place-items: center; color: #fff; }
.footer .soc a .ic { width: 18px; height: 18px; }
.footer .soc a:hover { background: var(--brand); }
.footer .soc a.zl { font-weight: 700; font-size: 10.5px; }
.footer .soc a.hl-pill { width: auto; padding: 0 16px; gap: 8px; display: inline-flex; background: var(--brand-grad); font-weight: 600; font-size: 14px; }
.footer .soc a.hl-pill .ic { width: 16px; height: 16px; }
.footer .bottom { border-top: 1px solid #262629; padding-block: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: #7d8086; }

/* ---------- Nút nổi ---------- */
.floatbar { position: fixed; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; flex-direction: column; gap: 10px; }
.floatbar a { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .35); background: #fff; position: relative; transition: transform .15s; }
.floatbar a:hover { transform: translateY(-2px); }
.floatbar a small { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--char); color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.floatbar a:hover small { opacity: 1; }
.floatbar .fi { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.floatbar .fi .ic { width: 48px; height: 48px; }
.floatbar a.f-fb .fi { background: #1877f2; color: #fff; }
.floatbar a.f-map .fi { background: var(--char); color: var(--brand-hi); }
.floatbar a.f-fb .fi .ic, .floatbar a.f-map .fi .ic { width: 22px; height: 22px; }
.totop { position: fixed; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 49; width: 40px; height: 40px; border-radius: 12px; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-soft), var(--ring); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.totop.show { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--brand-lo); }
body:has(.floatbar) .totop { right: 76px; }
.mbar { display: none; }

/* ---------- Ảnh sản phẩm ---------- */
.ph { position: relative; display: block; overflow: hidden; background: #eeeef0; isolation: isolate; }
.ph > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.ph.cut { background: radial-gradient(circle at 50% 45%, #fff 0%, #f1f1f3 75%); }
.ph.cut > img { object-fit: contain; padding: 8%; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .16)); }
.ph.tall::before { content: ""; position: absolute; inset: -24px; background: var(--u) center / cover; filter: blur(22px) saturate(.9) brightness(1.04); opacity: .7; z-index: -1; }
.ph.tall > img { object-fit: contain; }
.ph.noimg > img { opacity: 0; }
.ph.noimg::after { content: attr(data-ph); position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: 13px; font-weight: 500; text-align: center; padding: 10px; }
.ph .art { width: 72%; height: 72%; margin: auto; position: absolute; inset: 0; }

/* ---------- Khung trang & tiêu đề mục ---------- */
.sec, .box { margin-top: 56px; }
.box { background: none; border: 0; padding: 0; }
.sec-head, .box-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; flex-wrap: wrap; }
.box-head .ttl { display: grid; gap: 4px; min-width: 0; }
.box-head .eb, .eyebrow-s { font-size: 13px; font-weight: 600; color: var(--brand-lo); }
.sec-head h2, .box-head h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.sec-head .hint { font-size: 14px; }
.box-head .tabs { margin-left: auto; }
.more { color: var(--ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 6px 0; }
.more .ic { width: 16px; height: 16px; color: var(--brand); transition: transform .15s; }
.more:hover { color: var(--brand-lo); }
.more:hover .ic { transform: translateX(2px); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: #ececee; border-radius: 11px; padding: 3px; }
.tab { border: 0; background: transparent; border-radius: 9px; padding: 6px 14px; font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; }
.tab:hover { color: var(--ink); }
.tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); font-weight: 600; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; color: var(--text); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 500; border: 1px solid var(--line); transition: border-color .15s, color .15s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--char); color: #fff; border-color: var(--char); }
.chip .ic { width: 14px; height: 14px; }
.panel-box { background: #fff; border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-soft); }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding-block: 18px 16px; flex-wrap: wrap; }
.crumb a:hover { color: var(--brand-lo); }
.crumb .ic { width: 13px; height: 13px; color: var(--faint); }
.crumb b { color: var(--ink); font-weight: 500; }
.empty { background: #fff; border-radius: var(--r-lg); padding: 56px 20px; text-align: center; color: var(--muted); box-shadow: var(--sh-soft); }
.empty .ic { width: 40px; height: 40px; color: #c9ccd2; margin-bottom: 10px; }
.empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 6px; font-weight: 600; }

/* ---------- Lưới & thẻ sản phẩm ---------- */
.grid, .grid.g4, .box .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pcard { background: #fff; border-radius: var(--r-lg); box-shadow: var(--ring); display: flex; flex-direction: column; position: relative; transition: box-shadow .2s, transform .2s; min-width: 0; }
.pcard:hover { box-shadow: var(--ring), var(--sh-lg); transform: translateY(-3px); }
.pcard .media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; border: 0; padding: 0; width: 100%; background: #eeeef0; cursor: pointer; }
.pcard .media .ph { position: absolute; inset: 0; }
.pcard:hover .media .ph > img { transform: scale(1.04); }
.badge-off, .badge-cond, .badge-hot { position: absolute; z-index: 2; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 9px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; }
.badge-off { top: 12px; left: 12px; background: var(--price); color: #fff; }
.badge-cond { top: 12px; right: 12px; background: rgba(255, 255, 255, .92); color: var(--ink); backdrop-filter: blur(6px); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.badge-cond.new { color: var(--ok); }
.badge-hot { left: 12px; bottom: 12px; background: rgba(22, 23, 26, .78); color: #fff; backdrop-filter: blur(6px); }
.badge-hot .ic { width: 13px; height: 13px; color: var(--brand-hi); }
.soldout .media::after { content: "Tạm hết hàng"; position: absolute; inset: auto 0 0 0; z-index: 2; background: rgba(22, 23, 26, .8); color: #fff; text-align: center; font-weight: 600; font-size: 13px; padding: 7px; }
.pcard .heart { position: absolute; z-index: 3; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s, background .15s; }
.pcard:hover .heart, .pcard .heart.on, .pcard .heart:focus-visible { opacity: 1; transform: none; }
.pcard .heart.on { background: var(--brand); color: #fff; }
.pcard .heart .ic { width: 17px; height: 17px; }
.pcard .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.pcard .meta, .pcard .brand { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex: none; }
.pcard h3 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: -.005em; }
.pcard h3 a:hover { color: var(--brand-lo); }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; row-gap: 0; }
.price b { color: var(--price); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.price s { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard .acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: auto; padding-top: 4px; }
.pcard .acts .btn { height: 38px; font-size: 13.5px; padding: 0 10px; border-radius: 10px; }
.pcard .acts .btn-primary { box-shadow: none; }
.pcard .gift { display: none; }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard .meta .new { color: var(--ok); }
.gallery .main .badge-off { top: 14px; left: 14px; }

/* ---------- Trang chủ Mua bán ---------- */
.hero1 { background: #121213; color: #fff; position: relative; overflow: hidden; }
.hero1 .slider { position: relative; min-height: 480px; display: grid; }
.hero1 .slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.hero1 .slide.on { opacity: 1; visibility: visible; z-index: 1; }
.hero1 .slide .bgimg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.hero1 .slide .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #121213 0%, rgba(18, 18, 19, .92) 36%, rgba(18, 18, 19, .45) 72%, rgba(18, 18, 19, .2) 100%); }
.hero1 .slide .bgimg.glow { background: radial-gradient(600px 420px at 74% 52%, rgba(232, 119, 46, .32), transparent 70%), radial-gradient(900px 600px at 80% 50%, #2a2a2d 0%, #121213 70%); }
.hero1 .slide .bgimg.glow::after { display: none; }
.hero1 .inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 64px 20px 136px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; min-height: 480px; }
.hero1 .txt { max-width: 560px; }
.hero1 .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand-hi); }
.hero1 .eyebrow .ic { width: 15px; height: 15px; }
.hero1 h2 { color: #fff; font-size: clamp(32px, 4.2vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; margin: 14px 0 16px; }
.hero1 h2 em { font-style: normal; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero1 .lead { font-size: 16.5px; line-height: 1.6; color: #c4c6cb; max-width: 44ch; }
.hero1 .cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero1 .pimg { position: relative; display: grid; place-items: center; height: 100%; }
.hero1 .pimg img { max-height: 340px; width: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); position: relative; z-index: 1; }
.hero1 .pimg::before { content: ""; position: absolute; width: min(420px, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(240, 160, 67, .4) 0%, rgba(217, 89, 44, .12) 46%, transparent 70%); }
.hero1 .price-tag { position: absolute; z-index: 2; right: 6%; top: 10%; width: 86px; height: 86px; border-radius: 50%; background: var(--brand-grad); color: #fff; display: grid; place-content: center; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.1; box-shadow: 0 14px 30px -10px rgba(217, 89, 44, .8); }
.hero1 .price-tag b { font-size: 24px; font-weight: 800; }
.hero1.on .slide.on .txt > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero1 .slide.on .txt > *:nth-child(2) { animation-delay: .06s; }
.hero1 .slide.on .txt > *:nth-child(3) { animation-delay: .12s; }
.hero1 .slide.on .txt > *:nth-child(4) { animation-delay: .18s; }
@keyframes rise { from { transform: translateY(14px); opacity: .001; } }
.htabs { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; gap: 24px; }
.htabs button { border: 0; background: none; color: #8d9097; text-align: left; padding: 14px 0 0; font-size: 13px; position: relative; display: grid; gap: 2px; min-width: 0; }
.htabs button b { color: #d9dbdf; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htabs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htabs button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.htabs button::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; border-radius: 2px; background: var(--brand-grad); }
.htabs button.on b { color: #fff; }
.htabs button.on::after { animation: prog 6s linear forwards; }
.htabs.paused button.on::after { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
.s-nav { position: absolute; top: calc(50% - 40px); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; display: grid; place-items: center; transition: background .15s; }
.s-nav:hover { background: rgba(255, 255, 255, .16); }
.s-prev { left: 20px; } .s-next { right: 20px; }

/* Dải cam kết */
.trust { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-soft); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: -36px; position: relative; z-index: 4; }
.trust > div { display: flex; align-items: center; gap: 14px; padding: 20px 22px; min-width: 0; }
.trust > div + div { border-left: 1px solid var(--line-2); }
.trust .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-lo); display: grid; place-items: center; flex: none; }
.trust .ico .ic { width: 21px; height: 21px; }
.trust > div > span:last-child { min-width: 0; }
.trust b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trust small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Danh mục ảnh */
.cat-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.cat-tiles a { display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; }
.cat-tiles .ph { width: 100%; aspect-ratio: 1; border-radius: 20px; box-shadow: var(--ring); }
.cat-tiles a:hover .ph > img { transform: scale(1.06); }
.cat-tiles .ph.tile { display: block; overflow: hidden; background: #fff; }
.cat-tiles .ph.tile img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.cat-tiles a span.lbl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cat-tiles a small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); margin-top: -8px; }

/* Banner đôi có ảnh */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.promo-card { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 240px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px 30px; isolation: isolate; }
.promo-card .ph { position: absolute; inset: 0; z-index: -2; }
.promo-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 14, 15, .9) 0%, rgba(14, 14, 15, .55) 50%, rgba(14, 14, 15, .1) 100%); }
.promo-card.warm::before { background: linear-gradient(0deg, rgba(120, 40, 8, .92) 0%, rgba(160, 60, 16, .55) 55%, rgba(160, 60, 16, .08) 100%); }
.promo-card small { font-size: 13px; font-weight: 600; color: var(--brand-hi); }
.promo-card.warm small { color: #ffd9b3; }
.promo-card h3 { color: #fff; font-size: 26px; line-height: 1.2; margin: 6px 0 8px; letter-spacing: -.02em; }
.promo-card p { color: #d7d8dc; font-size: 14.5px; max-width: 42ch; }
.promo-card .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.promo-card:hover .ph > img { transform: scale(1.04); }

/* Logo hãng */
.brandbox { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.brandbox a { background: #fff; border-radius: var(--r); height: 64px; display: grid; place-items: center; padding: 10px 18px; box-shadow: var(--ring); transition: box-shadow .15s; }
.brandbox a:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.brandbox img { max-height: 28px; width: auto; filter: grayscale(1); opacity: .62; transition: filter .2s, opacity .2s; }
.brandbox a:hover img { filter: none; opacity: 1; }

/* Khối khuyến mãi tối */
.box.dark { background: var(--char); border-radius: var(--r-xl); padding: 28px; }
.box.dark .box-head h2 { color: #fff; }
.box.dark .box-head .eb { color: var(--brand-hi); }
.box.dark .more { color: #fff; }
.cd { display: flex; align-items: center; gap: 6px; color: #9a9da3; font-size: 13.5px; }
.cd span { background: rgba(255, 255, 255, .08); color: #fff; font-weight: 700; border-radius: 8px; min-width: 38px; height: 34px; display: grid; place-items: center; font-variant-numeric: tabular-nums; font-size: 15px; }
.box.dark .pcard { box-shadow: none; }

/* Thẻ cho thuê ở trang mua bán */
.rentc .rp { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rentc .rp b { color: var(--ink); font-size: 18px; font-weight: 700; }
.rentc .rp small { color: var(--muted); font-size: 13px; }

/* Tin tức */
.news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ncard { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ring); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.ncard:hover { transform: translateY(-3px); box-shadow: var(--ring), var(--sh-lg); }
.ncard .cover { aspect-ratio: 16 / 10; position: relative; overflow: hidden; display: block; background: #ddd; }
.ncard .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ncard:hover .cover img { transform: scale(1.04); }
.ncard .cover .t { position: absolute; left: 12px; top: 12px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 12px; font-weight: 600; border-radius: 7px; padding: 4px 9px; }
.ncard .b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ncard h3 { font-size: 16px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard p { font-size: 14px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard small { color: var(--faint); font-size: 12.5px; margin-top: auto; }

/* Cửa hàng */
.stores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.store { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ring); display: flex; flex-direction: column; }
.store .ph { aspect-ratio: 16 / 9; background: #222 center / cover; }
.store .in { padding: 18px 20px 20px; display: grid; gap: 6px; }
.store h3 { font-size: 17px; font-weight: 600; }
.store p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.store .go { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.store .go a { border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; font-size: 13.5px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; color: var(--ink); }
.store .go a:hover { border-color: var(--ink); }
.store .go .ic { width: 15px; height: 15px; color: var(--brand); }

/* Ảnh khách hàng */
.fb-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.fb-row figure { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; background: #ddd; }
.fb-row img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.fb-row figure:hover img { transform: scale(1.04); }

/* Banner ngang */
.band { margin-top: 56px; border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--char); color: #c9cbd0; }
.band .txt { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.band h3 { color: #fff; font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }
.band h3 em { font-style: normal; color: var(--brand-hi); }
.band p { font-size: 15px; line-height: 1.6; max-width: 46ch; }
.band .txt > div { margin-top: 8px; }
.band .pic { background: url(../img/hero.webp) center / cover; min-height: 280px; }
.band .pic.ph { background: #222; }

/* ---------- Danh mục ---------- */
.listing { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 24px; align-items: start; }
.filters { background: #fff; border-radius: var(--r-lg); box-shadow: var(--ring); padding: 6px 18px 14px; position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; }
.fgroup { padding-block: 14px; border-bottom: 1px solid var(--line-2); }
.fgroup:last-child { border-bottom: 0; }
.fgroup h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar h1 { font-size: 26px; margin-right: auto; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.toolbar h1 small { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.filter-btn { display: none; }

/* ---------- Chi tiết sản phẩm ---------- */
.dtitle { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dtitle h1 { font-size: 30px; letter-spacing: -.02em; }
.dtitle .blogo { background: #fff; border-radius: 10px; padding: 8px 14px; box-shadow: var(--ring); flex: none; }
.dtitle .blogo img { height: 24px; width: auto; }
.dtitle .blogo b { font-size: 14px; letter-spacing: .06em; }
.detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; background: #fff; border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-soft); border: 0 !important; }
.detail > *, .detail-more > * { min-width: 0; }
.gallery { display: grid; gap: 14px; align-content: start; }
.gallery .main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: #f1f1f3; }
.gallery .main .ph { position: absolute; inset: 0; }
.gallery .main .ph > img { object-fit: contain; }
.gallery .main .ph:not(.cut)::before { content: ""; position: absolute; inset: -30px; background: var(--u) center / cover; filter: blur(26px) brightness(1.05); opacity: .55; z-index: -1; }
.gallery .credit { font-size: 11.5px; color: var(--faint); }
.gallery .credit a { text-decoration: underline; }
.rent-cta { display: flex; align-items: center; gap: 14px; background: var(--char); color: #c9cbd0; border-radius: var(--r-lg); padding: 16px 18px; }
.rent-cta .ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--brand-hi); display: grid; place-items: center; flex: none; }
.rent-cta b { color: #fff; display: block; font-size: 15px; font-weight: 600; }
.rent-cta small { font-size: 13px; }
.rent-cta .btn { margin-left: auto; flex: none; }
.info { display: grid; gap: 16px; align-content: start; }
.info h4 { font-size: 15px; font-weight: 600; }
.hl-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.hl-specs li { display: flex; gap: 8px; align-items: flex-start; }
.hl-specs li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 8px; flex: none; }
.short { font-size: 14.5px; line-height: 1.7; color: var(--text); }
.pricebox2 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 18px 20px; background: var(--bg); border-radius: var(--r-lg); }
.pricebox2 b { color: var(--price); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pricebox2 s { color: var(--faint); font-size: 17px; font-weight: 500; }
.pricebox2 .off { background: var(--price); color: #fff; font-size: 13px; font-weight: 600; border-radius: 7px; padding: 3px 8px; }
.pricebox2 small { flex-basis: 100%; color: var(--muted); font-size: 13.5px; }
.pricebox2 small b { font-size: inherit; color: var(--ink); font-weight: 600; letter-spacing: 0; }
.note-ok { background: var(--brand-soft); border-radius: var(--r); padding: 11px 14px; font-size: 13.5px; color: #8a3d0f; line-height: 1.55; }
.giftbox { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.giftbox h4 { padding: 12px 16px; font-size: 14px; display: flex; gap: 8px; align-items: center; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.giftbox h4 .ic { color: var(--brand); }
.giftbox ul { list-style: none; margin: 0; padding: 6px 16px; }
.giftbox li { display: flex; gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; }
.giftbox li + li { border-top: 1px dashed var(--line-2); }
.giftbox li i { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); display: grid; place-items: center; color: var(--brand-lo); flex: none; }
.giftbox li i .ic { width: 15px; height: 15px; }
.buy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.buy .btn { height: 50px; }
.buy .full { grid-column: 1 / -1; height: 60px; flex-direction: column; gap: 3px; font-size: 16px; }
.buy .full small { font-weight: 400; font-size: 12.5px; opacity: .9; }
.support { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.support a, .support span { display: flex; gap: 8px; align-items: center; background: var(--bg); border-radius: var(--r); padding: 11px 14px; font-size: 13.5px; }
.support .ic { color: var(--brand-lo); width: 17px; height: 17px; }
.dtabs { position: sticky; top: calc(48px + env(safe-area-inset-top, 0px)); z-index: 30; background: rgba(246, 246, 247, .94); backdrop-filter: blur(8px); display: flex; gap: 6px; padding: 12px 0; margin-top: 28px; overflow-x: auto; scrollbar-width: none; }
.dtabs a { border-radius: 99px; padding: 8px 16px; font-size: 14px; font-weight: 500; white-space: nowrap; background: #fff; box-shadow: var(--ring); color: var(--text); }
.dtabs a:hover { color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.detail-more { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-top: 8px; align-items: start; }
.detail-more .box, .detail-more .panel { background: #fff; border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-soft); margin-top: 0; }
.detail-more h2 { font-size: 20px; margin-bottom: 14px; }
.detail-more h2 + p, .detail-more p { line-height: 1.75; font-size: 15px; }
.detail-more p + p { margin-top: 12px; }
.detail-more h3.sub { font-size: 17px; margin: 26px 0 12px; }
.specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs td { padding: 11px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.specs td:first-child { color: var(--muted); width: 42%; padding-right: 14px; }
.specs td:last-child { color: var(--ink); font-weight: 500; }
.specs tr:last-child td { border-bottom: 0; }
.faq details { border-bottom: 1px solid var(--line-2); padding: 14px 0; }
.faq details:first-child { border-top: 1px solid var(--line-2); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 8px; color: var(--muted); line-height: 1.65; }
.faq.inline details { border: 0; padding: 0; }
.faq.inline summary::after { display: none; }
.faq.inline summary { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.faq.inline summary .ic { color: var(--brand); }
.inbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inbox span { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: var(--r); padding: 11px 14px; font-size: 14px; }
.inbox .ic { color: var(--ok); width: 16px; height: 16px; }

/* ---------- Modal ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(12, 12, 14, .56); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .18s; backdrop-filter: blur(2px); }
.modal-wrap.show { opacity: 1; }
.modal { background: #fff; border-radius: var(--r-xl); width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; position: relative; transform: translateY(12px) scale(.98); transition: transform .2s; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .45); }
.modal-wrap.show .modal { transform: none; }
.modal.wide { width: min(800px, 100%); }
.modal-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1f1f3; display: grid; place-items: center; z-index: 2; color: var(--ink); }
.modal-x:hover { background: #e6e6e9; }
.m-head { padding: 24px 26px 16px; border-bottom: 1px solid var(--line-2); padding-right: 60px; }
.m-head h3 { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.m-head h3 .ic { color: var(--brand); }
.m-head p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.m-body { padding: 20px 26px 26px; display: grid; gap: 16px; }

/* Popup tư vấn */
.consult-top { background: var(--char); color: #fff; padding: 22px 26px; display: flex; gap: 16px; align-items: center; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-right: 60px; }
.consult-top .th { width: 92px; height: 70px; border-radius: 12px; overflow: hidden; flex: none; position: relative; background: #2a2a2d; display: grid; place-items: center; color: var(--brand-hi); }
.consult-top .th .ph { position: absolute; inset: 0; }
.consult-top .th > .ic { width: 28px; height: 28px; }
.consult-top small { color: var(--brand-hi); font-size: 12.5px; font-weight: 600; }
.consult-top h3 { color: #fff; font-size: 17px; margin: 2px 0 4px; line-height: 1.3; }
.consult-top .price b { color: #ffb48a; font-size: 17px; }
.consult-top .price s { color: #8d9097; }
.consult-top .sub { color: #8d9097; font-size: 12.5px; }
.modal:has(.consult-top) > .modal-x { background: rgba(255, 255, 255, .1); color: #fff; }
.modal:has(.consult-top) > .modal-x:hover { background: rgba(255, 255, 255, .2); }
.channels { display: grid; gap: 10px; }
.chn { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; width: 100%; transition: border-color .15s, background .15s; }
.chn:hover { border-color: var(--brand); background: var(--brand-soft); }
.chn > .ic { width: 40px; height: 40px; }
.chn .ci { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.chn .ci .ic { width: 20px; height: 20px; }
.chn b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
.chn small { color: var(--muted); font-size: 13px; display: block; }
.chn .go { margin-left: auto; color: var(--faint); }
.msgbox { background: var(--bg); border-radius: var(--r); padding: 12px 14px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.msgbox p { flex: 1; color: var(--text); }
.msgbox button { border: 0; background: #fff; border-radius: 8px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--brand-lo); display: inline-flex; gap: 6px; align-items: center; box-shadow: var(--ring); flex: none; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.success { text-align: center; padding: 30px 22px; display: grid; gap: 12px; justify-items: center; }
.success .big { width: 72px; height: 72px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.success .big .ic { width: 34px; height: 34px; }
.success h3 { font-size: 22px; }
.success p { color: var(--muted); max-width: 46ch; line-height: 1.6; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--bg); border-radius: 9px; padding: 7px 14px; font-weight: 700; color: var(--ink); font-size: 16px; letter-spacing: .06em; }

/* Giỏ / danh sách */
.cart-list { display: grid; gap: 10px; }
.cart-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: #fff; }
.cart-item .th { width: 72px; height: 54px; border-radius: 9px; overflow: hidden; position: relative; background: #f1f1f3; }
.cart-item .th .ph { position: absolute; inset: 0; }
.cart-item b { font-size: 14.5px; font-weight: 600; color: var(--ink); display: block; line-height: 1.35; }
.cart-item .price b { font-size: 15px; color: var(--price); }
.cart-item .x { border: 0; background: none; color: var(--faint); width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.cart-item .x:hover { background: var(--bad-soft); color: var(--bad); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--ink); }
.cart-total b { color: var(--price); font-size: 22px; }

/* Toast */
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 200; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--char); color: #fff; border-radius: 12px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; box-shadow: var(--sh-lg); animation: tin .2s ease; font-size: 14px; }
.toast .ic { color: #6ee7a0; }
.toast.err .ic { color: #fca5a5; }
.toast.out { opacity: 0; transform: translateY(8px); transition: all .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* Liên hệ, quy định chung */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rule { display: flex; gap: 14px; background: #fff; border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--ring); align-items: flex-start; line-height: 1.6; font-size: 14.5px; }
.rule > .ic { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-lo); flex: none; box-sizing: border-box; }
.rule b { color: var(--ink); font-weight: 600; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.contact h1 { font-size: 30px; letter-spacing: -.02em; }
.contact .lead { color: var(--muted); margin: 8px 0 20px; font-size: 15.5px; }
.contact .rules { grid-template-columns: 1fr; gap: 10px; }
.contact form { background: #fff; border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-soft); display: grid; gap: 14px; align-content: start; }
.contact form h2 { font-size: 20px; }

/* ---------- Cổng Cho thuê ---------- */
.rhero { margin-top: 24px; border-radius: var(--r-xl); overflow: hidden; position: relative; background: #121213; color: #c9cbd0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; padding: 52px 52px; align-items: center; isolation: isolate; }
.rhero .bgimg { position: absolute; inset: 0; z-index: -1; background: url(../img/hero.webp) right center / cover; }
.rhero .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 18, 19, .97) 0%, rgba(18, 18, 19, .86) 48%, rgba(18, 18, 19, .5) 100%); }
.r-eb { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand-hi); }
.r-eb .ic { width: 15px; height: 15px; }
.rhero h1 { color: #fff; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; letter-spacing: -.025em; margin: 14px 0 14px; }
.rhero h1 em { font-style: normal; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rhero .lead { font-size: 16px; line-height: 1.6; max-width: 44ch; }
.rhero .facts { display: flex; gap: 36px; margin-top: 30px; flex-wrap: wrap; }
.rhero .facts span { display: grid; gap: 2px; }
.rhero .facts b { color: #fff; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rhero .facts small { font-size: 13px; color: #8d9097; }
.finder { background: #fff; color: var(--text); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--sh-lg); display: grid; gap: 14px; }
.finder h3 { font-size: 18px; display: flex; gap: 8px; align-items: center; }
.finder h3 .ic { color: var(--brand); }
.rpick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rpick .field:last-child { grid-column: 1 / -1; }
.shiftpick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.shiftpick button { border: 1px solid var(--line); background: #fff; border-radius: 11px; padding: 9px 4px 8px; font-size: 12px; display: grid; gap: 2px; justify-items: center; transition: border-color .15s, background .15s; min-width: 0; }
.shiftpick button:hover:not([disabled]) { border-color: var(--ink); }
.shiftpick button .ic { width: 18px; height: 18px; color: var(--faint); }
.shiftpick button b { font-size: 13px; color: var(--ink); font-weight: 600; }
.shiftpick button small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shiftpick button.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.shiftpick button.on .ic { color: var(--brand-lo); }
.shiftpick button[disabled] { opacity: .4; cursor: not-allowed; }
.promo3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.promo3 .pr { background: #fff; border-radius: var(--r-lg); padding: 18px 20px; display: flex; gap: 14px; align-items: center; box-shadow: var(--ring); min-width: 0; }
.promo3 .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-lo); display: grid; place-items: center; flex: none; }
.promo3 .ico .ic { width: 21px; height: 21px; }
.promo3 span { min-width: 0; }
.promo3 small { display: block; font-size: 12.5px; color: var(--brand-lo); font-weight: 600; }
.promo3 b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo3 em { font-style: normal; font-size: 13px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cat { display: grid; gap: 10px; text-align: center; min-width: 0; }
.cat .ph { aspect-ratio: 16 / 11; border-radius: var(--r-lg); box-shadow: var(--ring); }
.cat:hover .ph > img { transform: scale(1.05); }
.cat b { font-size: 15px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat small { font-size: 13px; color: var(--muted); margin-top: -8px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.step { background: #fff; border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--ring); }
.step .n { width: 34px; height: 34px; border-radius: 10px; background: var(--char); color: var(--brand-hi); font-weight: 700; display: grid; place-items: center; margin-bottom: 14px; font-size: 15px; }
.step b { display: block; color: var(--ink); margin-bottom: 6px; font-weight: 600; font-size: 15.5px; }
.step p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Thẻ thuê */
.rcard .rp { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; row-gap: 0; }
.rcard .rp .lbl { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.rcard .rp b { font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rcard .rp small { font-size: 13px; color: var(--muted); white-space: nowrap; }
.avail { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avail i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px var(--ok-soft); }
.avail.lim i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.avail.no i { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.avail b { font-weight: 600; }
.avail span { color: var(--muted); }
.rcard .acts { grid-template-columns: minmax(0, 1fr) 38px; }
.rcard .acts .icbtn { width: 38px; height: 38px; padding: 0; }
.rcard.picked { box-shadow: 0 0 0 2px var(--brand), var(--sh-lg); }
.depo { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.depo .ic { width: 14px; height: 14px; }

/* Lịch máy */
.lm-bar { background: #fff; border-radius: var(--r-xl); padding: 20px 22px; box-shadow: var(--sh-soft); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: end; margin-bottom: 20px; }
.lm-bar h1 { grid-column: 1 / -1; font-size: 24px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lm-bar h1 small { font-size: 14px; color: var(--muted); font-weight: 400; }
.lm-bar .rpick { grid-template-columns: 170px 170px minmax(0, 1fr); }
.lm-bar .rpick .field:last-child { grid-column: auto; }
.lm-bar .shiftpick small { display: none; }
.lm-bar .shiftpick button { padding: 8px 4px; grid-auto-flow: column; gap: 6px; align-items: center; justify-content: center; }
.lm-bar .chk { white-space: nowrap; padding-bottom: 10px; }
.lm-bar .wk-note { grid-column: 1 / -1; }
.lm-filters { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

/* Lịch theo ngày */
.calwrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; }
.cal { display: grid; gap: 8px; align-content: start; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-head b { font-size: 16px; color: var(--ink); font-weight: 600; }
.cal-head button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-grid .dow { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 0; }
.cday { border: 1px solid var(--line); border-radius: 10px; padding: 5px; min-height: 56px; background: #fff; display: grid; gap: 4px; align-content: start; text-align: left; transition: border-color .12s; }
.cday:hover { border-color: var(--ink); }
.cday .d { font-size: 13px; font-weight: 600; color: var(--ink); }
.cday.past { opacity: .35; pointer-events: none; }
.cday.today { border-color: var(--brand); }
.cday.sel { background: var(--brand-soft); border-color: var(--brand); }
.cday.wk { background: #fcfaf8; }
.cday .sh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cday .sh i { height: 5px; border-radius: 3px; background: #a7dcbb; }
.cday .sh i.lim { background: #f4cc85; }
.cday .sh i.no { background: #ef9c9c; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 6px; border-radius: 3px; display: inline-block; }
.slotlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.slot { border: 1px solid var(--line); border-radius: 11px; padding: 9px 8px; background: #fff; text-align: center; font-size: 12.5px; line-height: 1.45; }
.slot b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.slot.ok:hover { border-color: var(--ink); }
.slot.no { background: #f6f6f7; color: var(--faint); cursor: not-allowed; }
.slot.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.usedlink { display: flex; gap: 10px; align-items: center; background: var(--bg); border-radius: var(--r); padding: 11px 14px; font-size: 13.5px; color: var(--ink); }
.usedlink .ic { color: var(--brand); width: 20px; height: 20px; flex: none; }
.usedlink b { color: var(--price); }

/* Bảng giá */
.tblwrap { overflow-x: auto; border-radius: var(--r-xl); background: #fff; box-shadow: var(--sh-soft); }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.ptable th { background: #fff; color: var(--muted); font-weight: 600; text-align: right; padding: 14px 16px; white-space: nowrap; font-size: 13px; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.ptable th:first-child { text-align: left; }
.ptable td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); text-align: right; font-variant-numeric: tabular-nums; }
.ptable td:first-child { text-align: left; }
.ptable tr.grp td { background: #fafafa; color: var(--ink); font-weight: 600; font-size: 13.5px; text-align: left; padding-block: 10px; }
.ptable tbody tr:not(.grp):hover td { background: #fcfbfa; }
.ptable td.all { color: var(--brand-lo); font-weight: 700; }
.ptable .nm { font-weight: 500; color: var(--ink); }
.ptable .nm small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }

/* Combo & Đặt lịch */
.kit { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.kit-step { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-soft); padding: 24px; margin-bottom: 18px; }
.kit-step h3 { font-size: 17px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.kit-step h3 .n { width: 30px; height: 30px; border-radius: 9px; background: var(--char); color: var(--brand-hi); font-size: 14px; display: grid; place-items: center; flex: none; }
.kit-step h3 small { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.kit-step h3 .ids-btn { margin-left: auto; }
.kopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kopt { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 8px; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; position: relative; transition: border-color .15s; }
.kopt:hover:not([disabled]) { border-color: var(--ink); }
.kopt[disabled] { opacity: .5; cursor: not-allowed; }
.kopt .th { width: 60px; height: 46px; border-radius: 8px; overflow: hidden; position: relative; background: #f1f1f3; }
.kopt .th .ph { position: absolute; inset: 0; }
.kopt b { font-size: 13px; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.kopt small { font-size: 12.5px; color: var(--brand-lo); font-weight: 600; }
.kopt.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.kopt.on::after { content: ""; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 2px #fff; }
.kopt .note { grid-column: 1 / -1; font-size: 11.5px; color: var(--warn); }
.summary { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-soft); position: sticky; top: 64px; overflow: hidden; }
.summary .hd { background: var(--char); color: #fff; padding: 18px 22px; }
.summary .hd h3 { color: #fff; font-size: 17px; }
.summary .hd small { color: #8d9097; font-size: 13px; }
.summary .bd { padding: 18px 22px 22px; display: grid; gap: 12px; }
.sline { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sline span { color: var(--muted); }
.sline b { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; font-weight: 600; }
.sline.total { border-top: 1px solid var(--line-2); padding-top: 14px; font-size: 15px; align-items: baseline; }
.sline.total span { color: var(--ink); font-weight: 600; }
.sline.total b { color: var(--price); font-size: 24px; font-weight: 700; }
.kitems { display: grid; gap: 10px; }
.kitems > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.kitems > div span { min-width: 0; color: var(--ink); }
.kitems > div b { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.kitems .hint { font-size: 12.5px; }
.pay { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.qrbox { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.qrbox .qr { width: 100%; max-width: 160px; height: auto; }
.qrbox small { font-size: 11.5px; color: var(--muted); }
.uploads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.upl { border: 1.5px dashed #d4d7dc; border-radius: var(--r-lg); padding: 16px 12px; display: grid; justify-items: center; gap: 4px; text-align: center; cursor: pointer; background: #fafafb; transition: border-color .15s, background .15s; min-height: 150px; align-content: center; }
.upl:hover { border-color: var(--brand); background: var(--brand-soft); }
.upl .ic { width: 26px; height: 26px; color: var(--faint); margin-bottom: 4px; }
.upl b { font-size: 14px; color: var(--ink); font-weight: 600; }
.upl b i { color: var(--price); font-style: normal; }
.upl small { font-size: 12.5px; color: var(--muted); }
.upl.has { border-style: solid; border-color: #9fd6b5; background: var(--ok-soft); }
.upl img { width: 100%; max-height: 92px; object-fit: cover; border-radius: 9px; margin-bottom: 4px; }
.mini-rules { border-top: 1px solid var(--line-2); padding-top: 14px; font-size: 13px; }
.mini-rules b { color: var(--ink); font-weight: 600; }
.mini-rules ul { margin: 8px 0 10px; padding-left: 18px; color: var(--text); display: grid; gap: 4px; }
.mini-rules a { color: var(--brand-lo); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.fcart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; background: rgba(20, 20, 21, .96); backdrop-filter: blur(10px); color: #c9cbd0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 30px rgba(0, 0, 0, .25); }
.fc-in { display: flex; align-items: center; gap: 14px; }
.fc-n { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-grad); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; }
.fc-t { min-width: 0; flex: 1; display: grid; }
.fc-t b { color: #fff; font-size: 14.5px; font-weight: 600; }
.fc-t small { color: #8d9097; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.fc-p { color: #fff; font-size: 19px; font-weight: 700; }
.fcart .btn-line { background: transparent; color: #eee; border-color: #3a3a3d; }
body.has-fcart { padding-bottom: 80px; }
body.has-fcart .floatbar, body.has-fcart .totop { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

/* Thủ tục */
.docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.doc { background: #fff; border-radius: var(--r-lg); padding: 22px 20px; box-shadow: var(--ring); display: flex; flex-direction: column; }
.doc .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--char); color: var(--brand-hi); display: grid; place-items: center; margin-bottom: 14px; }
.doc .ico .ic { width: 22px; height: 22px; }
.doc b { display: block; color: var(--ink); font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.doc p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.doc .req { align-self: flex-start; margin-top: auto; padding-top: 0; font-size: 12px; font-weight: 600; color: var(--bad); background: var(--bad-soft); border-radius: 7px; padding: 3px 9px; }
.doc p + .req { margin-top: 14px; }
.qr-band { background: var(--char); color: #c9cbd0; border-radius: var(--r-xl); padding: 28px; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center; }
.qr-band h3 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.qr-band h4 { color: var(--brand-hi); margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.qr-band ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.qr-band b { color: #fff; }
.ptable td.nm small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .catbar li > a { padding: 0 10px; font-size: 13.5px; }
  .h-act.hotline { display: none; }
  .cat-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 1024px) {
  .catbar { display: none; }
  .burger { display: grid; place-items: center; margin-left: -8px; }
  .header { position: sticky; top: env(safe-area-inset-top, 0px); }
  .header .bar { gap: 14px; height: 64px; }
  .logo img { width: 40px; height: 40px; }
  .logo .wm b { font-size: 18px; }
  .logo .wm small { display: none; }
  .logo .wm i { margin-top: 4px; }
  .h-act .lbl { display: none; }
  .h-actions { gap: 10px; }
  .grid, .grid.g4, .box .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust > div:nth-child(3) { border-left: 0; }
  .trust > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .cat-tiles { grid-template-columns: repeat(7, 104px); overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stores { grid-template-columns: 1fr 1fr; }
  .fb-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer .top { grid-template-columns: 1fr 1fr; }
  .footer .top .about { grid-column: 1 / -1; }
  .footer .nlrow .wrap { grid-template-columns: 1fr; }
  .listing { grid-template-columns: 1fr; }
  .filters { display: none; position: static; max-height: none; }
  .filters.show { display: block; }
  .filter-btn { display: inline-flex; }
  .detail, .detail-more { grid-template-columns: 1fr; }
  .rhero { grid-template-columns: 1fr; padding: 36px 28px; }
  .steps, .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit { grid-template-columns: 1fr; }
  .summary { position: static; }
  .band { grid-template-columns: 1fr; }
  .band .pic { min-height: 200px; }
  .duo { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(5, 150px); overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .promo3 { grid-template-columns: 1fr; }
  .lm-bar { grid-template-columns: 1fr; }
  .lm-bar .rpick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lm-bar .rpick .field:last-child { grid-column: 1 / -1; }
  .lm-bar .chk { padding-bottom: 0; }
  .qr-band { grid-template-columns: 1fr; }
  .dtabs { top: calc(64px + env(safe-area-inset-top, 0px)); }
  .filters { top: 80px; }
  .hero1 .inner { padding-top: 48px; }
  .calwrap { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 14.5px; }
  .wrap { padding-inline: 16px; }
  .header .bar { flex-wrap: wrap; height: auto; padding-block: 10px 12px; row-gap: 10px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search form { height: 42px; border-radius: 11px; }
  .topbar .wrap { justify-content: center; }
  .topbar nav, .topbar .hide-m, .topbar .promo .sep { display: none; }
  .sec, .box, .duo, .band { margin-top: 40px; }
  .sec-head h2, .box-head h2 { font-size: 21px; }
  .box-head .tabs { margin-left: 0; order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .box-head { margin-bottom: 14px; }
  .grid, .grid.g4, .grid.g3, .box .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard { border-radius: 14px; }
  .pcard .media { border-radius: 14px 14px 0 0; }
  .pcard .body { padding: 10px 11px 12px; gap: 6px; }
  .pcard h3 { font-size: 13.5px; }
  .pcard .meta, .pcard .brand { font-size: 11.5px; }
  .price b { font-size: 15.5px; }
  .price s { font-size: 12px; }
  .pcard .acts { grid-template-columns: 1fr; }
  .pcard .acts .btn { height: 36px; font-size: 13px; }
  .pcard .acts .btn-line { display: none; }
  .rcard .acts { grid-template-columns: minmax(0, 1fr) 36px; }
  .rcard .acts .btn-line { display: grid; }
  .rcard .rp b { font-size: 16px; }
  .avail { font-size: 12px; }
  .avail span { display: none; }
  .pcard .heart { opacity: 1; transform: none; width: 32px; height: 32px; top: 8px; right: 8px; }
  .badge-off, .badge-hot { font-size: 11px; padding: 5px 7px; top: 8px; left: 8px; }
  .badge-hot { top: auto; bottom: 8px; }
  .hero1 .slider, .hero1 .inner { min-height: 0; }
  .hero1 .inner { grid-template-columns: 1fr; padding: 36px 16px 92px; }
  .hero1 .pimg { display: none; }
  .hero1 h2 { font-size: 30px; }
  .hero1 .lead { font-size: 15px; }
  .hero1 .slide .bgimg::after { background: linear-gradient(90deg, rgba(18, 18, 19, .94), rgba(18, 18, 19, .75)); }
  .htabs { gap: 12px; padding-inline: 16px; bottom: 22px; }
  .htabs button span { display: none; }
  .htabs button b { font-size: 12.5px; }
  .s-nav { display: none; }
  .trust { margin-top: 16px; }
  .trust > div { padding: 14px; gap: 10px; }
  .trust .ico { width: 34px; height: 34px; border-radius: 10px; }
  .trust .ico .ic { width: 17px; height: 17px; }
  .trust b { font-size: 13.5px; }
  .trust small { font-size: 12px; }
  .cat-tiles { grid-template-columns: repeat(7, 84px); gap: 10px; margin-top: 32px; }
  .cat-tiles a { font-size: 12.5px; }
  .cat-tiles .ph { border-radius: 16px; }
  .promo-card { min-height: 200px; padding: 22px; }
  .promo-card h3 { font-size: 21px; }
  .brandbox { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
  .brandbox a { height: 52px; padding: 8px 12px; }
  .box.dark { padding: 18px 14px; border-radius: 18px; }
  .cd span { min-width: 32px; height: 30px; font-size: 13.5px; }
  .news, .stores { grid-template-columns: 1fr; }
  .fb-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer { margin-top: 48px; }
  .footer .top { grid-template-columns: 1fr; gap: 28px; }
  .footer .nl { flex-direction: column; }
  .toolbar h1 { font-size: 21px; flex-basis: 100%; }
  .dtitle h1 { font-size: 22px; }
  .dtitle .blogo { display: none; }
  .detail { padding: 14px; gap: 20px; border-radius: 18px; }
  .hl-specs, .support, .inbox, .buy { grid-template-columns: 1fr; }
  .pricebox2 b { font-size: 26px; }
  .buy .btn { white-space: normal; }
  .rent-cta { flex-wrap: wrap; }
  .rent-cta .btn { margin-left: 0; width: 100%; }
  .detail-more .box, .detail-more .panel { padding: 18px; border-radius: 18px; }
  .row2 { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .contact form { padding: 20px; }
  .rhero { padding: 28px 20px; margin-top: 12px; border-radius: 18px; }
  .rhero h1 { font-size: 30px; }
  .rhero .facts { gap: 22px; margin-top: 22px; }
  .rhero .facts b { font-size: 21px; }
  .finder { padding: 18px; }
  .steps, .docs { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(5, 130px); gap: 12px; }
  .shiftpick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shiftpick button small { display: none; }
  .slotlist { grid-template-columns: 1fr 1fr; }
  .cday { min-height: 44px; padding: 4px; }
  .lm-bar { padding: 16px; }
  .lm-bar .chk { white-space: normal; }
  .kit-step { padding: 18px 16px; border-radius: 18px; }
  .kit-step h3 .ids-btn { margin-left: 0; }
  .pay { grid-template-columns: 1fr; }
  .uploads { grid-template-columns: 1fr; }
  .upl { min-height: 104px; }
  .m-head, .m-body { padding-inline: 18px; }
  .consult-top { padding: 18px; padding-right: 54px; }
  .floatbar { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .floatbar a, .floatbar .fi { width: 42px; height: 42px; }
  .floatbar .fi .ic { width: 42px; height: 42px; }
  .floatbar .f-fb, .floatbar a small { display: none; }
  body:has(.floatbar) .totop, .totop { right: 62px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .mbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 0 7px; font-size: 11px; font-weight: 500; color: var(--muted); }
  .mbar a .ic { width: 21px; height: 21px; }
  .mbar a.on { color: var(--brand-lo); }
  .mbar a.cta { color: var(--brand-lo); }
  .mbar a.cta .ic { color: #fff; background: var(--brand-grad); border-radius: 8px; width: 30px; height: 22px; padding: 3px 6px; box-sizing: border-box; }
  body { padding-bottom: 60px; }
  .fcart { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
  .fc-t small, .fcart .btn-line { display: none; }
  body.has-fcart { padding-bottom: 136px; }
  body.has-fcart .floatbar, body.has-fcart .totop { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  .h-act.hide-s { display: none; }
  input[type="date"].inp { min-width: 0; padding: 0 10px; font-size: 14px; }
  .rhero .facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 22px; }
  .rhero .facts small { font-size: 12px; }
  .sec-head, .box-head { flex-wrap: nowrap; align-items: flex-end; }
  .sec-head h2, .box-head .ttl { min-width: 0; }
  .sec-head .more, .box-head .more { flex: none; }
  .box-head { flex-wrap: wrap; }
  .sec-head .hint { display: none; }
  .rcard .rp small { display: none; }
  .trust small { display: none; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .tabs::-webkit-scrollbar, .lm-filters .chips::-webkit-scrollbar { display: none; }
  .lm-filters { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
  .lm-filters > * { max-width: 100%; min-width: 0; }
  .lm-filters .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .lm-filters .chip { flex: none; }
  .lm-bar .shiftpick button { grid-auto-flow: row; gap: 2px; }
  .buy .full small { display: none; }
  .buy .full { height: 54px; }
}

/* ===== Quét CCCD (QR + nhận dạng chữ) ===== */
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ids-btn { gap: 6px; }
.ids-btn .ic { width: 16px; height: 16px; }
.ids-done { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; margin: 0 0 12px; border-radius: var(--r); background: var(--ok-soft); color: #11632f; font-size: 13px; }
.ids-done .ic { width: 16px; height: 16px; flex: none; }
.ids-done button { margin-left: auto; background: none; border: 0; color: #11632f; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }
.inp.filled { background: var(--ok-soft); border-color: var(--ok); transition: background .6s, border-color .6s; }
.inp.miss { border-color: var(--warn); background: var(--warn-soft); }
.consent { align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; }
.consent input { margin-top: 3px; flex: none; }
.consent a { color: var(--brand-lo); }

.ids-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ids-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 18px 16px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--card); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ids-opt:hover, .ids-opt:focus-within { border-color: var(--brand); box-shadow: 0 6px 18px rgba(232, 119, 46, .14); transform: translateY(-1px); }
.ids-opt .ic { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-lo); box-sizing: content-box; }
.ids-opt b { font-size: 15px; color: var(--ink); }
.ids-opt small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
#idsBody .hint { display: flex; gap: 6px; align-items: flex-start; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
#idsBody .hint .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
#idsBody .notice { margin-bottom: 12px; }

.ids-cam { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; background: #0d0d0e; }
.ids-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ids-frame { position: absolute; inset: 14% 22%; border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); pointer-events: none;
  background:
    linear-gradient(var(--brand-hi), var(--brand-hi)) top left / 26px 3px no-repeat, linear-gradient(var(--brand-hi), var(--brand-hi)) top left / 3px 26px no-repeat,
    linear-gradient(var(--brand-hi), var(--brand-hi)) top right / 26px 3px no-repeat, linear-gradient(var(--brand-hi), var(--brand-hi)) top right / 3px 26px no-repeat,
    linear-gradient(var(--brand-hi), var(--brand-hi)) bottom left / 26px 3px no-repeat, linear-gradient(var(--brand-hi), var(--brand-hi)) bottom left / 3px 26px no-repeat,
    linear-gradient(var(--brand-hi), var(--brand-hi)) bottom right / 26px 3px no-repeat, linear-gradient(var(--brand-hi), var(--brand-hi)) bottom right / 3px 26px no-repeat; }
.ids-frame i { position: absolute; left: 6%; right: 6%; height: 2px; top: 10%; background: linear-gradient(90deg, transparent, var(--brand-hi), transparent); box-shadow: 0 0 10px var(--brand-hi); animation: idsScan 2.2s ease-in-out infinite alternate; }
@keyframes idsScan { to { top: 88%; } }
@media (prefers-reduced-motion: reduce) { .ids-frame i { animation: none; top: 50%; } }
.ids-tip { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 13px; text-align: center; }
.ids-tip.warn { background: rgba(217, 119, 6, .92); }
.ids-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }

.ids-work { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; }
.ids-work img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.ids-work > div { min-width: 0; display: grid; gap: 8px; }
.ids-bar { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.ids-bar i { display: block; height: 100%; background: var(--brand-grad); border-radius: inherit; transition: width .3s; }

.ids-review { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.ids-review > div:first-child { display: grid; gap: 10px; }
.ids-review > div:first-child img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.ids-review .pill { justify-self: start; white-space: normal; line-height: 1.35; }
.ids-qrok { display: grid; justify-items: center; gap: 4px; padding: 22px 12px; border-radius: var(--r-lg); background: var(--ok-soft); color: #11632f; text-align: center; }
.ids-qrok .ic { width: 34px; height: 34px; }
.ids-qrok small { color: var(--muted); }
.ids-fields { display: grid; gap: 10px; min-width: 0; }
.ids-fields .field { margin: 0; }
.ids-fields .row2 { gap: 10px; }

@media (max-width: 640px) {
  .ids-choose, .ids-review, .ids-work { grid-template-columns: 1fr; }
  .ids-work img, .ids-review > div:first-child img { max-height: 160px; width: auto; justify-self: start; }
  .ids-frame { inset: 18% 10%; }
  .ids-actions .btn { flex: 1 1 auto; }
}
.kit-step h3 { flex-wrap: wrap; }
.kit-step h3 .ids-btn { margin-left: auto; }

/* Quét CCCD – máy tính: 3 lựa chọn, kéo thả, gương webcam, quét bằng điện thoại */
.ids-choose.three { grid-template-columns: repeat(3, 1fr); }
.ids-opt { position: relative; }
.ids-opt.hot { border-color: var(--brand); background: linear-gradient(180deg, var(--brand-soft), var(--card) 70%); }
.ids-opt em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--brand-grad); color: #fff; }
.ids-drop { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 14px 16px; border: 1.5px dashed #d6d9de; border-radius: var(--r-lg); color: var(--muted); font-size: 13px; text-align: center; }
.ids-drop .ic { width: 18px; height: 18px; flex: none; color: var(--brand); }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--card); font: 600 12px/1.5 inherit; color: var(--ink); text-align: center; }
.modal.ids-modal { position: relative; }
.modal.ids-modal.ids-dragging::after { content: "Thả ảnh CCCD vào đây"; position: absolute; inset: 8px; display: grid; place-items: center; border: 2px dashed var(--brand); border-radius: var(--r-lg); background: rgba(253, 241, 231, .94); color: var(--brand-lo); font-size: 18px; font-weight: 700; z-index: 5; pointer-events: none; }
.ids-cam video.mirror { transform: scaleX(-1); }
.ids-flip { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font: 500 12.5px/1 inherit; cursor: pointer; }
.ids-flip .ic { width: 14px; height: 14px; }
.ids-flip:hover { background: rgba(0, 0, 0, .75); }

.ids-phone { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.ids-qr { padding: 10px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh); line-height: 0; }
.ids-qr svg { width: 216px; height: 216px; max-width: 100%; }
.ids-steps { min-width: 0; display: grid; gap: 14px; }
.ids-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text); }
.ids-wait { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--bg); font-size: 13.5px; color: var(--muted); }
.ids-wait .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; animation: idsPulse 1.2s ease-in-out infinite; }
.ids-wait.on { background: var(--ok-soft); color: #11632f; }
.ids-wait.on .dot { background: var(--ok); }
.ids-wait.off { background: var(--warn-soft); color: #7c4a03; }
.ids-wait.off .dot { animation: none; background: var(--warn); }
@keyframes idsPulse { 50% { transform: scale(.55); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ids-wait .dot { animation: none; } }
.ids-link { display: flex; gap: 8px; flex-wrap: wrap; }
.ids-link .inp { flex: 1 1 200px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.ids-note { margin-top: 14px; }
.ids-note code { font-size: 12px; background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; }
.lnk { background: none; border: 0; padding: 0; color: var(--brand-lo); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ids-miss { color: #7c4a03; font-size: 12.5px; line-height: 1.45; }
.ids-fields label small { font-weight: 400; color: var(--muted); }

/* Trang điện thoại quet-cccd.html */
.scan-m { background: var(--bg); min-height: 100vh; }
.scan-m-top { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background: var(--char); color: #fff; }
.scan-m-top img { border-radius: 10px; }
.scan-m-top b { display: block; font-family: var(--f-cond); font-size: 18px; letter-spacing: .4px; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scan-m-top small { color: #c9ccd1; font-size: 12.5px; }
.scan-m-main { padding: 20px 16px 40px; max-width: 520px; margin: 0 auto; }
.scan-m-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 24px 20px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.scan-m-card h1 { font-size: 21px; }
.scan-m-card p { margin: 0; color: var(--muted); }
.scan-m-card .btn-lg { width: 100%; }
.scan-m-card .hint { display: flex; gap: 6px; font-size: 12.5px; text-align: left; }
.scan-m-card .hint .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.scan-m-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-lo); }
.scan-m-ic .ic { width: 30px; height: 30px; }
.scan-m-ic.ok { background: var(--ok-soft); color: var(--ok); }
.scan-m-ic.bad { background: var(--bad-soft); color: var(--bad); }
.scan-m-steps { margin: 0; padding-left: 20px; text-align: left; display: grid; gap: 6px; justify-self: stretch; }

@media (max-width: 860px) { .ids-choose.three { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ids-phone { grid-template-columns: 1fr; justify-items: center; } .ids-drop { display: none; } }
.ptable td.as { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ---------- Mobile v2: gọn, không che nội dung ---------- */
@media (max-width: 680px) {
  .floatbar { right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .floatbar a:not(:nth-child(2)) { display: none; }
  .floatbar a, .floatbar .fi, .floatbar .fi .ic { width: 44px; height: 44px; }
  .totop, body:has(.floatbar) .totop { display: none; }
  .trust { display: flex; overflow-x: auto; scrollbar-width: none; border-radius: 14px; }
  .trust::-webkit-scrollbar { display: none; }
  .trust > div { flex: none; padding: 12px 16px; }
  .trust > div + div { border-left: 1px solid var(--line-2); border-top: 0 !important; }
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .rhero { padding: 24px 18px 18px; gap: 18px; }
  .rhero h1 { font-size: 26px; margin: 8px 0 0; }
  .rhero .lead, .rhero .facts, .rhero .r-eb { display: none; }
  .kit-step h3 .ids-btn { flex-basis: 100%; height: 42px; }
  .tblwrap { background: none; box-shadow: none; overflow: visible; }
  .ptable { min-width: 0; display: block; }
  .ptable thead { display: none; }
  .ptable tbody { display: grid; gap: 10px; }
  .ptable tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-radius: 14px; box-shadow: var(--ring); padding: 12px 14px; gap: 8px 6px; }
  .ptable tr.grp { background: none; box-shadow: none; padding: 8px 2px 0; }
  .ptable tr.grp td { background: none; padding: 0; font-size: 15px; }
  .ptable td { display: block; border: 0; padding: 0; text-align: left; font-size: 14px; font-weight: 600; color: var(--ink); }
  .ptable td:first-child { grid-column: 1 / -1; }
  .ptable td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
  .ptable td.dp, .ptable td.as { grid-column: span 2; border-top: 1px solid var(--line-2); padding-top: 8px; }
  .ptable td.as { white-space: normal; font-size: 13px; color: var(--text); }
  .ptable tbody tr:not(.grp):hover td { background: none; }
}
@media (max-width: 680px) {
  .ptable td.nm { white-space: normal; }
  .ptable td.tg { grid-column: 1 / -1; }
  .ptable td.tg:empty { display: none; }
  .ptable td[data-l="Giấy tờ"] { grid-column: span 2; border-top: 1px solid var(--line-2); padding-top: 8px; font-size: 13px; }
}

/* ===== v6 · So sánh, định giá thu cũ, trả góp, combo gợi ý ===== */
.pcard .cmpb { position: absolute; z-index: 3; top: 56px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s, background .15s; }
.pcard.rcard .cmpb, .pcard.rentc .cmpb { top: 12px; }
.pcard:hover .cmpb, .pcard .cmpb.on, .pcard .cmpb:focus-visible { opacity: 1; transform: none; }
.pcard .cmpb.on { background: var(--char); color: var(--brand-hi); }
.pcard .cmpb .ic { width: 17px; height: 17px; }
.cmpbar { position: fixed; left: 20px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 57; display: flex; align-items: center; gap: 12px; background: rgba(22, 23, 26, .96); backdrop-filter: blur(10px); color: #fff; padding: 10px 10px 10px 12px; border-radius: 18px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5); max-width: calc(100% - 110px); animation: cbIn .22s ease-out; }
@keyframes cbIn { from { opacity: 0; transform: translateY(12px); } }
.cmpbar .cb-th { display: flex; gap: 6px; flex: none; }
.cmpbar .t { flex: none; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; position: relative; background: #2d2e32; display: grid; place-items: center; color: #6c6e74; }
.cmpbar .t .ph { position: absolute; inset: 0; }
.cmpbar .t.empty { border: 1.5px dashed #46474c; background: transparent; }
.cmpbar .t.empty .ic { width: 16px; height: 16px; }
.cmpbar .t button { position: absolute; top: 2px; right: 2px; z-index: 2; width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; display: grid; place-items: center; padding: 0; }
.cmpbar .t button .ic { width: 11px; height: 11px; }
.cmpbar .cb-tx { display: grid; gap: 1px; min-width: 0; }
.cmpbar .cb-tx b { font-size: 14px; white-space: nowrap; }
.cmpbar .cb-tx small { font-size: 12px; color: #a3a5ab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmpbar .btn[disabled] { opacity: .45; }
.cmpbar .cb-x { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: #8d8f95; display: grid; place-items: center; flex: none; }
.cmpbar .cb-x:hover { color: #fff; background: #2d2e32; }
body.has-fcart .cmpbar { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.modal.cmpm { width: min(980px, 100%); }
.cmp-wrap { overflow-x: auto; margin: 0 -6px; }
.cmp-t { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; min-width: 560px; }
.cmp-t th, .cmp-t td { padding: 11px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.cmp-t td:first-child, .cmp-t th:first-child { width: 150px; color: var(--muted); font-weight: 500; font-size: 13px; }
.cmp-t thead th { border-bottom: 0; padding-bottom: 6px; }
.cmp-p { display: grid; gap: 8px; position: relative; }
.cmp-p .ph { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #eeeef0; }
.cmp-p b { font-size: 14.5px; line-height: 1.35; text-wrap: balance; }
.cmp-rm { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.cmp-rm .ic { width: 14px; height: 14px; }
.cmp-t .best { color: var(--brand-lo); font-weight: 700; }
.cmp-t td s { color: var(--faint); }
.cmp-sp { margin: 0; padding-left: 16px; display: grid; gap: 3px; font-size: 13px; }
.cmp-t tr.acts td { border-bottom: 0; padding-top: 14px; }
.cmp-t tr.acts td .btn { margin: 0 6px 6px 0; }
.lnk { background: none; border: 0; padding: 0; color: var(--brand-lo); font-weight: 600; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.support { grid-template-columns: repeat(3, auto); justify-content: start; }
.support .lnk { display: flex; gap: 8px; align-items: center; background: var(--bg); border-radius: var(--r); padding: 11px 14px; font-size: 13.5px; text-decoration: none; color: var(--ink); font-weight: 500; }
.support .lnk:hover { color: var(--brand-lo); }
.support .lnk .ic { color: var(--brand-lo); width: 17px; height: 17px; }
.buy .btn-soft.full { grid-column: 1 / -1; }
/* Trả góp */
.inst { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 12px; scroll-margin-top: 140px; }
.inst .in-hd { display: grid; gap: 2px; }
.inst .in-hd b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.inst .in-hd b .ic { color: var(--brand); width: 18px; height: 18px; }
.inst .in-hd small { color: var(--muted); font-size: 12.5px; }
.inst .in-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.inst .in-row > span { width: 72px; font-size: 13px; color: var(--muted); font-weight: 500; }
.iseg { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.iseg button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.iseg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.in-out { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: center; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.in-out div { display: grid; gap: 1px; min-width: 0; }
.in-out small { font-size: 12px; color: var(--muted); }
.in-out b { font-size: 15px; white-space: nowrap; }
.in-out .hl b { color: var(--price); font-size: 17px; }
/* Định giá thu cũ */
.ti { display: grid; gap: 14px; }
.ti .lb { font-size: 13px; font-weight: 600; }
.ti-cond { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ti-cond label { display: flex; cursor: pointer; }
.ti-cond input { position: absolute; opacity: 0; pointer-events: none; }
.ti-cond span { flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.35; transition: border-color .15s, background .15s; }
.ti-cond input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-lo); font-weight: 600; }
.ti-cond input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ti-chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.ti-chk input { margin-top: 3px; accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.ti-chk em { font-style: normal; color: var(--ok); font-weight: 600; margin-left: 4px; }
.ti-out { min-height: 74px; }
.ti-ph { height: 74px; border: 1.5px dashed var(--line); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.ti-ph .ic { width: 18px; height: 18px; }
.ti-res { display: flex; gap: 14px; align-items: center; background: var(--char); color: #fff; border-radius: 14px; padding: 12px 14px; }
.ti-res .th { width: 64px; height: 50px; border-radius: 10px; overflow: hidden; position: relative; flex: none; background: #2d2e32; }
.ti-res .th .ph { position: absolute; inset: 0; }
.ti-res > div { display: grid; gap: 2px; min-width: 0; }
.ti-res small { color: #a3a5ab; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-res b.num { font-size: 22px; color: var(--brand-hi); letter-spacing: -.01em; }
.ti-up { font-size: 12.5px; color: #d8d9dc; display: flex; gap: 6px; align-items: center; }
.ti-up .ic { width: 14px; height: 14px; color: var(--brand-hi); }
.ti .hint { margin: 0; display: flex; gap: 6px; }
.ti .hint .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
/* Combo gợi ý */
.presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.preset { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-soft), var(--ring); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: box-shadow .2s, transform .2s; }
.preset:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .25), var(--ring); }
.pr-hd { display: flex; gap: 10px; align-items: center; min-width: 0; }
.pr-hd .ico { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-lo); display: grid; place-items: center; flex: none; }
.pr-hd .ico .ic { width: 19px; height: 19px; }
.pr-hd > span:last-child { display: grid; min-width: 0; }
.pr-hd b { font-size: 15px; white-space: nowrap; }
.pr-hd small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-th { display: flex; gap: 6px; }
.pr-th span { flex: 1; aspect-ratio: 1; border-radius: 10px; overflow: hidden; position: relative; background: #eeeef0; min-width: 0; }
.pr-th .ph { position: absolute; inset: 0; }
.preset ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2, #3a3b40); flex: 1; }
.preset li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; position: relative; }
.preset li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.pr-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.pr-ft > span { display: grid; min-width: 0; }
.pr-ft b { font-size: 17px; color: var(--price); }
.pr-ft small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.qrbox.real { border-color: var(--brand); }
.qrbox.real small b { color: var(--brand-lo); }
@media (max-width: 1180px) { .presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .pcard .cmpb { opacity: 1; transform: none; width: 32px; height: 32px; top: 46px; right: 8px; }
  .pcard.rcard .cmpb, .pcard.rentc .cmpb { top: 8px; }
  .cmpbar { left: 10px; right: 10px; max-width: none; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); gap: 8px; padding: 7px 7px 7px 8px; border-radius: 14px; }
  .cmpbar .t { width: 36px; height: 36px; flex: none; }
  .cmpbar .t.empty { display: none; }
  .cmpbar .cb-tx { flex: 1; }
  .cmpbar .cb-tx small { display: none; }
  .cmpbar .cb-tx b { font-size: 13px; }
  .cmpbar .cb-x { width: 30px; height: 30px; }
  body.has-cmp .floatbar, body.has-cmp .totop { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
  body.has-fcart .cmpbar { bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  body.has-fcart.has-cmp .floatbar, body.has-fcart.has-cmp .totop { bottom: calc(192px + env(safe-area-inset-bottom, 0px)); }
  .cmp-t { min-width: 0; font-size: 13px; }
  .cmp-t td:first-child, .cmp-t th:first-child { width: 84px; font-size: 12px; padding-left: 4px; }
  .cmp-t.c3 { min-width: 520px; }
  .cmp-t th, .cmp-t td { padding: 9px 8px; }
  .cmp-t tr.acts td .btn { width: 100%; margin: 0 0 6px; padding-inline: 6px; }
  .support { grid-template-columns: 1fr 1fr; }
  .support a { grid-column: 1 / -1; }
  .in-out { grid-template-columns: 1fr 1.4fr; }
  .in-out div:nth-child(3) { display: none; }
  .inst .in-row > span { width: 100%; }
  .in-out .btn { grid-column: 1 / -1; }
  .ti-cond { grid-template-columns: 1fr; }
  .presets { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; gap: 12px; scrollbar-width: none; }
  .presets::-webkit-scrollbar { display: none; }
  .preset { flex: 0 0 76%; scroll-snap-align: start; }
}

/* ===== v7 · Cho thuê: menu mới, Đặt lịch thuê, xếp hạng, feedback, chờ ngân hàng báo có · Bán: kiểm tra 30 điểm ===== */
.h-note { flex: 1; display: flex; align-items: center; gap: 12px; color: #c9cbd0; min-width: 0; }
.h-note > .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: var(--brand-hi); flex: none; }
.h-note span { display: grid; min-width: 0; }
.h-note b { color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap; }
.h-note small { font-size: 12.5px; color: #9a9ca2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-rent .catbar li > a { padding: 0 13px; }
/* Trang chủ thuê: lối vào 4 mục */
.go4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.go4 .go { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-soft), var(--ring); transition: transform .2s, box-shadow .2s; min-width: 0; }
.go4 .go:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .25), var(--ring); }
.go4 .go > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }
.go4 .go b { color: var(--ink); font-size: 15px; font-weight: 600; }
.go4 .go small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.go4 .go > .ic { width: 18px; height: 18px; color: var(--faint); flex: none; }
.go4 .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--brand-soft); color: var(--brand-lo); display: grid; place-items: center; flex: none; }
.go4 .ico .ic { width: 22px; height: 22px; }
/* Đầu trang chung */
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.pg-head h1 { font-size: 28px; letter-spacing: -.02em; }
.pg-head p { color: var(--muted); margin-top: 6px; font-size: 14.5px; }
/* Đặt lịch thuê */
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 16px; }
.bk-head h1 { font-size: 28px; letter-spacing: -.02em; }
.bk-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--muted); }
.bk-steps li { display: flex; align-items: center; gap: 7px; }
.bk-steps i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: #e7e8ea; color: var(--muted); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.bk-steps li.on { color: var(--ink); font-weight: 600; }
.bk-steps li.on i { background: var(--brand); color: #fff; }
.lm-search { flex: 0 1 440px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 16px; background: #fff; border-radius: 14px; box-shadow: var(--sh-soft), 0 0 0 1.5px var(--brand); }
.lm-search > .ic { width: 20px; height: 20px; color: var(--brand-lo); flex: none; }
.lm-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15px; background: transparent; height: 100%; }
.lm-search button { border: 0; background: #f1f1f3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.lm-bar h2 { grid-column: 1 / -1; font-size: 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lm-bar h2 small { font-size: 14px; color: var(--muted); font-weight: 400; }
/* Xếp hạng thuê nhiều */
.rk-tabs { margin-bottom: 14px; flex-wrap: wrap; }
.rank-wrap { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-soft); overflow-x: auto; }
.rank { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rank td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; white-space: nowrap; }
.rank tr:last-child td { border-bottom: 0; }
.rank .c { text-align: center; } .rank .r { text-align: right; }
.rank td.nm { width: 40%; white-space: normal; }
.rank td.nm b { display: block; color: var(--ink); font-weight: 600; }
.rank td.nm small { color: var(--muted); font-size: 12.5px; }
.rk { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f1f1f3; color: var(--muted); font-weight: 700; font-size: 13px; }
.rk.rk1 { background: #f6c343; color: #4a3500; } .rk.rk2 { background: #d9dde3; color: #3b4048; } .rk.rk3 { background: #e9b48a; color: #4d2a0f; }
.rank .cntw { display: grid; grid-template-columns: 110px auto; align-items: center; column-gap: 10px; }
.rank .cntw small { grid-column: 2; color: var(--muted); font-size: 12px; }
.rank .bar { grid-row: 1 / 3; height: 8px; border-radius: 99px; background: #eef0f2; overflow: hidden; }
.rank .bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand-grad); }
.rank .cntw b { font-size: 16px; color: var(--ink); }
/* Ảnh feedback */
.fbgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fbgrid.fb4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fbf { margin: 0; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-soft), var(--ring); display: flex; flex-direction: column; }
.fbf img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.fbf figcaption { padding: 14px 16px 16px; display: grid; gap: 5px; font-size: 13.5px; }
.fbf figcaption b { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.fbf .gear { display: flex; align-items: center; gap: 6px; color: var(--brand-lo); font-weight: 500; }
.fbf .ic { width: 15px; height: 15px; flex: none; }
.fbf small { color: var(--muted); font-size: 12.5px; }
.fbf .btn { margin-top: 6px; justify-self: start; }
/* Form đặt: bill không bắt buộc */
.upl.opt { border-style: dashed; }
.upl b em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--muted); background: #f1f1f3; border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
/* Sau khi đặt: chờ ngân hàng báo có */
.done-box { max-width: 680px; margin: 30px auto; display: grid; gap: 18px; }
.done-box .success { padding-bottom: 6px; }
.success .big.wait { background: var(--warn-soft); color: var(--warn); }
.pay-wait { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.pay-wait .kitems { display: grid; gap: 8px; }
.pay-wait .ck { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-lo); }
.pay-wait .cp { border: 0; background: var(--brand-soft); color: var(--brand-lo); width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; }
.pay-wait .cp .ic { width: 14px; height: 14px; }
.waiting { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 4px; }
.waiting i { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); animation: pulse 1.3s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .5); } 100% { box-shadow: 0 0 0 9px rgba(217, 119, 6, 0); } }
.pay-wait .btn { justify-self: start; }
.done-sum { display: grid; gap: 8px; }
.zns { background: #eef6ff; border: 1px solid #cfe3fb; border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: 8px; }
.zns-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); flex-wrap: wrap; }
.zns-h .ic { width: 17px; height: 17px; color: #1a6fd8; }
.zns p { background: #fff; border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: 14px; line-height: 1.55; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.zns small { color: var(--muted); font-size: 12px; }
.cg-pop { display: grid; gap: 14px; }
.cg-pop .success { padding: 8px 0 0; }
.done-sum b { text-align: right; }
.done-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Bán: phiếu kiểm tra 30 điểm */
.qc-cta { text-decoration: none; }
.qc-cta .ico { color: #7be0a3; }
.qc-cta .btn { pointer-events: none; }
.qc-panel { background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-soft); padding: 26px; margin-top: 24px; display: grid; gap: 18px; scroll-margin-top: 140px; }
.qc-hd { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.qc-hd .eb { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: 13px; }
.qc-hd .eb .ic { width: 16px; height: 16px; }
.qc-hd h2 { font-size: 21px; margin-top: 4px; }
.qc-hd p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.qc-score { flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--ok) 0 100%, #e5e7ea 0); position: relative; }
.qc-score::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.qc-score > * { position: relative; }
.qc-score b { font-size: 30px; color: var(--ink); line-height: 1; }
.qc-score b small { font-size: 14px; color: var(--muted); }
.qc-score span { font-size: 12px; color: var(--muted); }
.qc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qc-facts > div { background: var(--bg); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.qc-facts small { color: var(--muted); font-size: 12px; }
.qc-facts b { color: var(--ink); font-size: 16px; }
.qc-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.qc-g { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.qc-g > b { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); font-weight: 600; }
.qc-g > b .ic { width: 17px; height: 17px; color: var(--brand-lo); flex: none; }
.qc-g > b .pill { margin-left: auto; }
.qc-g ul, .qc-g ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13px; color: var(--text); }
.qc-g li { display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.qc-g li .ic { width: 14px; height: 14px; color: var(--ok); flex: none; margin-top: 2px; }
.qc-g ol { counter-reset: q var(--start, 0); }
.qc-groups.big .qc-g { padding: 18px; background: #fff; box-shadow: var(--ring); border: 0; }
.qc-groups.big ol { padding-left: 22px; list-style: decimal; display: block; }
.qc-groups.big ol li { display: list-item; margin-bottom: 7px; }
.qc-groups.big ol li::marker { color: var(--brand-lo); font-weight: 700; }
.qc-hero { background: var(--char); color: #c9cbd0; border-radius: var(--r-xl); padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; position: relative; }
.qc-hero h1 { color: #fff; font-size: 38px; letter-spacing: -.02em; margin: 10px 0 12px; }
.qc-hero h1 em { font-style: normal; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qc-hero .lead { max-width: 560px; font-size: 15.5px; line-height: 1.65; }
.qc-hero .lead b { color: #fff; }
.qc-hero .eyebrow { color: var(--brand-hi); display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px; }
.qc-hero .cta { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.qc-big { flex: none; width: 210px; height: 210px; border-radius: 50%; border: 10px solid rgba(255, 255, 255, .06); display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(232, 119, 46, .22), transparent 70%); }
.qc-big b { font-size: 84px; line-height: 1; color: #fff; font-weight: 800; }
.qc-big span { font-size: 13px; color: #a3a5ab; }
.steps.s5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.in-note { display: flex; gap: 6px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.in-note .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
@media (max-width: 1180px) {
  .qc-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps.s5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .go4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-rent .catbar ul { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .portal-rent .catbar li > a { padding: 0 11px; font-size: 13.5px; }
}
@media (max-width: 900px) { .h-note { display: none; } .fbgrid, .fbgrid.fb4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .go4 { grid-template-columns: 1fr; gap: 10px; }
  .go4 .go { padding: 14px; }
  .bk-head h1, .pg-head h1 { font-size: 23px; }
  .lm-search { flex: 1 1 100%; }
  .rank thead { display: none; }
  .rank, .rank tbody, .rank tr, .rank td { display: block; }
  .rank tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; padding: 14px; border-bottom: 1px solid var(--line-2); align-items: center; }
  .rank td { padding: 0; border: 0; white-space: normal; }
  .rank td:first-child { grid-row: 1 / 3; }
  .rank td.nm { width: auto; grid-column: 2 / 4; }
  .rank td.cnt { grid-column: 2 / 4; }
  .rank .cntw { grid-template-columns: 90px auto; }
  .rank td[data-l="Cả ngày"], .rank td[data-l="Tiền cọc"] { grid-column: 2; text-align: left; font-size: 13px; }
  .rank td[data-l="Cả ngày"]::before, .rank td[data-l="Tiền cọc"]::before { content: attr(data-l) ": "; color: var(--muted); }
  .rank td[data-l="Hôm nay"] { grid-column: 2; text-align: left; }
  .rank td:last-child { grid-column: 3; grid-row: 4 / 6; align-self: end; }
  .fbgrid, .fbgrid.fb4 { gap: 10px; }
  .fbf figcaption { padding: 10px 12px 12px; font-size: 12.5px; }
  .fbf figcaption b { font-size: 13.5px; }
  .pay-wait { grid-template-columns: 1fr; justify-items: center; }
  .pay-wait .kitems { width: 100%; }
  .qc-panel { padding: 18px; }
  .qc-hd { flex-direction: column-reverse; align-items: flex-start; }
  .qc-score { width: 84px; height: 84px; }
  .qc-facts { grid-template-columns: 1fr 1fr; }
  .qc-groups { grid-template-columns: 1fr; }
  .qc-hero { padding: 26px 20px; flex-direction: column; align-items: flex-start; }
  .qc-hero h1 { font-size: 28px; }
  .qc-big { display: none; }
  .steps.s5 { grid-template-columns: 1fr; }
}
@media (max-width: 680px) { .rk-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .rk-tabs .tab { flex: none; } }
/* Bản chạy thật: QR hiện sau khi máy chủ cấp mã đơn */
.qr-later { width: 160px; min-height: 150px; display: grid; place-items: center; gap: 8px; text-align: center; font-size: 12.5px; color: var(--muted); padding: 12px; border: 1.5px dashed var(--line); border-radius: 12px; }
.qr-later .ic { width: 22px; height: 22px; color: var(--brand-lo); }

/* ---- v8: Chính sách bảo mật ---- */
.pv { max-width: 860px; padding-bottom: 40px; }
.pv .notice { margin-bottom: 8px; }
.pv-sec { background: #fff; border-radius: var(--r-lg); box-shadow: var(--ring); padding: 20px 22px; margin-top: 14px; line-height: 1.65; font-size: 14.5px; }
.pv-sec h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 8px; }
.pv-sec h2 .ic { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-lo); box-sizing: border-box; flex: none; }
.pv-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.pv-sec p { margin-top: 10px; color: var(--muted); }
.pv-sec a, .consent a { color: var(--brand-lo); text-decoration: underline; }

/* ---------- Rà soát UX 10/2026 ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px 18px; }
a.band { text-decoration: none; }
a.band:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.art { max-width: 760px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 14px; }
.art .pill { align-self: flex-start; }
.art h1 { font-size: clamp(26px, 4vw, 36px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.art small { color: var(--muted); }
.art .lead { font-size: 17px; line-height: 1.7; }
.art-cta { background: var(--brand-soft); border-radius: 14px; padding: 18px 20px; display: grid; gap: 12px; }
.art-cta p { margin: 0; }
.qr-cta { width: 180px; max-width: 100%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 16px; text-decoration: none; }
.qr-cta b { color: var(--ink); font-size: 15px; line-height: 1.3; text-wrap: balance; }
.qr-cta small { color: var(--muted); }
.qr-cta:hover b { color: var(--brand-lo); }
.qr-cta .ic { width: 44px; height: 44px; color: var(--brand); }
@media (max-width: 680px) {
  .footer ul { gap: 2px; }
  .footer ul li a { min-height: 36px; }
  label > input[type=checkbox] { width: 20px; height: 20px; flex: none; }
}

/* ---------- Chuyển trang & chuyển tab mượt ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }
.header { view-transition-name: tixi-header; }
.catbar { view-transition-name: tixi-catbar; }
::view-transition-group(tixi-header), ::view-transition-group(tixi-catbar) { animation-duration: 0s; }
@keyframes tx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.tx #main > *, html.tx #main .grid > *, html.tx #main .news > *, html.tx #main .fbgrid > *, html.tx #main tbody > tr, html.tx #main .rk-list > * { animation: tx-in .28s cubic-bezier(.2, .7, .2, 1) both; }
.tab, .htabs button, .chip, .s-nav { transition: background .2s, color .2s, box-shadow .2s, border-color .2s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.tx #main * { animation: none !important; }
  .hero1 .slide { transition: none; }
}

/* Ảnh sản phẩm nền trắng (đã tách nền) */
.ph.wb { background: #fff; }
.ph.wb > img { object-fit: contain; padding: 9% 12%; }
.ph.cut { background: #fff; }

/* Nút Zalo nổi: gọn hơn trên điện thoại, tự ẩn khi cuộn xuống */
.floatbar { transition: transform .25s ease, opacity .25s ease; }
.floatbar.fb-hide { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; }
@media (max-width: 680px) {
  .floatbar a, .floatbar .fi, .floatbar .fi .ic { width: 40px; height: 40px; }
  .floatbar { right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .floatbar { transition: none; } }

/* Ô chọn ngày trên iPhone/iPad (Safari, Messenger, Zalo…): không tràn khung, chữ căn trái */
.field { min-width: 0; }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; text-align: left; line-height: normal; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.2em; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 2px; opacity: .55; }
@media (max-width: 420px) {
  input[type="date"].inp { padding: 0 8px; font-size: 13.5px; letter-spacing: -.01em; }
}
@media (max-width: 420px) { .shiftpick button { white-space: nowrap; letter-spacing: -.01em; } }