/* ═══════════════════════════════════════════════════════════════════
   pubrev-2026.css  —  hệ thống thiết kế trang công khai PubRev
   Sinh từ 7 bản demo đã duyệt. Session 06 Aug 2026.

   ⚠ NẠP SAU frontend.css. Thứ tự nạp là thứ duy nhất giữ cho file này
     thắng `body{font-family}` và `a{text-decoration}` của frontend.scss.

   ⚠ Mọi class của component đều có tiền tố (pw- pv- fq- ct- au- lg- foot-).
     KHÔNG thêm class không tiền tố vào file này.
   ═══════════════════════════════════════════════════════════════════ */
:root{--ink:#0B1229; --ink-2:#151E3C; --line:#26325C; --signal:#FF4B2B; --alert:#C62828; --wire:#6B87C7; --paper:#F6F5F1; --card:#FFFFFF; --edge:#E3E1DA; --graphite:#1B2033; --muted:#6E7488; --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Instrument Sans',system-ui,sans-serif; --data:'IBM Plex Mono',ui-monospace,monospace; --pad:clamp(18px,5vw,60px); --maxw:1220px;}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--graphite);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--data);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
/* ── header: PAPER, logo gốc chạy đúng ── */ .hdr{background:var(--card);border-bottom:1px solid var(--edge);position:sticky;top:0;z-index:60}
.hdr-in{display:flex;align-items:center;gap:30px;height:74px}
.hdr img{height:34px;width:auto;display:block}
.menu{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0}
.menu a{font-size:15px;font-weight:600;text-decoration:none;color:var(--graphite);padding:6px 0;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--signal);transition:right .2s}
.menu a:hover::after,.menu a.on::after{right:0}
.menu a.on{color:var(--signal)}
.hdr-btns{display:flex;gap:9px}
.mini{font-family:var(--data);font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;padding:9px 17px;border-radius:999px;border:1.3px solid var(--signal);color:var(--signal);transition:background .18s,color .18s}
.mini:hover{background:var(--signal);color:#fff}
.mini.fill{background:var(--signal);color:#fff}
.mini.fill:hover{filter:brightness(1.08)}
@media(max-width:940px){ .menu{display:none} }
/* ── điều hướng mobile: drawer tự viết, KHÔNG phụ thuộc thư viện (QĐ-1 B) ── */
.hdr-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:40px;height:40px;padding:0;margin-left:14px;flex:0 0 auto;background:var(--card);border:1px solid var(--edge);border-radius:999px;cursor:pointer;transition:border-color .18s}
.hdr-burger:hover{border-color:var(--signal)}
.hdr-burger span{display:block;width:16px;height:1.6px;background:var(--graphite);transition:transform .2s,opacity .2s}
.hdr-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.hdr-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
.hdr-scrim{position:fixed;inset:74px 0 0 0;background:rgba(11,18,41,.5);z-index:65;opacity:0;visibility:hidden;transition:opacity .22s}
.hdr-scrim.is-open{opacity:1;visibility:visible}
.hdr-drawer{position:fixed;top:74px;right:0;bottom:0;width:min(320px,86vw);z-index:70;display:flex;flex-direction:column;padding:14px 18px 24px;background:var(--card);border-left:1px solid var(--edge);overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .22s ease,visibility .22s}
.hdr-drawer.is-open{transform:translateX(0);visibility:visible}
.hdr-dlink{font-size:16px;font-weight:600;text-decoration:none;color:var(--graphite);padding:14px 2px;border-bottom:1px solid var(--edge)}
.hdr-dlink.on{color:var(--signal)}
.hdr-drawer-btns{display:none;gap:9px;margin-top:20px}
body.hdr-locked{overflow:hidden}
@media(max-width:940px){ .hdr-burger{display:flex} }
@media(max-width:560px){ .hdr-btns{display:none} .hdr-drawer-btns{display:flex} }
@media(prefers-reduced-motion:reduce){ .hdr-drawer,.hdr-scrim{transition:none} }
/* ── hero ── */ .hero{background:var(--ink);color:#fff;position:relative;overflow:hidden; padding-block:clamp(30px,4vw,54px); min-height:calc(100vh - 74px);min-height:calc(100svh - 74px); display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:62px 62px;opacity:.3;-webkit-mask-image:radial-gradient(115% 85% at 80% 26%,#000,transparent 70%);mask-image:radial-gradient(115% 85% at 80% 26%,#000,transparent 70%)}
.hero-in{position:relative;width:100%;display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:center}
@media(max-width:980px){ .hero{min-height:0;padding-block:clamp(34px,6vw,56px)}
  .hero-in{grid-template-columns:1fr;gap:34px} }
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.2vw,54px);line-height:1.02;letter-spacing:-.032em;margin:0 0 18px}
.hero h1 span{color:var(--signal)}
.btn-row{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.cta.ghost{background:none;border:1px solid var(--line);color:#C6CEE6}
.cta.ghost:hover{border-color:var(--wire);color:#fff;filter:none}
.lede{font-size:clamp(16px,1.35vw,18px);color:#B9C2DC;max-width:46ch;margin:0 0 24px}
.lede b{color:#fff;font-weight:700;font-size:120%}
.lede em{font-style:normal;color:#8E9AB9;font-size:15.5px;display:block;margin-top:10px;letter-spacing:.01em}
.cta{font-family:var(--data);font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;background:var(--signal);color:#fff;padding:16px 32px;border-radius:999px;display:inline-block;transition:filter .18s,transform .18s}
.cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.chips{display:flex;gap:0;margin-top:30px;border-top:1px solid var(--line)}
.chip{padding:16px 26px 0 0;margin-right:26px;border-right:1px solid var(--line)}
.chip:last-child{border-right:0}
.chip b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;color:var(--signal);line-height:1}
.chip span{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wire);margin-top:7px;display:block}
@media(max-width:420px){ .chip{padding-right:16px;margin-right:16px} }
/* ── signature: bid stack ── */ .auc{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:21px 21px 17px;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.auc-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:15px}
.slot{font-family:var(--data);font-size:12.5px;color:#fff}
.slot b{color:var(--wire);font-weight:500}
.replay{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--wire);padding:6px 11px;border-radius:2px;cursor:pointer}
.replay:hover{border-color:var(--wire);color:#fff}
.bids{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.bid{display:grid;grid-template-columns:92px 1fr 60px;align-items:center;gap:11px;font-family:var(--data);font-size:12.5px;opacity:0;transform:translateX(-8px);transition:opacity .34s,transform .34s}
.bid.is-in{opacity:1;transform:none}
.bnm{color:#9FB0D6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btr{height:9px;background:rgba(107,135,199,.13);border-radius:1px;overflow:hidden}
.bfl{display:block;height:100%;width:0;background:var(--wire);opacity:.55;transition:width .6s cubic-bezier(.2,.7,.3,1)}
.bid.is-in .bfl{width:var(--w)}
.bvl{color:#C6CEE6;text-align:right;font-variant-numeric:tabular-nums}
.bid.win .bnm{color:#fff;font-weight:600}
.bid.win .bfl{background:var(--signal);opacity:1}
.bid.win .bvl{color:#fff;font-weight:600}
.rest{font-family:var(--data);font-size:11.5px;color:var(--muted);padding-top:11px;margin-top:10px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;gap:10px}
.settle{margin-top:15px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.settle i{font-style:normal;font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wire)}
.settle b{font-family:var(--display);font-weight:800;font-size:32px;letter-spacing:-.025em;color:#fff;font-variant-numeric:tabular-nums}
.settle b small{font-family:var(--data);font-size:12px;font-weight:500;color:var(--wire);margin-left:6px}
.dis{font-family:var(--data);font-size:10.5px;color:var(--muted);margin:11px 0 0;letter-spacing:.04em}
/* ── sections ── */ .sec{padding-block:clamp(52px,7vw,92px)}
.sec-hd{margin-bottom:clamp(28px,3.5vw,46px)}
.sec-hd .eyebrow{color:var(--signal);margin-bottom:12px}
.sec-hd h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.06;letter-spacing:-.028em;margin:0}
/* Why PubRev */ .why{display:grid;grid-template-columns:.85fr 1.6fr;gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:900px){ .why{grid-template-columns:1fr} }
.why-l h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,46px);letter-spacing:-.03em;line-height:1.02;margin:0 0 22px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:3px;overflow:hidden}
@media(max-width:620px){ .why-grid{grid-template-columns:1fr} }
.why-cell{background:var(--card);padding:26px 24px}
.why-cell h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.015em;margin:0 0 9px}
.why-cell p{margin:0;font-size:15px;color:var(--muted);line-height:1.55}
.why-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:#FBF3F0;border:1px solid #F1E4DF;margin-bottom:16px}
.why-ic img{width:32px;height:32px;object-fit:contain;display:block}
/* SSP */ .ssp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:3px;overflow:hidden}
@media(max-width:900px){ .ssp-grid{grid-template-columns:repeat(4,1fr)} }
@media(max-width:520px){ .ssp-grid{grid-template-columns:repeat(2,1fr)} }
.ssp{background:var(--card);display:grid;place-items:center;min-height:88px;font-family:var(--data);font-size:12.5px;letter-spacing:.06em;color:#9AA0B2;text-align:center;padding:10px}
/* voices */ .voices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){ .voices{grid-template-columns:1fr} }
.voice{background:var(--card);border:1px solid var(--edge);border-radius:3px;padding:26px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.voice:hover{border-color:var(--graphite);transform:translateY(-3px)}
.voice blockquote{margin:0 0 20px;font-size:15.5px;line-height:1.6}
.voice blockquote::before{content:"";display:block;width:26px;height:2px;background:var(--signal);margin-bottom:15px}
.who{margin-top:auto;display:flex;align-items:center;gap:12px}
.av{width:40px;height:40px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:16px;flex:0 0 auto}
.who b{display:block;font-size:15px}
.who span{font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* join */ .join{background:var(--ink);color:#fff;padding-block:clamp(38px,5vw,58px);position:relative;overflow:hidden}
.join::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:62px 62px;opacity:.3;-webkit-mask-image:linear-gradient(90deg,#000,transparent 62%);mask-image:linear-gradient(90deg,#000,transparent 62%)}
.join-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.join h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em;margin:0}
.join .cta{font-size:14px;padding:19px 42px}
/* ── footer ── */ .foot{background:var(--paper);border-top:1px solid var(--edge);color:var(--graphite);padding-block:clamp(38px,5vw,58px) 0;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(22px,3vw,44px);padding-bottom:38px}
@media(max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .foot-grid{grid-template-columns:1fr} }
.foot-brand img{height:48px;width:auto;display:block;margin-bottom:14px;padding:7px 11px;background:var(--card);border:1px solid var(--edge);border-radius:3px}
.foot-brand p{margin:0;font-size:14.5px;color:var(--muted);max-width:30ch;line-height:1.55}
.foot-h{font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 14px}
.foot-nav{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot-nav a{font-size:15px;text-decoration:none;color:var(--graphite);transition:color .18s}
.foot-nav a:hover{color:var(--signal)}
.foot-nav address{font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}
.foot-mail{font-family:var(--data);font-size:13.5px;letter-spacing:.02em;border-bottom:1px solid var(--edge);padding-bottom:2px}
.foot-btm{border-top:1px solid var(--edge);padding-block:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--data);font-size:11.5px;letter-spacing:.05em;color:var(--muted)}
.totop{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--graphite);border:1px solid var(--edge);border-radius:999px;padding:8px 15px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;transition:border-color .18s,color .18s}
.totop:hover{border-color:var(--signal);color:var(--signal)}
/* ── thẻ format: wireframe theo thang đo thật ── Mỗi khung = màn hình 1280×960. Kích thước ad unit tính bằng % của con số đó, nên 300×250 tự ra 1.2:1 và 640×360 tự ra 16:9. Không vẽ áng chừng. */ .fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){ .fgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .fgrid{grid-template-columns:1fr} }
.fcard{background:var(--card);border:1px solid var(--edge);border-radius:3px;padding:18px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.fcard:hover{border-color:var(--graphite);transform:translateY(-3px)}
.pw-mock{position:relative;aspect-ratio:4/3;background:#F1EFE9;border:1px solid #DFDDD5;border-radius:2px;overflow:hidden;contain:layout paint;isolation:isolate}
.pw-chrome{position:absolute;top:0;left:0;right:0;height:4.2%;background:#E4E1D8}
.pw-ln{position:absolute;height:1.35%;background:#DBD8CE;border-radius:1px}
.pw-mock .pw-unit{position:absolute;display:grid;place-items:center;background:var(--signal);border-radius:1px}
.pw-mock .pw-play{width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.pw-scroll{position:absolute;right:3%;top:8%;bottom:12%;width:3px;border-radius:2px;background:linear-gradient(#DBD8CE 0 55%,transparent 55%)}
.pw-dim{position:absolute;inset:0;background:rgba(11,18,41,.42)}
.pw-win{position:absolute;left:14%;top:18%;width:70.3%;height:62.5%;background:#fff;border-radius:3px;box-shadow:0 10px 26px -8px rgba(11,18,41,.5);overflow:hidden}
.pw-winbar{position:absolute;top:0;left:0;right:0;height:15%;background:#E9E7E0;display:flex;align-items:center;gap:3px;padding-left:6px}
.pw-winbar .pw-dot{width:4px;height:4px;border-radius:50%;background:#C9C5BA}
.pw-winbar .pw-bar{flex:1;height:5px;margin:0 6px 0 4px;border-radius:3px;background:#D6D2C7}
.pw-unitin{position:absolute;left:8%;right:8%;top:24%;bottom:10%;background:var(--signal);border-radius:1px}
.fsize{font-family:var(--data);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal);margin:15px 0 6px}
.fcard h3{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;margin:0 0 9px}
.fcopy{margin:0 0 16px;font-size:14.5px;color:var(--muted);line-height:1.55}
.ftags{font-family:var(--data);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);border-top:1px solid var(--edge);padding-top:13px;margin:auto 0 0}
.fmore{margin:26px 0 0;text-align:center}
.fmore a{font-family:var(--data);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--signal);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
@media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} }
/* Ad formats — giữ bố cục xen kẽ như bản gốc */ .fmt{display:grid;grid-template-columns:.8fr 1.35fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(26px,3.5vw,42px);border-top:1px solid var(--edge)}
.fmt:first-of-type{border-top:0}
.fmt.rev .fmt-txt{order:2}
@media(max-width:860px){ .fmt{grid-template-columns:1fr;gap:22px}.fmt.rev .fmt-txt{order:0} }
.fmt-txt h3{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.8vw,32px);letter-spacing:-.025em;margin:0 0 4px}
.fmt-kicker{font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 14px}
.fmt-txt ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fmt-txt li{position:relative;padding-left:20px;font-size:15.5px;color:var(--muted);line-height:1.5}
.fmt-txt li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--signal);transform:rotate(45deg);border-radius:1px}
/* Tỷ lệ khung = tỷ lệ gốc của 4 ảnh (1130×800) ⇒ KHÔNG cắt. Sticky nằm ở đáy ảnh, Pop ở giữa — mọi kiểu crop đều làm mất một trong hai. */ .shot{border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:var(--card);aspect-ratio:1130/800;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.shot-tag{position:absolute;left:10px;bottom:10px;font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,18,41,.82);color:#fff;padding:5px 9px;border-radius:2px;backdrop-filter:blur(4px)}
/* lab */ .lab{background:var(--paper);border-top:2px dashed var(--edge)}
.lab-note{font-family:var(--data);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin:0 0 8px}
.lab h2{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.lab p.sub{color:var(--muted);margin:0 0 26px;font-size:15.5px;max-width:62ch}
.lab-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){ .lab-row{grid-template-columns:1fr} }
.lab-box{border:1px solid var(--edge);border-radius:3px;overflow:hidden;background:var(--card)}
.lab-top{height:118px;display:grid;place-items:center;padding:18px}
.lab-top img{height:32px;width:auto}
.lab-cap{border-top:1px solid var(--edge);padding:13px 15px;font-family:var(--data);font-size:11px;line-height:1.6;letter-spacing:.03em;color:var(--muted)}
.lab-cap b{display:block;color:var(--graphite);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.ok{color:#1B7F4C}
.bad{color:var(--signal)}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:700px){ .swatches{grid-template-columns:repeat(2,1fr)} }
.sw{font-family:var(--data);font-size:10.5px;letter-spacing:.06em;color:var(--muted);line-height:1.7}
.sw span{display:block;height:56px;border-radius:3px;margin-bottom:9px;border:1px solid rgba(0,0,0,.08)}
.sw b{display:block;color:var(--graphite);font-size:11.5px}
.foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
/* ── riêng trang Ad Format ── */ .hero.af{min-height:0;padding-block:clamp(52px,7vw,96px);text-align:center}
.hero.af .hero-in{grid-template-columns:1fr}
.hero.af .hero-in > div{width:100%;max-width:860px;margin-inline:auto}
.hero.af h1{max-width:19ch;margin:0 auto 18px;font-size:clamp(32px,4.4vw,54px)}
.hero.af .lede{max-width:46ch;margin:0 auto 26px;text-align:center}
.hero.af .btn-row{justify-content:center}
/* dải neo 4 format */ .anchors{position:sticky;top:74px;z-index:40;background:var(--card);border-bottom:1px solid var(--edge)}
.anchors-in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.anchors-in::-webkit-scrollbar{display:none}
.anc{flex:1;min-width:132px;display:flex;align-items:center;gap:11px;padding:15px 18px;text-decoration:none; border-right:1px solid var(--edge);transition:background .18s}
.anc:last-child{border-right:0}
.anc:hover{background:var(--paper)}
.anc i{font-style:normal;font-family:var(--data);font-size:10.5px;letter-spacing:.12em;color:var(--signal)}
.anc b{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--graphite)}
@media(max-width:820px){ .anc{min-width:118px;padding:12px 14px}.anc b{font-size:14px} }
/* khối format lớn */ .fmt-big{display:grid;grid-template-columns:.78fr 1.4fr;gap:clamp(26px,4vw,60px);align-items:center; padding-block:clamp(38px,5vw,64px);border-top:1px solid var(--edge);scroll-margin-top:140px}
.fmt-big.rev .fmt-txt{order:2}
@media(max-width:900px){ .fmt-big{grid-template-columns:1fr;gap:24px}.fmt-big.rev .fmt-txt{order:0} }
.fmt-big h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.028em;margin:0 0 6px}
.fmt-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tagchip{font-family:var(--data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--edge);border-radius:999px;padding:6px 12px;color:var(--muted)}
/* ── riêng trang FAQ ── */ .hero.pv-faq{min-height:0;padding-block:clamp(46px,6vw,80px)}
.hero.pv-faq .hero-in{grid-template-columns:1.05fr .95fr;align-items:center}
@media(max-width:940px){ .hero.pv-faq .hero-in{grid-template-columns:1fr;gap:32px} }
.hero.pv-faq h1{font-size:clamp(34px,4.4vw,54px);margin:0 0 16px;max-width:14ch}
.hero.pv-faq .lede{max-width:40ch;margin:0}
.fq-quick{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:20px 22px 8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.fq-quick-h{font-family:var(--data);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--wire);margin:0 0 6px}
.fq-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;transition:padding-left .2s}
.fq-row:first-of-type{border-top:0}
.fq-row:hover{padding-left:6px}
.fq-row:hover .fq-v{color:var(--signal)}
.fq-l{font-family:var(--data);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--wire)}
.fq-v{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;color:#fff;text-align:right;transition:color .18s}
.fq-v small{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;letter-spacing:0;color:#8E9AB9;margin-top:3px}
.qa-list{max-width:860px;margin-inline:auto;border-top:1px solid var(--edge)}
.qa{border-bottom:1px solid var(--edge);scroll-margin-top:96px}
.qa > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:46px 1fr 24px; align-items:start;gap:14px;padding:22px 4px;transition:color .18s}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary:hover .qa-q{color:var(--signal)}
.qa-n{font-family:var(--data);font-size:11.5px;letter-spacing:.1em;color:var(--signal);padding-top:5px}
.qa-q{font-family:var(--display);font-weight:700;font-size:clamp(17px,1.9vw,20px); letter-spacing:-.015em;line-height:1.35;color:var(--graphite);transition:color .18s}
.qa-ico{position:relative;width:16px;height:16px;margin-top:5px;justify-self:end}
.qa-ico::before,.qa-ico::after{content:"";position:absolute;background:var(--signal);border-radius:1px; transition:transform .22s ease,opacity .22s ease}
.qa-ico::before{left:0;right:0;top:7px;height:2px}
.qa-ico::after{top:0;bottom:0;left:7px;width:2px}
.qa[open] .qa-ico::after{transform:scaleY(0);opacity:0}
.qa[open] .qa-q{color:var(--signal)}
.qa-a{padding:0 24px 26px 60px;color:var(--muted);font-size:16px;line-height:1.62}
.qa-a p{margin:0 0 12px}
.qa-a p:last-child{margin-bottom:0}
.qa-a a{color:var(--graphite);text-decoration:none;border-bottom:1px solid var(--signal)}
.qa-a a:hover{color:var(--signal)}
.faq-ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.faq-ul li{position:relative;padding-left:20px}
.faq-ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px; background:var(--signal);transform:rotate(45deg);border-radius:1px}
.faq-sub{font-family:var(--data);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--graphite);margin:20px 0 10px}
.pay{border-collapse:collapse;width:100%}
.pay td{border-top:1px solid var(--edge);padding:11px 0;vertical-align:top;font-size:15.5px}
.pay td:first-child{width:78px}
.pay-amt{font-family:var(--data);font-weight:600;color:var(--graphite)}
@media(max-width:560px){ .qa > summary{grid-template-columns:34px 1fr 20px;gap:10px;padding:19px 2px}
  .qa-a{padding-left:44px;padding-right:8px} }
/* ── riêng trang Contact (tiền tố ct-) ── */ .hero.ct{min-height:0;padding-block:clamp(44px,5.5vw,74px)}
.hero.ct .hero-in{grid-template-columns:.92fr 1.08fr;align-items:start}
@media(max-width:940px){ .hero.ct .hero-in{grid-template-columns:1fr;gap:34px} }
.hero.ct h1{font-size:clamp(34px,4.4vw,52px);margin:0 0 16px;max-width:11ch}
.hero.ct .lede{max-width:38ch;margin:0}
.ct-left{padding-top:6px}
.ct-direct{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.ct-direct-h{font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 14px}
.ct-mail{font-family:var(--data);font-size:16px;color:#fff;text-decoration:none;border-bottom:1px solid var(--signal);padding-bottom:3px}
.ct-mail:hover{color:var(--signal)}
.ct-addr{font-style:normal;color:#8E9AB9;font-size:14px;line-height:1.6;margin:18px 0 0}
/* thẻ form: TRẮNG trên navy — tương phản cao nhất trang, dành cho ô chuyển đổi */ .ct-card{background:var(--card);border-radius:5px;padding:clamp(24px,3vw,34px);color:var(--graphite);box-shadow:0 34px 70px -34px rgba(0,0,0,.9)}
.ct-card h2{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0 0 6px}
.ct-card-sub{color:var(--muted);font-size:14.5px;margin:0 0 26px}
.ct-f{margin-bottom:16px}
.ct-f label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ct-opt{font-family:var(--body);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:#A6A99F;flex:0 0 auto}
.ct-f input,.ct-f select,.ct-f textarea{width:100%;background:var(--paper);border:1px solid var(--edge);color:var(--graphite);font-family:var(--body);font-size:15px;padding:13px;border-radius:2px}
.ct-f textarea{resize:vertical;min-height:104px}
.ct-f input::placeholder,.ct-f textarea::placeholder{color:#A6A99F}
.ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{outline:none;border-color:var(--signal);background:#fff}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:520px){ .ct-row{grid-template-columns:1fr} }
.ct-cap{border:1px dashed var(--edge);border-radius:2px;padding:15px;text-align:center;font-family:var(--data);font-size:11px;letter-spacing:.08em;color:var(--muted);margin-bottom:18px}
.ct-card .cta{width:100%;text-align:center}
.ct-note{font-family:var(--data);font-size:10.5px;color:var(--muted);margin:16px 0 0;letter-spacing:.04em}
/* 2 khối hướng dẫn, nền giấy */ .ct-below{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px)}
@media(max-width:760px){ .ct-below{grid-template-columns:1fr;gap:34px} }
.ct-h{font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 14px}
.ct-list{list-style:none;margin:0;padding:0;display:grid}
.ct-list li{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--edge);font-size:15.5px}
@media(max-width:420px){ .ct-list li{grid-template-columns:66px 1fr;gap:11px} }
.ct-list li:last-child{border-bottom:1px solid var(--edge)}
.ct-k{font-family:var(--data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:3px}
.ct-list small{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}
/* ── trang pháp lý (tiền tố lg-) ── */ .hero.lg{min-height:0;padding-block:clamp(40px,5vw,66px)}
.hero.lg .hero-in{grid-template-columns:1fr}
.hero.lg h1{font-size:clamp(30px,3.8vw,46px);margin:0 0 14px;max-width:20ch}
.lg-meta{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--data);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wire)}
.lg-meta b{color:#fff;font-weight:500}
.lg-grid{display:grid;grid-template-columns:250px 1fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){ .lg-grid{grid-template-columns:1fr;gap:26px} }
.lg-toc{position:sticky;top:98px}
@media(max-width:900px){ .lg-toc{position:static;border:1px solid var(--edge);border-radius:3px;padding:18px} }
.lg-toc-h{font-family:var(--data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin:0 0 14px}
.lg-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:66vh;overflow:auto}
@media(max-width:900px){ .lg-toc ol{max-height:none} }
.lg-toc a{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:7px 0;font-size:14px;color:var(--muted);text-decoration:none;line-height:1.4;transition:color .16s}
.lg-toc a:hover{color:var(--signal)}
.lg-toc a i{font-style:normal;font-family:var(--data);font-size:11px;color:var(--signal);padding-top:2px}
.lg-toc a.sub{grid-template-columns:30px 1fr;padding-left:16px;font-size:13.5px}
.lg-body{max-width:74ch}
.lg-body > p:first-child{margin-top:0}
.lg-sec{scroll-margin-top:100px;padding-top:6px}
.lg-body h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.3vw,26px);letter-spacing:-.02em; color:var(--graphite);margin:38px 0 12px;padding-top:20px;border-top:1px solid var(--edge);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.lg-body h2:first-of-type{margin-top:0;border-top:0;padding-top:0}
.lg-body h2 i{font-style:normal;font-family:var(--data);font-size:13px;font-weight:500;color:var(--signal)}
.lg-body h3{font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.01em;color:var(--graphite);margin:26px 0 10px}
.lg-body p{margin:0 0 14px;color:var(--muted);font-size:16px;line-height:1.68}
.lg-body strong{color:var(--graphite);font-weight:600}
.lg-body ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.lg-body li{position:relative;padding-left:20px;color:var(--muted);font-size:16px;line-height:1.6}
.lg-body li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--signal);transform:rotate(45deg);border-radius:1px}
.lg-body a{color:var(--graphite);text-decoration:none;border-bottom:1px solid var(--signal)}
.lg-body a:hover{color:var(--signal)}
/* ── trang Login (tiền tố au-) ── */ html,body{height:100%}
body.au-shell{display:flex;flex-direction:column;min-height:100%}
/* Trang marketing (layout_pubrev) KHÔNG được là flex-column: theme Metronic ép body{display:flex} khiến các <section> thành flex-item bị co, cắt mất chiều cao hero/join. Ép về block, trừ trang login. */
body.pubrev-2026:not(.au-shell){display:block!important;height:auto!important}
.au-bar{background:var(--card);border-bottom:1px solid var(--edge);flex:0 0 auto}
.au-bar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.au-bar img{height:32px;width:auto;display:block}
.au-back{font-family:var(--data);font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--muted);text-decoration:none;transition:color .18s}
.au-back:hover{color:var(--signal)}
.au-main{flex:1 0 auto;background:var(--ink);position:relative;overflow:hidden; display:flex;align-items:center;padding-block:clamp(32px,5vw,64px)}
.au-main::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:62px 62px;opacity:.3; -webkit-mask-image:radial-gradient(110% 80% at 24% 40%,#000,transparent 70%); mask-image:radial-gradient(110% 80% at 24% 40%,#000,transparent 70%)}
.au-grid{position:relative;width:100%;display:grid;grid-template-columns:1fr 440px; gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:900px){ .au-grid{grid-template-columns:1fr;gap:34px} }
.au-say h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.8vw,46px); line-height:1.04;letter-spacing:-.03em;color:#fff;margin:0 0 16px;max-width:15ch}
.au-say p{color:#B9C2DC;font-size:16.5px;max-width:38ch;margin:0}
.au-facts{display:flex;margin-top:36px;border-top:1px solid var(--line)}
.au-fact{padding:18px 26px 0 0;margin-right:26px;border-right:1px solid var(--line)}
.au-fact:last-child{border-right:0;margin-right:0}
.au-fact b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,28px); letter-spacing:-.03em;color:var(--signal);line-height:1}
.au-fact span{display:block;font-family:var(--data);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--wire);margin-top:7px}
@media(max-width:900px){ .au-say{display:none} }
.au-card{background:var(--card);border-radius:5px;padding:clamp(26px,3vw,36px); box-shadow:0 34px 70px -34px rgba(0,0,0,.9)}
.au-card h2{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.02em;margin:0 0 5px}
.au-card > p{color:var(--muted);font-size:14.5px;margin:0 0 26px}
.au-f{margin-bottom:17px}
.au-f label{display:block;font-family:var(--data);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.au-f input{width:100%;background:var(--paper);border:1px solid var(--edge);color:var(--graphite); font-family:var(--body);font-size:15.5px;padding:13px;border-radius:2px}
.au-f input::placeholder{color:#A6A99F}
.au-f input:focus{outline:none;border-color:var(--signal);background:#fff}
.au-pw{position:relative}
.au-pw input{padding-right:46px}
.au-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px; border:0;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center;border-radius:2px}
.au-eye:hover{color:var(--graphite)}
.au-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.au-err{display:block;color:var(--signal);font-size:13px;margin-top:7px;min-height:1px}
.au-mid{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 24px}
.au-check{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--graphite);cursor:pointer}
.au-check input{width:17px;height:17px;accent-color:var(--signal);cursor:pointer}
.au-link{font-size:14px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--edge);padding-bottom:2px}
.au-link:hover{color:var(--signal);border-color:var(--signal)}
.au-card .cta{width:100%;text-align:center}
.au-alt{margin:22px 0 0;text-align:center;font-size:14.5px;color:var(--muted)}
.au-alt a{color:var(--graphite);text-decoration:none;border-bottom:1px solid var(--signal)}
.au-alt a:hover{color:var(--signal)}
.au-foot{flex:0 0 auto;background:var(--ink);border-top:1px solid var(--line);padding-block:18px}
.au-foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--data);font-size:11px;letter-spacing:.06em;color:#5D6C93}
.au-foot a{color:#8E9AB9;text-decoration:none;margin-left:20px}
.au-foot a:hover{color:#fff}

/* ════════════════════════════════════════════════════════════════
   GHI ĐÈ CÓ CHỦ Ý — site.css đặt !important lên selector toàn cục.
   Không có 3 rule dưới đây thì mọi ô nhập của thiết kế mới sẽ nhận
   màu #333 và placeholder nghiêng 13px xám của site.css.
   ════════════════════════════════════════════════════════════════ */
.ct-f input, .ct-f select, .ct-f textarea,
.au-f input { color: var(--graphite) !important; }
.ct-f input::placeholder, .ct-f textarea::placeholder,
.au-f input::placeholder { color: #A6A99F !important; font-size: 15.5px; font-style: normal; }
.ct-f input:focus, .ct-f select:focus, .ct-f textarea:focus,
.au-f input:focus { background: #fff !important; }

/* ════════════════════════════════════════════════════════════════
   GHI ĐÈ theme (Bootstrap/Metronic + frontend.css + site.css)
   Bootstrap đặt color trực tiếp lên h1–h6 nên phá inherit từ .hero{color:#fff}.
   frontend.css ép Plus Jakarta lên mọi heading. Scope: body.pubrev-2026.
   ════════════════════════════════════════════════════════════════ */
body.pubrev-2026 {
  font-family: var(--body) !important;
  color: var(--graphite) !important;
  background: var(--paper) !important;
}

/* Hero tối — tiêu đề phải trắng */
body.pubrev-2026 .hero h1,
body.pubrev-2026 .join h2,
body.pubrev-2026 .au-say h1 {
  color: #fff !important;
  font-family: var(--display) !important;
}
body.pubrev-2026 .hero h1 span { color: var(--signal) !important; }
body.pubrev-2026 .hero .lede,
body.pubrev-2026 .au-say p { color: #B9C2DC !important; }

/* Hero sáng / section — tiêu đề đen đồng nhất */
body.pubrev-2026 .sec-hd h2,
body.pubrev-2026 .why-l h2,
body.pubrev-2026 .fcard h3,
body.pubrev-2026 .why-cell h3,
body.pubrev-2026 .fmt-big h2,
body.pubrev-2026 .fmt-txt h3,
body.pubrev-2026 .ct-card h2,
body.pubrev-2026 .au-card h2,
body.pubrev-2026 .lg-body h2,
body.pubrev-2026 .lab h2 {
  color: var(--graphite) !important;
  font-family: var(--display) !important;
}

/* FAQ accordion */
body.pubrev-2026 .qa-q {
  color: var(--graphite) !important;
  font-family: var(--display) !important;
}
body.pubrev-2026 .qa[open] .qa-q { color: var(--signal) !important; }
body.pubrev-2026 .qa-n { color: var(--signal) !important; }
body.pubrev-2026 .qa > summary:hover .qa-q { color: var(--signal) !important; }

/* Format cards + meta */
body.pubrev-2026 .fsize,
body.pubrev-2026 .fmt-kicker,
body.pubrev-2026 .sec-hd .eyebrow,
body.pubrev-2026 .foot-h {
  color: var(--signal) !important;
  font-family: var(--data) !important;
}
body.pubrev-2026 .fcopy,
body.pubrev-2026 .why-cell p,
body.pubrev-2026 .qa-a,
body.pubrev-2026 .lg-body p,
body.pubrev-2026 .lg-body li {
  color: var(--muted) !important;
  font-family: var(--body) !important;
}
body.pubrev-2026 .ftags {
  color: var(--graphite) !important;
  font-family: var(--data) !important;
}

/* Nav + footer — không dính màu link Bootstrap */
body.pubrev-2026 .menu a,
body.pubrev-2026 .foot-nav a,
body.pubrev-2026 .foot-btm,
body.pubrev-2026 .totop {
  font-family: var(--body) !important;
}
body.pubrev-2026 .menu a { color: var(--graphite) !important; }
body.pubrev-2026 .menu a.on,
body.pubrev-2026 .menu a:hover { color: var(--signal) !important; }
body.pubrev-2026 .foot-nav a { color: var(--graphite) !important; }
body.pubrev-2026 .foot-nav a:hover { color: var(--signal) !important; }
body.pubrev-2026 .totop { color: var(--graphite) !important; }
body.pubrev-2026 .totop:hover { color: var(--signal) !important; }
body.pubrev-2026 .hdr-dlink { color: var(--graphite) !important; font-family: var(--body) !important; }
body.pubrev-2026 .hdr-dlink.on,
body.pubrev-2026 .hdr-dlink:hover { color: var(--signal) !important; }
body.pubrev-2026 .fmore a { color: var(--signal) !important; }

/* Bootstrap reset margins trên thẻ p trong card */
body.pubrev-2026 .fcopy,
body.pubrev-2026 .qa-a p,
body.pubrev-2026 .voice blockquote {
  margin-top: 0 !important;
}
body.pubrev-2026 .fcard h3 { margin-bottom: 9px !important; }
body.pubrev-2026 .fcopy { margin-bottom: 16px !important; }

/* ═══════════════════════════════════════════════════════════════════
   KHỐI MỚI — trang Publishers  ·  tiền tố  pub-
   David: NỐI NGUYÊN KHỐI NÀY vào cuối phần component của pubrev-2026.css,
   TRƯỚC khối "GHI ĐÈ theme" ở cuối file.
   ═══════════════════════════════════════════════════════════════════ */

/* ── hero ── */
.hero.pub{min-height:0;padding-block:clamp(54px,7vw,94px);text-align:center}
.hero.pub .hero-in{grid-template-columns:1fr}
.hero.pub .hero-in > div{width:100%;max-width:820px;margin-inline:auto}
.hero.pub h1{max-width:15ch;margin:0 auto 18px;font-size:clamp(34px,4.8vw,58px)}
.hero.pub .lede{max-width:42ch;margin:0 auto 28px;text-align:center}
.hero.pub .btn-row{justify-content:center}

/* ── hàng 4 lợi ích (nén từ khối "Our Solution" 4 thẻ) ── */
.pub-strip{background:var(--card);border-bottom:1px solid var(--edge)}
.pub-strip-in{display:grid;grid-template-columns:repeat(4,1fr)}
.pub-benefit{display:flex;align-items:center;gap:13px;padding:19px 20px;border-right:1px solid var(--edge)}
.pub-benefit:last-child{border-right:0}
.pub-benefit img{width:30px;height:30px;object-fit:contain;flex:0 0 auto}
.pub-benefit b{font-size:14.5px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
@media(max-width:900px){
  .pub-strip-in{grid-template-columns:repeat(2,1fr)}
  .pub-benefit:nth-child(2n){border-right:0}
  .pub-benefit:nth-child(-n+2){border-bottom:1px solid var(--edge)}
}
@media(max-width:520px){
  .pub-strip-in{grid-template-columns:1fr}
  .pub-benefit{border-right:0;border-bottom:1px solid var(--edge)}
  .pub-benefit:last-child{border-bottom:0}
}

/* ── payment methods ── */
.pub-pm{background:var(--card);border:1px solid var(--edge);border-radius:4px;padding:clamp(26px,3vw,42px)}
.pub-pm-hd{text-align:center;margin-bottom:26px}
.pub-pm-hd h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.8vw,32px);letter-spacing:-.028em;margin:0 0 8px}
.pub-pm-hd p{margin:0;font-size:15.5px;color:var(--muted)}
.pub-pm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pub-pm-card{background:var(--card);border:1px solid var(--edge);border-radius:3px;padding:22px 12px 18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.pub-pm-card img{height:28px;width:auto;max-width:100%;object-fit:contain;display:block}
.pub-pm-name{margin-top:16px;min-height:2.6em;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.3;font-family:var(--data);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pub-pm-note{margin:20px 0 0;text-align:center;font-size:14px;color:var(--muted)}
@media(max-width:760px){ .pub-pm-grid{grid-template-columns:repeat(2,1fr)} }

/* ── CTA giữa trang, chỉ mobile (khôi phục .sign-up-container d-block d-md-none của bản cũ) ── */
.pub-mcta{display:none;justify-content:center;padding:26px 0 0}
@media(max-width:820px){ .pub-mcta{display:flex} }

/* ── 3 bước sau khi nộp đơn ── */
.pub-steps-hd{margin-bottom:4px}
.pub-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--edge)}
.pub-step{padding:28px 26px 30px;border-right:1px solid var(--edge)}
.pub-step:last-child{border-right:0}
.pub-step-n{font-family:var(--data);font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--signal);margin:0 0 13px}
.pub-step h3{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.022em;margin:0 0 9px}
.pub-step p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
@media(max-width:820px){
  .pub-steps{grid-template-columns:1fr}
  .pub-step{border-right:0;border-bottom:1px solid var(--edge)}
  .pub-step:last-child{border-bottom:0}
}

/* ── khối đăng ký: thẻ trắng trên navy ── */
/* scroll-margin-top: dich diem dung khi nhay neo #sign-up-form xuong duoi header sticky 74px.
   Thieu no thi tieu de khoi nam DUOI header. Cung khuon voi .fmt-big(140) .qa(96) .lg-sec(100). */
.pub-signup{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding-block:clamp(46px,5.5vw,78px);scroll-margin-top:80px}
.pub-signup::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:62px 62px;opacity:.3;-webkit-mask-image:radial-gradient(110% 80% at 18% 24%,#000,transparent 68%);mask-image:radial-gradient(110% 80% at 18% 24%,#000,transparent 68%)}
.pub-signup-in{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,58px);align-items:start}
@media(max-width:980px){ .pub-signup-in{grid-template-columns:1fr;gap:32px} }
.pub-say h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.03em;margin:0 0 18px}
.pub-value{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.pub-value li{display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:start}
.pub-value-ic{width:34px;height:34px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--signal);font-size:13px}
.pub-value b{display:block;font-size:15.5px;margin-bottom:2px}
.pub-value span{font-size:14.5px;line-height:1.5}

/* thẻ form */
.pub-card{background:var(--card);border-radius:5px;padding:clamp(24px,3vw,38px);color:var(--graphite);box-shadow:0 34px 70px -34px rgba(0,0,0,.9)}
.pub-card h2{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.3vw,27px);letter-spacing:-.028em;margin:0 0 6px}
.pub-card-sub{margin:0 0 22px;font-size:14.5px;color:var(--muted)}

/* trường — bọc .pubrev-field-group / .pubrev-field-pair giữ nguyên tên (hợp đồng markup cũ) */
.pub-card .pubrev-field-group{margin-bottom:17px}
.pub-card .pubrev-field-group--tight{margin-bottom:9px}
.pub-card .pubrev-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){ .pub-card .pubrev-field-pair{grid-template-columns:1fr} }
.pub-card label{display:block;font-family:var(--data);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.pub-card .pubrev-label-optional{font-size:10px;letter-spacing:.1em;color:#A6A99F;text-transform:lowercase}
.pub-card input[type=text],
.pub-card input[type=email],
.pub-card input[type=password],
.pub-card select{width:100%;font-family:var(--body);font-size:15.5px;padding:13px 14px;background:var(--paper);border:1px solid var(--edge);border-radius:3px;transition:border-color .16s,background .16s}
.pub-card input:focus,
.pub-card select:focus{outline:none;border-color:var(--signal);background:#fff}
.pub-card .pubrev-field-hint{margin:7px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.pub-card .pubrev-field-hint--after-pair{margin-top:9px;margin-bottom:17px}

/* ⛔ vô hiệu hoá site.css: input,select,textarea{color:#333!important} + ::placeholder nghiêng 13px */
.pub-card input, .pub-card select, .pub-card textarea{color:var(--graphite)!important}
.pub-card input::placeholder{color:#A6A99F!important;font-size:15.5px;font-style:normal}

/* mật khẩu */
.pub-card .password-input-wrap{position:relative}
.pub-card .password-input-wrap input{padding-right:46px}
.pub-card .password-toggle-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:999px;transition:color .16s}
.pub-card .password-toggle-btn:hover{color:var(--signal)}
.pub-card .password-suggest-btn{margin-top:7px;padding:0;border:0;background:transparent;font-family:var(--data);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--signal);cursor:pointer;text-decoration:none}
.pub-card .password-suggest-btn:hover{text-decoration:underline}

/* checklist mật khẩu — 3 class trạng thái do auth.js gán: is-pristine / is-ok / is-bad */
.pub-card .password-rules-checklist{display:flex;flex-wrap:wrap;gap:7px 16px;margin:0 0 17px;padding:0;list-style:none}
.pub-card .password-rule-item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.pub-card .password-rule-icon{width:13px;height:13px;border-radius:999px;border:1.4px solid var(--edge);flex:0 0 auto;position:relative;transition:border-color .16s,background .16s}
.pub-card .password-rule-item.is-ok{color:#2E7D32}
.pub-card .password-rule-item.is-ok .password-rule-icon{background:#2E7D32;border-color:#2E7D32}
.pub-card .password-rule-item.is-ok .password-rule-icon::after{content:"";position:absolute;left:4px;top:1px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.pub-card .password-rule-item.is-bad{color:var(--signal)}
.pub-card .password-rule-item.is-bad .password-rule-icon{border-color:var(--signal)}

/* điều khoản */
.pub-card .pubrev-terms-row label{display:flex;align-items:flex-start;gap:9px;font-family:var(--body);font-size:14px;letter-spacing:0;text-transform:none;color:var(--graphite);margin:0}
.pub-card .pubrev-terms-row input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex:0 0 auto;accent-color:var(--signal)}
.pub-card .pubrev-terms-row a{color:var(--signal);text-decoration:underline}

/* nút gửi */
/* ⚠️ width:fit-content — KHONG dung width:auto.
   Tren block box, `auto` nghia la LAP DAY khung chua, khong phai co theo noi dung.
   PUB-A.1 dung `auto` ⇒ nut rong 793px (do duoc tren beta v=9), min-width va
   margin:auto deu vo tac dung. Chi `fit-content` moi co shrink-to-fit.
   Media query 560px ngay duoi dat width:100% — ghi de dung, giu nguyen. */
.pub-card .btn-register{display:block;margin:4px auto 0;width:fit-content;min-width:280px;max-width:100%;font-family:var(--data);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--signal);color:#fff;border:0;padding:15px 44px;border-radius:999px;cursor:pointer;transition:filter .16s}
@media(max-width:560px){ .pub-card .btn-register{width:100%;min-width:0;padding:15px 24px} }
.pub-card .btn-register:hover{filter:brightness(1.08)}

/* lỗi + thông báo */
.pub-card .error{display:block;margin-top:6px;font-size:12.5px;color:var(--signal);line-height:1.4}
.pub-card .alert{border-radius:3px;padding:12px 14px;font-size:14px;margin-bottom:16px;border:1px solid}
.pub-card .alert-warning{background:#FDF3F1;border-color:var(--signal);color:var(--signal)}
.pub-card .alert-success{background:#F0F7F0;border-color:#2E7D32;color:#2E7D32}
.pub-signup-expectation{margin:16px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.pub-card-alt{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.pub-card-alt a{color:var(--signal);text-decoration:underline}

/* honeypot: KHONG khai o day. Da co chu so huu tai site.css:1148.
   Khai lai o file nay se tao hai nguon su that cho mot quy tac lien quan chong bot. */

/* Select2 v3 — publisher.php tự đăng ký, KHÔNG có trong PublicAsset */
.pub-card .select2-container{width:100%!important}
.pub-card .select2-container .select2-choice{height:auto;padding:13px 14px;background:var(--paper);background-image:none;border:1px solid var(--edge);border-radius:3px;box-shadow:none;font-size:15.5px;color:var(--graphite);line-height:1.3}
.pub-card .select2-container.select2-container-active .select2-choice{border-color:var(--signal);background:#fff}
.pubrev-country-select2-drop{border:1px solid var(--edge);border-radius:3px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);font-size:15px}
.pubrev-country-select2-drop .select2-results .select2-highlighted{background:var(--signal);color:#fff}

/* ── bổ sung vào khối GHI ĐÈ theme ở cuối file ── */
body.pubrev-2026 .pub-say h2{color:#fff!important;font-family:var(--display)!important}
body.pubrev-2026 .pub-value b,
body.pubrev-2026 .pub-value span{color:#B9C2DC!important}
body.pubrev-2026 .pub-value b{color:#fff!important}
body.pubrev-2026 .pub-card h2,
body.pubrev-2026 .pub-pm-hd h2,
body.pubrev-2026 .pub-step h3{color:var(--graphite)!important;font-family:var(--display)!important}
body.pubrev-2026 .pub-step p,
body.pubrev-2026 .pub-pm-hd p{color:var(--muted)!important;font-family:var(--body)!important}
body.pubrev-2026 .pub-benefit b{color:var(--graphite)!important;font-family:var(--body)!important}
body.pubrev-2026 .pub-step-n,
body.pubrev-2026 .pub-pm-name{font-family:var(--data)!important}
body.pubrev-2026 .pub-card label{color:var(--muted)!important;font-family:var(--data)!important}

/* ═══════════════════════════════════════════════════════════════════
   TRẠNG THÁI LỖI BIỂU MẪU  —  PUB-B.1
   Dùng --alert, KHÔNG dùng --signal. Cam chỉ dành cho hành động (§2).

   !important + tiền tố body.pubrev-2026 vì có rule NGOÀI file này đang
   ép màu chữ lỗi về var(--graphite) — đo được rgb(27,32,51) trên
   /publishers. Chưa xác định chủ sở hữu (site.css / frontend.css /
   Metronic). Rule dưới thắng bất kể thủ phạm là ai.
   ═══════════════════════════════════════════════════════════════════ */
body.pubrev-2026 .pub-card .error,
body.pubrev-2026 .pub-card .text-danger,
body.pubrev-2026 .au-err,
body.pubrev-2026 .ct-err { color: var(--alert) !important; }

/* .ct-err chưa từng có rule nào — trang Contact đang thiếu từ REDESIGN-1 */
.ct-err{display:block;font-size:13px;margin-top:7px;line-height:1.4;min-height:1px}

/* WCAG 1.4.1 — không truyền đạt lỗi CHỈ bằng màu. Viền ô nhập đổi theo.
   :has() — Chrome 105+ · Safari 15.4+ · Firefox 121+.
   Trình duyệt cũ suy giảm êm: mất viền, chữ vẫn đổi màu. Không đụng auth.js. */
.pub-card .pubrev-field-group:has(> .error:not(:empty)) input:not([type="checkbox"]),
.pub-card .pubrev-field-group:has(> .error:not(:empty)) select,
.pub-card .pubrev-field-pair > div:has(> .error:not(:empty)) input:not([type="checkbox"]),
.pub-card .pubrev-field-pair > div:has(> .error:not(:empty)) select{border-color:var(--alert)}

/* ═══════════════════════════════════════════════════════════════════
   RESET-1 — mo rong he au- cho luong dat lai mat khau
   Tai su dung toan bo .au-bar .au-main .au-grid .au-say .au-card
   .au-f .au-pw .au-eye .au-err .au-alt .au-foot cua man Login.
   Chi them: chi bao buoc, khoi thong diep, nut phu.
   ═══════════════════════════════════════════════════════════════════ */
.au-steps{display:flex;align-items:center;gap:9px;margin:0 0 24px;padding:0;list-style:none}
.au-stp{display:flex;align-items:center;gap:8px;font-family:var(--data);font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.au-stp i{width:22px;height:22px;flex:0 0 auto;border-radius:999px;border:1px solid var(--edge);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;background:var(--card)}
.au-stp.on{color:var(--graphite)}
.au-stp.on i{background:var(--signal);border-color:var(--signal);color:#fff}
.au-stp.done i{background:var(--graphite);border-color:var(--graphite);color:#fff}
.au-stp-sep{flex:1 1 auto;min-width:10px;height:1px;background:var(--edge)}
.au-steps li{margin:0;padding:0}
/* ⚠️ PHAI dung .au-card .au-msg (0,2,0), KHONG dung .au-msg (0,1,0):
   rule co san `.au-card > p` (dong 348) co specificity (0,1,1) va se THANG.
   Cung ly do khien `.au-alt` tren man Login dang bi ghi de margin ma khong ai
   phat hien. Do khi viet, khong doan. */
.au-card .au-msg{margin:0 0 16px;font-size:15.5px;line-height:1.62;color:var(--muted)}
.au-card .au-msg b{color:var(--graphite);font-weight:600}
.au-card .au-msg a{color:var(--signal);text-decoration:underline}
.au-card .au-note{margin:16px 0 0;padding:13px 15px;background:var(--paper);border:1px solid var(--edge);border-radius:3px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.au-card .au-note a{color:var(--signal);text-decoration:underline}
@media(max-width:560px){ .au-stp span{display:none} .au-steps{gap:7px} }