/* Ari Rewards — kiểu dáng dùng chung cho mọi trang /rewards/ và /admin/rewards/ (kiến trúc sư giữ tệp này; người viết trang cần
   kiểu mới thì xin thêm — HOP-DONG-H1.md §5).

   HAI KHUÔN (26/09/2026, làn giao diện Rewards — QĐ-50 nền sáng + QĐ-53 "Tạp chí sống"):
   1. Trang NGƯỜI CHƠI  <body class="rw rw-sang">: nạp SAU assets/ari-tokens.css + assets/ari-chung.css (khung chung của cả web:
      thanh điều hướng viên kính, chân trang kính đen, thanh đáy điện thoại). Nền hồng trắng, chữ đen, thẻ kính trắng, nút viên thuốc.
      Bộ màu ở mục "NỀN SÁNG" cuối tệp: ÁNH XẠ các biến cũ (--canvas, --panel, --accent, --text-primary…) sang token mới, nên mọi
      tệp đang dùng biến cũ (di-san.css, bo-cau.css, trang con) tự đổi theo.
      Khối nổi bật giữ KÍNH ĐEN ("đảo tối"): .dao, .card.noi, thẻ Di Sản xà cừ (.ds-the) — đặt lại biến về bộ tối bên trong.
   2. Trang QUẢN TRỊ     <body class="rw rw-admin">: GIỮ nền tối cũ (BAN-DO-MAU.md mục 10) — bộ biến tối ở :root ngay dưới,
      thanh trên .topnav + chân trang .chan kiểu cũ chỉ áp cho .rw-admin.
   Luật màu nền sáng (ari-tokens.css): hồng thương hiệu #F284B5 KHÔNG làm chữ trên nền sáng — chữ nhấn dùng #A8305E / #8E2456;
   nút hồng giữ chữ gần đen. Không chữ nào nhỏ hơn 13px ở trang người chơi. */

:root{
  --canvas:#171110;
  --panel:#211917;
  --panel-2:#2a201d;
  --accent:#F58BAF;
  --accent-hover:#FFA6C2;
  --accent-muted:#7A4257;
  --lavender:#B9A3F0;
  --mint:#8FD8C6;
  --sky:#9CC8F2;
  --butter:#F6D98B;
  --peach:#FFC2A1;
  --text-primary:#F5EDE8;
  --text-secondary:#B9A9A2;
  --line:rgba(245,139,175,.16);
  --line-soft:rgba(245,237,232,.08);
  --danger:#ff9c9c;
  --ok:#8FD8C6;
  /* vai trò (26/09) — tách "nền nút hồng" khỏi "chữ nhấn" để nền sáng dùng được hai màu khác nhau */
  --nut-nen:#F58BAF;
  --nut-nen-hover:#FFA6C2;
  --nut-chu:#2a0f1a;
  --nut-bong:0 5px 22px rgba(245,139,175,.16);
  --nut-bong-hover:0 10px 30px rgba(245,139,175,.26);
  --ghost-vien:rgba(245,139,175,.42);
  --ghost-nen-hover:rgba(245,139,175,.10);
  --o-nen:rgba(12,9,11,.55);
  --o-vien:rgba(245,139,175,.22);
  --o-mo:rgba(185,169,162,.55);
  --loi-chu:#ffc9c9;
  --flow:cubic-bezier(.32,.86,.34,1);
  --e1:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(16px,5vw,80px);
  --r-card:22px;
  --r-field:12px;
}
html:has(> body.rw-admin),body.rw:not(.rw-sang){color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.rw{
  margin:0;min-height:100vh;color:var(--text-primary);
  font-family:"Be Vietnam Pro",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1rem,.97rem + .15vw,1.06rem);line-height:1.62;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
body.rw:not(.rw-sang){
  /* Ánh sáng nền rất nhẹ: hồng góc trái, tím góc phải, xanh trời phía dưới — "vòng tròn mềm" của YÊU CẦU §7.1. */
  background:
    radial-gradient(900px 520px at -8% -6%,rgba(245,139,175,.11),transparent 62%),
    radial-gradient(900px 560px at 108% 4%,rgba(185,163,240,.10),transparent 60%),
    radial-gradient(1000px 640px at 50% 118%,rgba(156,200,242,.07),transparent 64%),
    var(--canvas);
}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.12;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
.mono{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.nho{font-size:.86rem;color:var(--text-secondary)}
.mo{color:var(--text-secondary)}
.an-chu{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#2a0f1a;padding:12px 18px;z-index:99;border-radius:0 0 12px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------------------------------------------------------------- thanh điều hướng CŨ (chỉ trang quản trị) */
.rw-admin .topnav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:12px var(--gut);
  background:rgba(23,17,16,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,139,175,.1);
}
.rw-admin .topnav .brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;min-height:44px}
.rw-admin .topnav .brand img{width:30px;height:auto;flex:none;display:block;filter:drop-shadow(0 0 10px rgba(245,139,175,.22))}
.rw-admin .topnav .brand b{font-family:Fraunces,serif;font-weight:600;font-size:1.04rem;color:var(--text-primary);white-space:nowrap}
.rw-admin .topnav .brand b span{color:var(--accent)}
.rw-admin .topnav .links{display:flex;gap:22px}
.rw-admin .topnav .links a{text-decoration:none;color:var(--text-secondary);font-size:.86rem;min-height:44px;display:inline-flex;align-items:center;
  transition:color .3s var(--e1)}
.rw-admin .topnav .links a:hover,.rw-admin .topnav .links a[aria-current]{color:var(--text-primary)}
@media (max-width:760px){.rw-admin .topnav .links{display:none}}

/* ---------------------------------------------------------------- nút (ba tầng như trang Công cụ) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--nut-nen);color:var(--nut-chu);text-decoration:none;
  padding:13px 24px;min-height:52px;border-radius:999px;
  font-family:inherit;font-weight:600;font-size:.94rem;line-height:1.3;text-align:center;
  border:1px solid transparent;cursor:pointer;
  transition:background .6s var(--flow),transform .6s var(--flow),box-shadow .6s var(--flow),border-color .6s var(--flow);
  box-shadow:var(--nut-bong);-webkit-tap-highlight-color:transparent;
}
.btn:hover{color:var(--nut-chu)}
@media (hover:hover){
  .btn:hover{background:var(--nut-nen-hover);transform:translateY(-2px);box-shadow:var(--nut-bong-hover)}
  .btn.ghost:hover{background:var(--ghost-nen-hover);border-color:var(--accent);color:var(--text-primary)}
}
.btn:active{transform:scale(.97);transition-duration:.12s}
.btn.ghost{background:transparent;color:var(--text-primary);border:1px solid var(--ghost-vien);box-shadow:none;font-weight:500}
.btn.big{padding:15px 30px;min-height:56px;font-size:1rem}
.btn.nho{min-height:44px;padding:9px 18px;font-size:.88rem}
.btn[disabled],.btn[aria-disabled="true"]{background:rgba(255,255,255,.06);color:rgba(245,237,232,.42);
  border:1px dashed rgba(255,255,255,.22);box-shadow:none;cursor:not-allowed;transform:none}
.rw-admin .topnav .btn{min-height:44px;padding:10px 18px;font-size:.88rem;font-weight:500}
.lnk{background:none;border:0;padding:12px 2px;color:var(--accent);font:inherit;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;min-height:44px}
.hang-nut{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.f-nut{display:inline}
@media (max-width:559.98px){
  .btn.big{width:100%}
  .hang-nut > .btn{flex:1 1 0;min-width:max-content}
  .hang-nut > .btn.big{flex-grow:2}
}

/* ---------------------------------------------------------------- bố cục */
main{padding-top:clamp(28px,6vh,64px)}
.wrap{max-width:820px;margin:0 auto;padding:0 var(--gut) clamp(60px,9vh,100px)}
.wrap.hep{max-width:520px}
.wrap.rong{max-width:1120px}
.dai-thu{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px;padding:10px 14px;border-radius:14px;
  font-size:.84rem;color:var(--text-secondary);background:rgba(185,163,240,.06);border:1px solid rgba(185,163,240,.2)}

.rw-hero{padding:clamp(8px,3vh,28px) 0 6px}
.rw-hero .kick{color:var(--accent);margin-bottom:12px}
.rw-hero h1{font-size:clamp(2rem,5vw,3.1rem)}
.rw-hero h1 em{font-style:normal;color:var(--accent)}
.rw-hero .lede{margin-top:14px;color:var(--text-secondary);font-size:1.04rem;max-width:58ch}
.rw-hero.gon h1{font-size:clamp(1.7rem,4.2vw,2.3rem)}

.card{position:relative;margin-top:24px;padding:clamp(20px,4.5vw,32px);border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 40%),var(--panel);
  border:1px solid var(--line);box-shadow:0 24px 60px -40px rgba(0,0,0,.8)}
.card + .card{margin-top:14px}
.card h2{font-size:1.2rem}
.card .hint,.card .mo-ta{margin-top:8px;color:var(--text-secondary);font-size:.88rem;line-height:1.55}
.card.noi{border-color:rgba(245,139,175,.42);
  background:radial-gradient(420px 220px at 100% 0,rgba(185,163,240,.12),transparent 70%),
             linear-gradient(150deg,rgba(245,139,175,.12),rgba(245,139,175,.03)),var(--panel)}
.card.trang-loi h1{font-size:1.5rem}
.card.trang-loi p{margin-top:12px;color:var(--text-secondary)}

/* hàng nhãn — giá trị (hồ sơ, thông tin tài khoản) */
.hang{display:grid;gap:0;margin-top:16px}
.hang > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--line-soft)}
.hang > div:last-child{border-bottom:0}
.hang dt,.hang .nhan-hang{color:var(--text-secondary);font-size:.88rem}
.hang dd,.hang .gia-tri{margin:0;text-align:right;overflow-wrap:anywhere}

/* danh sách chấm / đánh số trong thẻ (thể lệ, riêng tư, "cách hoạt động", hậu quả xoá tài khoản) */
.van{margin:12px 0 0;padding-left:1.3em;display:grid;gap:9px;line-height:1.58}
.van li::marker{color:var(--accent)}

/* số điện thoại / mã tài khoản: chữ số đều cột, không bẻ dòng giữa số (rw_ui_phone, "Mã tài khoản") */
.so{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}

/* ---------------------------------------------------------------- biểu mẫu */
form .o + .o,form .o + .o-kiem,form .o-kiem + .o-kiem,form .o-kiem + .o,form .chon-av + .o,form .o + .chon-av{margin-top:16px}
.o{display:block;font-size:.88rem;color:var(--text-secondary)}
.o .req,.chon-av .req{color:var(--accent)}
.o input{
  display:block;width:100%;margin-top:7px;padding:12px 14px;min-height:50px;border-radius:var(--r-field);
  background:var(--o-nen);border:1px solid var(--o-vien);color:var(--text-primary);
  font-family:inherit;font-size:1rem;transition:border-color .4s var(--flow),box-shadow .4s var(--flow);
}
.o input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,139,175,.16)}
.o input[aria-invalid="true"]{border-color:var(--danger)}
.o input::placeholder{color:var(--o-mo)}
.goi-y{display:block;margin-top:6px;font-size:.8rem;color:var(--text-secondary);opacity:.85}
.o-loi{display:block;margin-top:6px;font-size:.82rem;color:var(--loi-chu)}

.o-kiem{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:.9rem;color:var(--text-secondary);min-height:44px;padding:4px 0}
.o-kiem input{position:absolute;opacity:0;width:1px;height:1px}
.o-kiem .hop{flex:none;width:24px;height:24px;margin-top:1px;border-radius:7px;border:1.5px solid rgba(245,139,175,.5);
  background:var(--o-nen);display:grid;place-items:center;transition:background .3s var(--flow),border-color .3s var(--flow)}
.o-kiem input:checked + .hop{background:var(--nut-nen);border-color:var(--nut-nen)}
.o-kiem input:checked + .hop::after{content:"";width:6px;height:11px;border:solid var(--nut-chu);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.o-kiem input:focus-visible + .hop{outline:2px solid var(--accent);outline-offset:3px}
.o-kiem .chu small{display:block;margin-top:3px;font-size:.8rem;opacity:.85}
.o-kiem a{color:var(--accent)}

/* ô bẫy chống máy — người thật không thấy */
.bay{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------- avatar */
.av{display:block;flex:none;border-radius:50%;object-fit:cover;background:var(--panel-2);
  box-shadow:0 0 0 2px rgba(245,139,175,.25)}
.av-lon{width:clamp(96px,26vw,140px);height:auto;box-shadow:0 0 0 3px rgba(245,139,175,.4),0 16px 44px -18px rgba(245,139,175,.55)}

.chon-av{border:0;margin:0;padding:0;min-width:0}
.chon-av legend{padding:0;font-size:.88rem;color:var(--text-secondary)}
.chon-av .ho-av{margin:16px 0 8px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);opacity:.8}
.luoi-av{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px}
.o-av{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:18px;cursor:pointer;
  background:rgba(12,9,11,.45);border:1px solid var(--line-soft);transition:border-color .3s var(--flow),background .3s var(--flow),transform .3s var(--flow)}
.o-av input{position:absolute;opacity:0;width:1px;height:1px}
.o-av .av{width:78%;height:auto;box-shadow:none;transition:transform .4s var(--flow)}
.o-av:hover{border-color:rgba(245,139,175,.4)}
.o-av:has(input:checked){border-color:var(--accent);background:rgba(245,139,175,.12);box-shadow:0 0 0 3px rgba(245,139,175,.18)}
.o-av input:checked + .av{transform:scale(1.06)}
.o-av:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:420px){.luoi-av{grid-template-columns:repeat(4,1fr);gap:8px}}
/* ngũ hành (05/10/2026): mỗi nhóm một hàng 10 bậc (màn hẹp: 2 hàng 5 ô); ô chưa mở vẫn thấy hình, mờ + ổ khoá + "Cấp N" */
.luoi-nt{grid-template-columns:repeat(5,minmax(0,1fr))}
.luoi-nt-5{max-width:440px}
@media (min-width:760px){.luoi-nt:not(.luoi-nt-5){grid-template-columns:repeat(10,minmax(0,1fr))}}
@media (max-width:420px){.luoi-nt{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}}
.o-av .av-ten{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:.72rem;font-weight:600;color:var(--text-secondary);pointer-events:none}
.luoi-nt-5 .o-av .av{width:64%;margin-bottom:12px}
/* ô hẹp (điện thoại): tên nhóm nằm DƯỚI hình, không đè lên hình */
@media (max-width:520px){.luoi-nt-5 .o-av{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px 6px}
  .luoi-nt-5 .o-av .av{width:76%;margin-bottom:0}.luoi-nt-5 .o-av .av-ten{position:static;line-height:1.2}}
.o-av-khoa{cursor:not-allowed}
.o-av-khoa:hover{border-color:var(--line-soft)}
.o-av-khoa .av{opacity:.42;filter:grayscale(.55)}
.av-khoa{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:3px;padding:1px 6px;
  border-radius:999px;background:rgba(23,17,16,.72);color:#fff;font-size:.66rem;font-weight:600;line-height:1.5;white-space:nowrap;pointer-events:none}
.av-khoa svg{flex:none}
.chon-av .goi-y-nt{margin-top:10px}
.rw-sang .o-av-khoa:hover{border-color:var(--c-line)}

/* ---------------------------------------------------------------- thông báo, nhãn */
.note{margin-top:18px;padding:12px 15px;border-radius:14px;font-size:.9rem;line-height:1.58;
  color:var(--text-secondary);background:rgba(245,139,175,.05);
  border:1px solid var(--line);border-left:3px solid rgba(245,139,175,.42)}
.note strong{color:var(--text-primary);font-weight:500}
.note.ok{background:rgba(143,216,198,.07);border-color:rgba(143,216,198,.28);border-left-color:var(--mint);color:#cdeee5}
.note.loi{background:rgba(255,110,110,.10);border-color:rgba(255,110,110,.34);border-left-color:#ff8a8a;color:#ffd2d2}
.note.canh_bao{background:rgba(246,217,139,.07);border-color:rgba(246,217,139,.28);border-left-color:var(--butter);color:#f3e6c4}
.note.thong_tin{background:rgba(156,200,242,.06);border-color:rgba(156,200,242,.24);border-left-color:var(--sky)}
.note a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.nhan{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:500;
  letter-spacing:.02em;white-space:nowrap;vertical-align:middle;border:1px solid transparent}
.nhan-xam{color:var(--text-secondary);background:rgba(245,237,232,.06);border-color:rgba(245,237,232,.14)}
.nhan-hong{color:#ffd0df;background:rgba(245,139,175,.13);border-color:rgba(245,139,175,.32)}
.nhan-tim{color:#ddd2ff;background:rgba(185,163,240,.13);border-color:rgba(185,163,240,.32)}
.nhan-xanh{color:#c9f1e7;background:rgba(143,216,198,.12);border-color:rgba(143,216,198,.3)}
.nhan-vang{color:#f7e7bd;background:rgba(246,217,139,.12);border-color:rgba(246,217,139,.3)}

/* ---------------------------------------------------------------- bảng (danh sách, admin) */
.bang-cuon{overflow-x:auto;margin-top:16px;border-radius:14px;border:1px solid var(--line-soft)}
.bang{width:100%;border-collapse:collapse;font-size:.88rem}
.bang th,.bang td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.bang th{font-weight:500;color:var(--text-secondary);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.02)}
.bang tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- chân trang CŨ (chỉ trang quản trị) */
.rw-admin .chan{padding:40px var(--gut) 52px;border-top:1px solid rgba(245,139,175,.11);color:var(--text-secondary);font-size:.86rem;margin-top:24px}
.rw-admin .chan .inner{max-width:1120px;margin:0 auto;display:flex;gap:22px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.rw-admin .chan .flogo{width:96px;height:auto;display:block;margin-bottom:12px;opacity:.95}
.rw-admin .chan .nho{max-width:44ch}
.rw-admin .chan .lien-ket{display:flex;flex-wrap:wrap;gap:4px 18px}
.rw-admin .chan a{color:var(--accent);text-decoration:none;display:inline-block;padding:12px 2px}
.rw-admin .chan a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}


/* =====================================================================================================================
 * NỀN SÁNG — trang người chơi (body.rw-sang). Cần ari-tokens.css + ari-chung.css nạp trước.
 * ===================================================================================================================== */

/* ---------- 1. Ánh xạ biến cũ → token mới (mọi tệp dùng biến cũ tự đổi theo) ---------- */
body.rw-sang{
  --canvas:var(--c-bg);
  --panel:#FFFFFF;
  --panel-2:var(--p-pink-100);
  --accent:var(--c-text-accent);            /* #A8305E — chữ nhấn / liên kết (6,4:1 trên trắng) */
  --accent-hover:var(--c-text-accent-sm);   /* #8E2456 */
  --accent-muted:var(--p-pink-300);
  --lavender:#5E43B0;                       /* tím oải hương đậm để làm CHỮ trên nền sáng (~7:1) */
  --mint:#1D7560;
  --sky:#2A659A;
  --butter:#8A6414;
  --peach:#A4512B;
  --text-primary:var(--c-text);
  --text-secondary:var(--c-text-2);
  --line:var(--c-line);
  --line-soft:var(--c-line-soft);
  --danger:#B42318;
  --ok:#1D7560;
  --nut-nen:var(--c-brand);
  --nut-nen-hover:var(--c-brand-hover);
  --nut-chu:var(--c-text-on-brand);
  --nut-bong:0 8px 22px -12px rgb(194 74 126 / .55);
  --nut-bong-hover:var(--sh-glow);
  --ghost-vien:var(--c-line-strong);
  --ghost-nen-hover:rgb(255 255 255 / .92);
  --o-nen:#FFFFFF;
  --o-vien:rgb(168 48 94 / .26);
  --o-mo:var(--p-ink-300);
  --loi-chu:#B42318;
  --gut:var(--gutter);
  --r-card:var(--r-lg);
  --r-field:14px;
  color:var(--c-text);
  font-family:var(--f-doc);
  font-size:var(--fs-body);
  line-height:1.65;
}

/* ---------- 2. "Đảo tối" — khối nổi bật kính đen (thẻ thành viên, mùa đang diễn ra, thẻ Di Sản) ---------- */
.rw-sang .dao,.rw-sang .card.noi,.rw-sang .ds-the{
  --panel:var(--p-ink-900);
  --panel-2:#2A2026;
  --accent:var(--c-text-accent-on-dark);    /* #F284B5 trên đen */
  --accent-hover:var(--p-pink-300);
  --lavender:#C9B8F7;
  --mint:#8FD8C6;
  --sky:#9CC8F2;
  --butter:#F6D98B;
  --text-primary:var(--c-text-invert);
  --text-secondary:var(--c-text-invert-2);
  --line:rgb(242 132 181 / .24);
  --line-soft:rgb(255 245 248 / .12);
  --ghost-vien:rgb(242 132 181 / .5);
  --ghost-nen-hover:rgb(242 132 181 / .14);
  --o-nen:rgb(255 255 255 / .07);
  --o-vien:rgb(242 132 181 / .32);
  --o-mo:#A8969F;
  --loi-chu:#FFB9B9;
  --danger:#FF9C9C;
  color:var(--text-primary);
}
.rw-sang .dao :focus-visible,.rw-sang .card.noi :focus-visible,.rw-sang .ds-the :focus-visible{outline-color:var(--p-pink-400)}

/* ---------- 3. Bố cục + khoảng dưới thanh điều hướng nổi ---------- */
.rw-sang main.rw-main{padding-top:calc(12px + 58px + clamp(18px,3vw,30px))}
@media (max-width:767px){ .rw-sang main.rw-main{padding-top:calc(8px + 54px + 14px)} }
.rw-sang .wrap{max-width:860px;padding:0 var(--gutter) clamp(64px,9vw,112px)}
.rw-sang .wrap.hep{max-width:580px}
.rw-sang .so{padding-block:0}                 /* ari-chung.css có .so {padding-block} cho mục "Sợ gì" của trang chủ */

/* thanh Rewards dưới thanh điều hướng chung */
.rw-thanh{max-width:calc(860px + 2 * var(--gutter));margin:0 auto 6px;padding:0 var(--gutter)}
.rw-thanh-vo{display:flex;align-items:center;gap:6px;padding:5px;border-radius:var(--r-pill);background:var(--glass-thin-bg);
  border:1px solid var(--glass-edge);box-shadow:var(--sh-1)}
.rw-thanh-ten{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 16px 0 12px;border-radius:var(--r-pill);
  background:var(--p-ink-900);color:var(--c-text-invert);text-decoration:none;font:600 .9375rem/1 var(--f-hien);letter-spacing:-.01em}
.rw-thanh-ten .ic{width:18px;height:18px;color:var(--p-pink-400);fill:var(--p-pink-400)}
.rw-thanh-ten b{color:var(--p-pink-400);font-weight:700}
.rw-thanh-ds{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.rw-thanh-ds::-webkit-scrollbar{display:none}
.rw-thanh-ds a{display:inline-flex;align-items:center;flex:none;min-height:44px;padding:0 14px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:.9rem;font-weight:500;color:var(--c-text);text-decoration:none;transition:background-color var(--dur-fast)}
.rw-thanh-ds a:hover{background:rgb(255 255 255 / .85);color:var(--c-text)}
.rw-thanh-ds a[aria-current]{background:rgb(242 132 181 / .22);color:var(--c-text-accent-sm);font-weight:600}
.rw-thanh-ten[aria-current]{box-shadow:inset 0 0 0 2px var(--p-pink-400)}
@media (max-width:559px){
  .rw-thanh-ten > span:not(.an-chu){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rw-thanh-ten{padding:0;width:44px;justify-content:center}
}

/* nút tài khoản trong thanh điều hướng chung (chỗ tai-khoan.js đặt nút ở trang tĩnh) */
.nav-vo .tk{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;max-width:220px;padding:4px 14px 4px 4px;margin-right:6px;
  border-radius:var(--r-pill);background:rgb(255 255 255 / .78);border:1px solid var(--c-line-strong);color:var(--c-text);
  text-decoration:none;font:600 .9rem/1.2 var(--f-doc);transition:border-color var(--dur-fast),background-color var(--dur-fast)}
.nav-vo .tk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-vo .tk:hover,.nav-vo .tk[aria-current]{background:#fff;border-color:var(--c-text-accent);color:var(--c-text)}
.nav-vo .tk .av{width:34px;height:34px;box-shadow:0 0 0 2px #fff}
.rw-sang .nav-vo .btn:not(.nav-zalo){flex:none;margin-right:6px;min-height:44px;padding:8px 16px;font:600 .9rem/1.2 var(--f-doc);
  background:var(--p-ink-900);color:var(--c-text-invert);border:0;box-shadow:none;transform:none}
@media (hover:hover){ .rw-sang .nav-vo .btn:not(.nav-zalo):hover{background:var(--p-ink-700);color:var(--c-text-invert);box-shadow:none} }
.rw-sang .nav-vo .btn:not(.nav-zalo)[aria-current]{box-shadow:inset 0 0 0 2px var(--p-pink-400)}
@media (max-width:767px){
  .nav-vo .tk{padding:0;width:44px;justify-content:center;margin-right:4px}
  .nav-vo .tk span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rw-sang .nav-vo .btn:not(.nav-zalo){margin-right:4px;padding-inline:14px}
}

/* dải Rewards trên chân trang chung */
.rw-chan{padding:0 var(--gutter) clamp(28px,4vw,48px)}
.rw-chan-vo{max-width:860px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;
  padding-top:22px;border-top:1px solid var(--c-line)}
.rw-chan .nho{max-width:46ch;color:var(--c-text-2)}
.rw-chan-lk{display:flex;flex-wrap:wrap;gap:0 4px}
.rw-chan-lk a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--c-text-accent);font-weight:500;text-underline-offset:4px}

/* ---------- 4. Chữ (kiểu tạp chí: Bricolage cho tiêu đề, không chữ nào < 13px) ---------- */
.rw-sang h1,.rw-sang h2,.rw-sang h3{font-family:var(--f-hien);font-weight:650;font-stretch:98%;letter-spacing:-.02em;line-height:1.1}
.rw-sang .mono{font-family:var(--f-doc);font-size:.8125rem;font-weight:600;letter-spacing:.12em}
.rw-sang .kick{display:flex;align-items:center;gap:14px;color:var(--c-text-accent-sm);margin-bottom:14px}
.rw-sang .kick::after{content:"";width:56px;height:1px;background:currentColor;opacity:.55;flex:none}
.rw-sang .kick a{color:inherit}
.rw-sang .rw-hero{padding:clamp(14px,3vw,34px) 0 8px}
.rw-sang .rw-hero h1{font-weight:700;font-stretch:96%;font-size:clamp(2.5rem,6.4vw,4.4rem);line-height:1.03;letter-spacing:-.024em;max-width:16ch}
.rw-sang .rw-hero h1 em{font-style:normal;color:var(--c-text-accent);background:linear-gradient(transparent 68%,rgb(242 132 181 / .28) 68%) no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.rw-sang .rw-hero.gon h1{font-size:clamp(2.1rem,5vw,3.25rem)}
.rw-sang .rw-hero .lede{margin-top:18px;font-size:var(--fs-lead);line-height:1.55;color:var(--c-text-2);max-width:54ch;text-wrap:pretty}
.rw-sang .nho{font-size:.875rem}
.rw-sang .card h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem)}
.rw-sang .card .hint,.rw-sang .card .mo-ta{font-size:.9375rem;line-height:1.6}
.rw-sang .card h3{font-size:1.125rem}

/* ---------- 5. Thẻ kính trắng ---------- */
.rw-sang .card{margin-top:22px;padding:clamp(22px,4.2vw,36px);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgb(255 255 255 / .9),rgb(255 255 255 / .72));
  border:1px solid var(--glass-edge);box-shadow:var(--sh-glass)}
.rw-sang .card + .card{margin-top:16px}
.rw-sang .card.noi{border:1px solid rgb(255 255 255 / .08);
  background:radial-gradient(520px 260px at 100% 0,rgb(242 132 181 / .22),transparent 70%),
             radial-gradient(420px 240px at 0 100%,rgb(221 203 250 / .12),transparent 70%),var(--p-ink-900);
  box-shadow:var(--sh-ink),inset 0 1px 0 rgb(255 255 255 / .08)}
.rw-sang .card.noi .hint{color:var(--c-text-invert-2)}
@media (prefers-reduced-transparency:reduce){ .rw-sang .card{background:#fff} .rw-thanh-vo{background:#fff} }

/* ---------- 6. Nút (viên thuốc của khung chung) ---------- */
.rw-sang .btn{font-family:var(--f-doc);font-weight:600;font-size:.97rem;min-height:48px;padding:12px 24px;
  transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-fast)}
.rw-sang .btn.big{min-height:56px;padding:15px 30px;font-size:1.05rem}
.rw-sang .btn.nho{min-height:44px;padding:8px 18px;font-size:.9rem}
.rw-sang .btn.ghost{background:var(--glass-thin-bg);border-color:var(--ghost-vien);color:var(--text-primary);box-shadow:var(--sh-1)}
.rw-sang .dao .btn.ghost,.rw-sang .card.noi .btn.ghost,.rw-sang .ds-the .btn.ghost{background:rgb(255 255 255 / .06);box-shadow:none}
@media (hover:hover){
  .rw-sang .btn:hover{background:var(--nut-nen-hover);box-shadow:var(--nut-bong-hover);transform:translateY(-1px)}
  .rw-sang .btn.ghost:hover{background:var(--ghost-nen-hover);border-color:var(--accent);color:var(--text-primary);box-shadow:var(--sh-1)}
}
.rw-sang .btn[disabled],.rw-sang .btn[aria-disabled="true"]{background:var(--p-ink-100);color:var(--c-text-3);border:1px dashed var(--p-ink-200)}
.rw-sang .lnk{color:var(--accent);font-weight:500}

/* ---------- 7. Biểu mẫu (luật form: nhãn rõ trên ô, ô ≥ 50px chữ 16px, lỗi ngay dưới ô có dấu !, viền đỏ) ---------- */
.rw-sang .o{font-size:.9375rem;color:var(--text-primary)}
.rw-sang .o-nhan{display:block;font-weight:600;line-height:1.35}
.rw-sang .o .req,.rw-sang .chon-av .req{color:var(--danger)}
.rw-sang .o input{margin-top:8px;min-height:52px;padding:13px 16px;font-size:1rem;box-shadow:inset 0 1px 2px rgb(29 21 25 / .05)}
.rw-sang .o input:hover{border-color:var(--c-line-strong)}
.rw-sang .o input:focus{border-color:var(--c-text-accent);box-shadow:0 0 0 4px rgb(242 132 181 / .22)}
.rw-sang .o input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgb(180 35 24 / .10)}
.rw-sang .dao .o input,.rw-sang .card.noi .o input{box-shadow:none}
.rw-sang .goi-y{font-size:.875rem;opacity:1;color:var(--text-secondary);line-height:1.5}
.rw-sang .o-loi{display:flex;gap:7px;align-items:flex-start;margin-top:7px;font-size:.9rem;font-weight:500;line-height:1.45;color:var(--loi-chu)}
.rw-sang .o-loi::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:var(--loi-chu);color:#fff;font:700 .75rem/1 var(--f-doc)}
.rw-sang .co-loi .goi-y{margin-top:4px}
.rw-sang form .o + .o,.rw-sang form .o + .o-kiem,.rw-sang form .o-kiem + .o-kiem,.rw-sang form .o-kiem + .o,
.rw-sang form .chon-av + .o,.rw-sang form .o + .chon-av,.rw-sang form .chon-av + .o-kiem{margin-top:20px}
.rw-sang .o-kiem{font-size:.9375rem;color:var(--text-primary);gap:12px}
.rw-sang .o-kiem .hop{border-color:var(--c-line-strong);background:#fff}
.rw-sang .o-kiem.co-loi .hop{border-color:var(--danger)}
.rw-sang .o-kiem .chu small{font-size:.875rem;opacity:1;color:var(--text-secondary)}
.rw-sang .o-kiem input:checked + .hop{background:var(--p-ink-900);border-color:var(--p-ink-900)}
.rw-sang .o-kiem input:checked + .hop::after{border-color:var(--p-pink-400)}
.rw-sang .chon-av legend{font-size:.9375rem;font-weight:600;color:var(--text-primary)}
.rw-sang .chon-av .ho-av{font-size:.8125rem;opacity:1;color:var(--c-text-accent-sm);letter-spacing:.1em}
.rw-sang .o-av{background:#fff;border-color:var(--c-line)}
.rw-sang .o-av:hover{border-color:var(--c-line-strong)}
.rw-sang .o-av:has(input:checked){border-color:var(--c-text-accent);background:var(--p-pink-100);box-shadow:0 0 0 3px rgb(242 132 181 / .28)}
.rw-sang .dao .o-av,.rw-sang .card.noi .o-av{background:rgb(255 255 255 / .06);border-color:var(--line-soft)}

/* ---------- 8. Avatar ---------- */
.rw-sang .av{background:var(--p-pink-100);box-shadow:0 0 0 2px #fff,0 0 0 3px rgb(242 132 181 / .45)}
.rw-sang .av-lon{box-shadow:0 0 0 4px #fff,0 0 0 5px rgb(242 132 181 / .55),0 18px 44px -18px rgb(194 74 126 / .6)}
.rw-sang .dao .av,.rw-sang .card.noi .av{box-shadow:0 0 0 2px var(--p-ink-900),0 0 0 4px rgb(242 132 181 / .6)}

/* ---------- 9. Thông báo + nhãn viên thuốc (nền sáng) ---------- */
.rw-sang .note{font-size:.9375rem;color:var(--c-text-2);background:rgb(255 255 255 / .78);border:1px solid var(--c-line);
  border-left:4px solid var(--c-brand);border-radius:var(--r-sm)}
.rw-sang .note strong{color:var(--c-text);font-weight:600}
.rw-sang .note.ok{background:#EAF7F2;border-color:rgb(29 117 96 / .28);border-left-color:#1D7560;color:#12493C}
.rw-sang .note.loi{background:#FDECEA;border-color:rgb(180 35 24 / .3);border-left-color:#B42318;color:#7A1A12}
.rw-sang .note.canh_bao{background:#FFF6E0;border-color:rgb(138 100 20 / .3);border-left-color:#B7861F;color:#5C430C}
.rw-sang .note.thong_tin{background:#EEF4FB;border-color:rgb(42 101 154 / .26);border-left-color:#2A659A;color:#1D3F60}
.rw-sang .note.ok strong,.rw-sang .note.loi strong,.rw-sang .note.canh_bao strong,.rw-sang .note.thong_tin strong{color:inherit}
/* Thông báo nền SÁNG nằm trong đảo tối (vd. "Gửi lại thư xác nhận" trong thẻ thành viên ở Ari của tôi): trả biến chữ/nhấn về bộ SÁNG.
   Kiểm độc lập 26/09 đo liên kết hồng nhạt #F284B5 trên nền kem 2,23:1 → nay #A8305E ≈ 6,4:1; viền focus cùng màu (≥ 3:1). */
.rw-sang :is(.dao,.card.noi,.ds-the) .note{--accent:var(--c-text-accent);--accent-hover:var(--p-pink-800);--text-primary:var(--c-text);--text-secondary:var(--c-text-2)}
.rw-sang :is(.dao,.card.noi,.ds-the) .note :focus-visible{outline-color:var(--c-text-accent)}
.rw-sang .nhan{font-size:.8125rem;font-weight:600;padding:4px 11px}
.rw-sang .nhan-xam{color:var(--c-text-2);background:rgb(29 21 25 / .05);border-color:rgb(29 21 25 / .12)}
.rw-sang .nhan-hong{color:var(--p-pink-800);background:var(--p-pink-100);border-color:rgb(168 48 94 / .26)}
.rw-sang .nhan-tim{color:#4B3496;background:#EFEAFD;border-color:rgb(94 67 176 / .26)}
.rw-sang .nhan-xanh{color:#165C4B;background:#E3F5EF;border-color:rgb(29 117 96 / .28)}
.rw-sang .nhan-vang{color:#634708;background:#FBF0D2;border-color:rgb(138 100 20 / .3)}
/* nhãn trong đảo tối: giữ màu gốc (chữ sáng trên nền trong) */
.rw-sang :is(.dao,.card.noi,.ds-the) .nhan-xam{color:var(--c-text-invert-2);background:rgb(255 245 248 / .06);border-color:rgb(255 245 248 / .16)}
.rw-sang :is(.dao,.card.noi,.ds-the) .nhan-hong{color:#FFD0DF;background:rgb(242 132 181 / .14);border-color:rgb(242 132 181 / .36)}
.rw-sang :is(.dao,.card.noi,.ds-the) .nhan-tim{color:#E1D7FF;background:rgb(185 163 240 / .14);border-color:rgb(185 163 240 / .36)}
.rw-sang :is(.dao,.card.noi,.ds-the) .nhan-xanh{color:#C9F1E7;background:rgb(143 216 198 / .13);border-color:rgb(143 216 198 / .32)}
.rw-sang :is(.dao,.card.noi,.ds-the) .nhan-vang{color:#F7E7BD;background:rgb(246 217 139 / .13);border-color:rgb(246 217 139 / .32)}
.rw-sang .dai-thu{font-size:.875rem;color:var(--c-text-2);background:rgb(255 255 255 / .7);border-color:rgb(94 67 176 / .22);border-radius:var(--r-pill);
  padding:8px 16px 8px 8px}

/* ---------- 10. Bảng, danh sách, hàng nhãn ---------- */
.rw-sang .bang-cuon{border-color:var(--c-line);background:#fff}
.rw-sang .bang{font-size:.9375rem}
.rw-sang .bang th{font-size:.8125rem;font-weight:600;color:var(--c-text-2);background:var(--p-pink-50)}
.rw-sang .hang dt,.rw-sang .hang .nhan-hang{font-size:.9375rem}
.rw-sang .van li::marker{color:var(--c-text-accent)}
/* Ô chạm ≥ 44 px (kiểm độc lập 26/09): liên kết mục lục Thể lệ / Riêng tư và liên kết đứng riêng trên dòng nhãn (.kick, vd. "Ari của tôi" ở Hộp thư).
   Liên kết nằm giữa câu trong thông báo (vd. "Ari Tools") chỉ nới vùng chạm bằng đệm dọc — không đổi dòng chữ. */
.rw-sang nav.card .van{gap:0}
.rw-sang nav.card .van a{display:inline-flex;align-items:center;min-height:44px}
.rw-sang .kick a{display:inline-flex;align-items:center;min-height:44px}
.rw-sang .note a{padding-block:13px}

/* ---------- 11. Điện thoại ---------- */
@media (max-width:559.98px){
  .rw-sang .card{border-radius:var(--r-md)}
  .rw-sang .hang > div{flex-direction:column;align-items:flex-start;gap:2px}
  .rw-sang .hang dd,.rw-sang .hang .gia-tri{text-align:left}
}

/* ---------- 12. Nút "Nhắn Zalo" của thanh điều hướng chung mang thêm lớp .btn (cho tai-khoan.js tìm) — không để kiểu .btn của
   Rewards đè lên kiểu .nut của khung chung (cỡ nút, và ẩn ở điện thoại như mọi trang khác) ---------- */
.rw-sang .nav-vo .nav-zalo.btn{min-height:44px;padding:8px 16px;font:600 .9rem/1.2 var(--f-doc);box-shadow:none;transform:none;
  background:var(--c-brand);color:var(--c-text-on-brand)}
@media (hover:hover){ .rw-sang .nav-vo .nav-zalo.btn:hover{background:var(--c-brand-hover);box-shadow:var(--sh-glow)} }
@media (max-width:767px){ .rw-sang .nav-vo .nav-zalo.btn{display:none} }

/* nút nằm trong ô ghi chú: không gạch chân như liên kết chữ (11/10/2026) */
.note a.btn,.card a.btn,.rw-vt a.btn,.rw-sang a.btn{text-decoration:none}

/* "Ba loại điểm" gập lại ở Ari của tôi (C7, 11/10/2026) */
details.hint>summary{cursor:pointer;font-weight:600;padding-block:10px}
details.hint>dl{margin-top:6px}