/* ============================================================
   Võ Lâm Đảo Đào Hoa — giao diện web, tông Đào Hoa Lâu
   Đồng bộ màu với launcher Autoupdate. Hiệu ứng thuần CSS + 1 file JS nhỏ.
   ============================================================ */

@font-face {
  font-family: "FzGBrush";
  src: url("../fonts/FzGBrush.ttf") format("truetype");
  font-display: swap;
}

:root {
  --plum: #553651;
  --plum-dark: #2a1530;
  --plum-deep: #1b0d20;
  --plum-mid: #8a3f6e;
  --rose: #c192b6;
  --blush: #f3ddee;
  --petal: #f6c3dc;
  --petal-hot: #ef9cc4;
  --champ: #e3c98f;
  --ink: #f6e9f2;
  --muted: #c9a9c4;
  --line: rgba(246, 195, 220, 0.16);
  --card: rgba(58, 29, 64, 0.55);
  --card-hi: rgba(90, 48, 92, 0.6);
  --ok: #7fe0a6;
  --bad: #ff9a8a;
  --shadow: 0 18px 50px rgba(10, 4, 14, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x: clip chặn cuộn ngang mà KHÔNG ép overflow-y thành auto (hidden sẽ ép) =>
   tránh tạo container cuộn thứ 2 (gây 2 thanh cuộn dọc + nhảy trang khi cuộn tới đáy). */
html { scroll-behavior: smooth; overflow-x: clip; overflow-anchor: none; }

html { background: #1b0d20; }
body {
  font: 15px/1.6 "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: clip;
}
/* Nền cố định: dùng lớp position:fixed riêng (GPU tự giữ khi cuộn) thay cho background-attachment:fixed
   — cái sau bắt Chrome vẽ lại toàn màn hình mỗi khung hình khi cuộn => giật. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 600px at 15% -8%, #6a2f59 0%, rgba(106, 47, 89, 0) 55%),
    radial-gradient(900px 500px at 100% 0%, #3a1d45 0%, rgba(58, 29, 69, 0) 60%),
    linear-gradient(160deg, #2a1530 0%, #1b0d20 60%, #160a1b 100%);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.brush { font-family: "FzGBrush", "Segoe UI", serif; font-weight: 400; letter-spacing: 1px; }

/* ---------- cánh hoa rơi toàn trang ---------- */
.petals { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.petals span {
  position: absolute; top: -24px; width: 14px; height: 11px;
  background: linear-gradient(135deg, #fde0ee 0%, var(--petal-hot) 100%);
  border-radius: 14px 0 14px 0; opacity: 0.8;
  will-change: transform; animation: petal-fall linear infinite;
}
@keyframes petal-fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(28px, 26vh) rotate(90deg); }
  50%  { transform: translate(-14px, 52vh) rotate(190deg); }
  75%  { transform: translate(22px, 76vh) rotate(280deg); }
  100% { transform: translate(-18px, 104vh) rotate(380deg); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; z-index: 40; padding: 0 20px; } /* trên .shell để menu con không bị nội dung che */
.hero-glow {
  position: absolute; left: 50%; top: -220px; width: 900px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(239, 156, 196, 0.35), rgba(239, 156, 196, 0) 70%);
  filter: blur(8px); pointer-events: none; animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.hero-wrap {
  position: relative; max-width: 1180px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 16px; min-height: 430px;
}

/* nhân vật to, đứng yên + 3 dải nước phát sáng xoáy quanh + vầng sáng sân khấu */
.hero-char { position: relative; width: 392px; flex: 0 0 392px; align-self: flex-end; }
.hero-char::after { /* vầng sáng sân khấu dưới chân nhân vật */
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 300px; height: 90px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(246,195,220,.45), rgba(246,195,220,0) 72%);
  filter: blur(4px); z-index: 0; animation: breathe 6s ease-in-out infinite;
}
.hero-char .char-img {
  position: relative; z-index: 2; width: 392px; height: auto;
  filter: drop-shadow(0 26px 36px rgba(10, 4, 14, 0.6)) drop-shadow(0 0 22px rgba(246,195,220,.18));
  animation: char-in 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes char-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

.ribbon {
  position: absolute; left: 50%; top: 42%; width: 340px; height: 340px; margin: -170px 0 0 -170px;
  border-radius: 50%; z-index: 1; pointer-events: none;
  border: 2px solid transparent;
  border-top-color: rgba(246, 195, 220, 0.75);
  border-right-color: rgba(145, 200, 255, 0.35);
  filter: drop-shadow(0 0 7px rgba(246, 195, 220, 0.6));
  animation: swirl linear infinite;
}
.ribbon.r1 { transform: rotate(0deg) scale(1); animation-duration: 7s; }
.ribbon.r2 { transform: rotate(120deg) scale(0.82); border-top-color: rgba(145, 200, 255, 0.6); animation-duration: 9s; animation-direction: reverse; }
.ribbon.r3 { transform: rotate(240deg) scale(0.64); border-top-color: rgba(227, 201, 143, 0.6); animation-duration: 11s; }
@keyframes swirl { to { transform: rotate(360deg); } }
/* khi trang đã tải xong, cho xoáy nhanh hơn (JS thêm .ready vào body) */
body.ready .ribbon.r1 { animation-duration: 3.4s; }
body.ready .ribbon.r2 { animation-duration: 4.6s; }
body.ready .ribbon.r3 { animation-duration: 5.8s; }

.hero-main { flex: 1; padding: 30px 0 46px; min-width: 0; }
.demo-badge {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 20px;
  background: rgba(227, 201, 143, 0.16); color: var(--champ);
  border: 1px solid rgba(227, 201, 143, 0.4); font-size: 12px;
}
.brand { display: block; margin-bottom: 18px; }
.brand-sub { display: block; color: var(--rose); letter-spacing: 6px; font-size: 13px; text-transform: uppercase; }
.brand-title {
  display: block; font-size: 64px; line-height: 1.04;
  background: linear-gradient(100deg, #ffe9f6 0%, var(--petal) 30%, var(--champ) 55%, var(--petal-hot) 80%, #ffe9f6 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(239, 156, 196, 0.3));
  animation: sheen 6s linear infinite;
}
@keyframes sheen { to { background-position: 220% center; } }

/* nút hamburger — chỉ hiện trên mobile (xem phần RESPONSIVE) */
.nav-toggle { display: none; }

.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 18px; }
.nav-group { position: relative; }
.topnav > .nav-group > a, .topnav > .nav-cta {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 15px; border-radius: 10px; color: var(--ink); font-weight: 600; white-space: nowrap;
  transition: color .2s, background .2s, box-shadow .2s;
}
.nav-group > a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 5px; height: 2px;
  background: linear-gradient(90deg, var(--petal-hot), var(--champ)); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav-group > a:hover { background: rgba(246, 195, 220, 0.08); }
.nav-group:hover > a::after, .nav-group > a.active::after { transform: scaleX(1); }
.nav-group > a.active { color: var(--petal); }
.caret { font-size: 10px; opacity: .7; transition: transform .2s; }
.nav-group:hover .caret { transform: rotate(180deg); }

/* menu con thả xuống */
.submenu {
  position: absolute; left: 0; top: 100%; min-width: 220px; padding: 8px; z-index: 30;
  background: linear-gradient(160deg, rgba(58, 29, 64, 0.98), rgba(27, 13, 32, 0.98));
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s, transform .22s, visibility .22s;
}
.nav-group:hover .submenu, .nav-group:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(6px); }
.submenu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; color: var(--muted);
  font-size: 14px; font-weight: 600; transition: color .18s, background .18s, padding .18s;
}
.submenu a:hover { color: var(--petal); background: rgba(246, 195, 220, 0.08); padding-left: 16px; }
.submenu .sm-dot { color: var(--petal-hot); font-size: 11px; }

.nav-cta {
  margin-left: 6px;
  background: linear-gradient(180deg, #f2a7ca, #cf6a9c);
  color: #fff !important; box-shadow: 0 6px 18px rgba(207, 106, 156, 0.4);
}
/* nhịp sáng nút Đăng ký: bóng lớn vẽ sẵn ở lớp ::before, chỉ nhịp opacity (trước: animate box-shadow = vẽ lại mỗi khung) */
.nav-cta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 6px 26px rgba(242, 167, 202, 0.75); opacity: 0; animation: cta-pulse 2.6s ease-in-out infinite;
}
@keyframes cta-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* thanh tiện ích nhỏ (đăng nhập, nạp thẻ, liên hệ…) */
.util-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.util-nav a { color: var(--muted); font-size: 13px; transition: color .2s; }
.util-nav a:hover { color: var(--petal); }
.util-nav .mini-login { color: var(--rose); border-bottom: 1px dashed rgba(193, 146, 182, 0.5); padding-bottom: 1px; }

.status-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.srv { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--muted); }
.srv .pulse { position: relative; width: 9px; height: 9px; border-radius: 50%; }
.srv.up { color: var(--ok); } .srv.up .pulse { background: var(--ok); }
.srv.down { color: var(--bad); } .srv.down .pulse { background: var(--bad); }
.srv.up .pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--ok); animation: ping 1.6s ease-out infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.mini-login { color: var(--rose); border-bottom: 1px dashed rgba(193, 146, 182, 0.5); padding-bottom: 1px; }
.mini-login:hover { color: var(--petal); }

.hero-fade { height: 36px; background: linear-gradient(to bottom, transparent, rgba(27, 13, 32, 0)); }

/* ============================================================
   SHELL / lưới nội dung
   ============================================================ */
.shell {
  position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 10px 20px 60px;
  display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start;
}
.col-main { min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: 42px; margin-top: -26px; } /* gap: chừa chỗ biển hiệu nhô; margin-top âm: xích sidebar lên trên */

/* thẻ chung */
.card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); /* bỏ backdrop-filter: làm mờ lại nền mỗi khung hình khi cuộn */
  overflow: hidden;
}
.card-pad { padding: 18px 20px; }

/* tiêu đề mục có hoa đào */
.sec-head { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 6px 2px 20px; padding-bottom: 14px; }
/* link phụ (vd "Xem tất cả") đẩy ra mép phải, không làm lệch tâm biển hiệu */
.sec-head > a { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin-top: -7px; }
.sec-head h2 { font-size: 24px; color: var(--petal); }
.sec-head .blossom { width: 20px; height: 20px; flex: 0 0 20px; }
.sec-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.blossom {
  display: inline-block; position: relative; border-radius: 50%;
  background: radial-gradient(circle, var(--champ) 0 22%, var(--petal-hot) 24% 60%, transparent 62%);
}
.blossom::before, .blossom::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit;
}
.blossom::before { transform: rotate(72deg); } .blossom::after { transform: rotate(144deg); }

/* ---------- hero bài nổi bật trên trang chủ ---------- */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 230px; }
.feature .ft-media { position: relative; overflow: hidden; background: #2a1530; }
.feature .ft-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.feature:hover .ft-media img { transform: scale(1.08); }
.feature .ft-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, var(--card) 99%); }
.feature .ft-body { padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.feature .tag { align-self: flex-start; }
.feature h3 { font-size: 26px; margin: 10px 0; line-height: 1.25; }
.feature p { color: var(--muted); }
.feature .more { margin-top: 16px; }

.tag {
  display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 700;
  color: var(--petal); background: rgba(138, 63, 110, 0.35); border: 1px solid rgba(239, 156, 196, 0.3);
}

/* ---------- lưới tin ---------- */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.news-item {
  display: block; padding: 16px 18px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.news-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--petal-hot), var(--plum-mid)); transform: scaleY(0); transform-origin: top; transition: transform .25s;
}
.news-item:hover { transform: translateY(-4px); border-color: rgba(239, 156, 196, 0.4); box-shadow: 0 22px 44px rgba(10, 4, 14, 0.6); }
.news-item:hover::before { transform: scaleY(1); }
.news-item .meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.news-item .meta time { color: var(--muted); font-size: 12px; }
.news-item h4 { font-size: 16px; line-height: 1.4; }
.news-item:hover h4 { color: var(--petal); }
.news-item p { margin-top: 6px; color: var(--muted); font-size: 13px; }

/* danh sách dạng dòng (category / sidebar) */
.news-list { list-style: none; }
.news-list li { border-bottom: 1px dashed var(--line); }
.news-list li:last-child { border-bottom: 0; }
.news-list a { display: flex; gap: 10px; align-items: baseline; padding: 11px 4px; transition: color .2s, padding .2s; }
.news-list a:hover { color: var(--petal); padding-left: 10px; }
.news-list .dot { color: var(--petal-hot); }
.news-list .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-list time { color: var(--muted); font-size: 12px; }

/* ---------- sidebar ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.stat-box { padding: 12px 6px; border-radius: 12px; background: rgba(27, 13, 32, 0.4); border: 1px solid var(--line); }
.stat-box .n { font-size: 22px; font-weight: 800; color: var(--champ); }
.stat-box .l { font-size: 11px; color: var(--muted); margin-top: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 12px; font-weight: 700; cursor: pointer; border: 0;
  position: relative; overflow: hidden; color: var(--ink);
  background: linear-gradient(180deg, #714a6d, #4b2a4b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 20px rgba(10, 4, 14, 0.4);
  transition: transform .15s, box-shadow .2s, filter .2s; width: 100%; font-size: 15px;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 3px rgba(193, 146, 182, 0.3), 0 12px 26px rgba(10,4,14,.5); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(180deg, #f2a7ca, #cf6a9c); color: #3a0f2a; }
.btn-gold { background: linear-gradient(180deg, #f0d79a, #c89a3c); color: #3a2a0f; }
.btn .ink { position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); animation: ripple .6s ease-out; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.dl-hero { text-align: center; }
.dl-hero .big { font-size: 20px; color: var(--petal); margin-bottom: 4px; }
.dl-hero .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }

/* ---------- bài viết chi tiết ---------- */
.breadcrumb { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.breadcrumb a:hover { color: var(--petal); }
.article h1 { font-size: 30px; color: var(--ink); margin-bottom: 8px; line-height: 1.25; }
.article .byline { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.article-body { font-size: 16px; line-height: 1.85; }
.article-body p { margin: 0 0 14px; }
.article-body img { border-radius: 12px; margin: 14px auto; box-shadow: var(--shadow); }
.article-body h2, .article-body h3 { color: var(--petal); margin: 20px 0 10px; }

/* ---------- thư viện ảnh ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-grid a { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--shadow); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-grid a:hover img { transform: scale(1.1); }
.gallery-grid a::after { content: "❀"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 24px; background: rgba(42, 21, 48, 0.4); opacity: 0; transition: opacity .3s; }
.gallery-grid a:hover::after { opacity: 1; }

/* ---------- form (đăng ký / đăng nhập / tài khoản) ---------- */
.form-card { max-width: 520px; margin: 0 auto; }
.form-wide { max-width: 760px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--rose); margin-bottom: 6px; font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 15px; color: var(--ink);
  background: rgba(27, 13, 32, 0.55); border: 1px solid var(--line); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus { border-color: var(--petal-hot); box-shadow: 0 0 0 3px rgba(239, 156, 196, 0.2); }
.field select option { background: #2a1530; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.msg { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; border-left: 3px solid; }
.msg.err { background: rgba(192, 57, 43, 0.14); border-color: var(--bad); color: #ffd7cf; }
.msg.ok { background: rgba(63, 143, 90, 0.16); border-color: var(--ok); color: #d4f6e0; }
.form-foot { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; }
.form-foot a:hover { color: var(--petal); }

.page-title { text-align: center; margin: 6px 0 26px; }
.page-title .brush { font-size: 40px; color: var(--petal); }
.page-title p { color: var(--muted); }

/* ---------- khối full-width: môn phái & tính năng ---------- */
.band { margin-top: 30px; }
.phai-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.phai {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 22px 10px; border-radius: 14px; overflow: hidden; text-align: center;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.phai::before {
  content: ""; position: absolute; left: 50%; top: -40%; width: 140%; height: 140%; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hx) 32%, transparent), transparent 70%);
  opacity: .5; transition: opacity .3s;
}
.phai:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--hx) 55%, transparent); box-shadow: 0 22px 44px rgba(10,4,14,.6); }
.phai:hover::before { opacity: 1; }
.phai-sys { position: relative; font-size: 11px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.phai-name { position: relative; font-size: 24px; color: var(--hx); filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feat {
  padding: 22px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: transform .25s, border-color .25s;
}
.feat:hover { transform: translateY(-5px); border-color: rgba(239,156,196,.4); }
.feat-ico { font-size: 30px; margin-bottom: 8px; }
.feat-tt { font-weight: 700; color: var(--petal); margin-bottom: 6px; }
.feat p { color: var(--muted); font-size: 13px; }

/* Tab tính năng có ẢNH NỀN key-art: tranh lộ phía trên, mờ dần xuống đậm phía dưới để đọc chữ. */
.feat-art {
  position: relative; overflow: hidden; isolation: isolate; /* đóng khung stacking để lớp ảnh z-index âm nằm trong thẻ */
  min-height: 210px; padding: 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.feat-art::before {            /* lớp ảnh */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--feat-bg); background-size: cover; background-position: center;
  transform: scale(1.02); transition: transform .6s ease;
}
.feat-art::after {             /* lớp phủ gradient: trong suốt ở trên -> đậm dần xuống dưới */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
     rgba(22,10,27,.97) 0%, rgba(33,16,40,.9) 34%, rgba(33,16,40,.5) 62%, rgba(33,16,40,.1) 100%);
}
.feat-art:hover { border-color: rgba(239,156,196,.55); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.feat-art:hover::before { transform: scale(1.09); }
.feat-art .feat-ico { font-size: 28px; margin-bottom: 6px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.65)); }
.feat-art .feat-tt { color: #ffe6c0; font-size: 16px; letter-spacing: .3px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.feat-art p { color: #ecdcea; text-shadow: 0 1px 6px rgba(0,0,0,.75); }
/* Dã Tẩu: ảnh ngang (đạo sĩ đứng toàn thân giữa cổng thành) -> cover như các tab khác, canh hơi lên để thấy rõ nhân vật */
.feat-datau::before { background-position: center 28%; }

/* ---------- hiệu ứng xuất hiện khi cuộn ----------
   Chỉ ẩn khi JS đang chạy (html.js). Không có JS -> nội dung hiển thị bình thường. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot { position: relative; z-index: 2; margin-top: 30px; padding: 40px 20px 50px; text-align: center; border-top: 1px solid var(--line); background: rgba(20, 10, 24, 0.5); }
.foot-petal { font-size: 26px; color: var(--petal-hot); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.foot-brand { font-size: 28px; color: var(--petal); margin: 8px 0; }
.foot-note { color: var(--muted); }
.foot-sub { color: rgba(201, 169, 196, 0.6); font-size: 12px; margin-top: 8px; }

.to-top {
  position: fixed; right: 22px; bottom: 128px; z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #8a3f6e, #4b2a4b);
  box-shadow: var(--shadow); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s, transform .3s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: 0 0 0 4px rgba(193, 146, 182, 0.3), var(--shadow); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  /* chặn tràn ngang: mọi ô lưới được phép co lại thay vì ép giãn theo nội dung */
  .shell { grid-template-columns: 1fr; }
  .shell > *, .feature > *, .phai-show > *, .stat-row > *, .news-grid > *, .feat-grid > * { min-width: 0; }

  .hero { padding: 0 16px; }
  .hero-char { display: none; }
  .hero-wrap { min-height: 0; display: block; }
  .hero-main { position: relative; flex: none; width: 100%; padding: 50px 0 28px; }
  .brand-title { font-size: 46px; }
  .feature { grid-template-columns: 1fr; }
  .feature .ft-media { height: 180px; }
  .feature .ft-media::after { background: linear-gradient(0deg, var(--card), transparent 60%); }
  .phai-grid { grid-template-columns: repeat(3, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- MENU HAMBURGER ---- */
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    position: absolute; top: 12px; right: 0; z-index: 50;
    width: 46px; height: 42px; padding: 11px 10px; border-radius: 11px; cursor: pointer;
    background: linear-gradient(180deg, rgba(90,48,92,.85), rgba(43,21,48,.85));
    border: 1px solid rgba(246,195,220,.3); box-shadow: 0 6px 16px rgba(10,4,14,.45);
  }
  .nav-toggle span { display: block; height: 2.5px; width: 100%; border-radius: 2px; background: var(--petal);
    transition: transform .28s ease, opacity .2s ease; }
  .hero-main.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .hero-main.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .hero-main.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* menu chính: thu gọn, bung ra khi mở */
  .topnav {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; width: 100%; margin-bottom: 0;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .35s ease, opacity .3s ease, margin-bottom .3s ease;
  }
  .hero-main.nav-open .topnav { max-height: 1200px; opacity: 1; margin-bottom: 16px; }
  .topnav > .nav-group { width: 100%; }
  .topnav > .nav-group > a {
    width: 100%; justify-content: space-between; padding: 13px 14px; border-radius: 11px;
    background: rgba(27,13,32,.45); border: 1px solid var(--line);
  }
  .nav-group > a::after { display: none; }
  .caret { transition: transform .25s; }
  .nav-group.open > a .caret { transform: rotate(180deg); }
  .nav-cta { margin: 6px 0 0; width: 100%; justify-content: center; text-align: center; padding: 14px; }

  /* menu con: ẩn, bung khi nhóm được chạm mở */
  .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    display: none; min-width: 0; margin: 3px 0 4px; padding: 4px 6px;
    background: rgba(20,10,24,.55); border: 1px solid var(--line); border-radius: 11px; }
  .nav-group.open .submenu { display: block; }
  .submenu a { padding: 11px 12px; }

  /* thanh trạng thái + tiện ích: căn giữa, tự xuống dòng gọn gàng */
  .status-strip { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .util-nav { justify-content: center; gap: 16px; }
  .util-nav a { font-size: 14px; padding: 2px 0; }
}
@media (max-width: 560px) {
  .news-grid, .gallery-grid, .field-row { grid-template-columns: 1fr; }
  .phai-grid { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: 1fr; }
  .brand { text-align: center; }
  .brand-title { font-size: 34px; }
  .brand-sub { letter-spacing: 4px; }
  .hero-main { padding: 48px 0 24px; }

  /* biển hiệu tiêu đề mục: thu nhỏ để chữ dài không bị cắt */
  .sec-head h2 { width: 300px; height: 56px; padding: 0 34px; font-size: 18px; }
  .sec-head { justify-content: center; }
  .band .sec-head { flex-direction: column; gap: 8px; }
  .band .sec-head > a { position: static; transform: none; margin: 0; }

  /* feature card gọn hơn */
  .feature .ft-body { padding: 18px; }
  .feature h3 { font-size: 21px; }

  /* thống kê Giang hồ: cho giá trị tự xuống dòng, không tràn */
  .stat-row { gap: 8px; }
  .stat-box { padding: 12px 4px; }
  .stat-box .n { overflow-wrap: anywhere; }

  /* nút tải game vừa khung điện thoại */
  .gbtn-lg { width: 100%; max-width: 300px; height: 98px; }

  /* footer không tràn chữ cảnh báo */
  .foot-sub { padding: 0 6px; }
}

/* ============================================================
   HIỆU ỨNG NÂNG CAO + CHIỀU SÂU
   ============================================================ */

@keyframes if-sweep { 0% { left: -40%; } 55% { left: 120%; } 100% { left: 120%; } }
@keyframes if-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.15); } }

/* ---- Nút Tải Game: CON DẤU / ẤN LỆNH — rê chuột thì bốc lửa xanh dương ---- */
.seal-dl { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; padding: 10px; isolation: isolate; }
.seal-dl .stamp {
  position: relative; z-index: 2; width: 128px; height: 128px; display: grid; place-items: center; align-content: center; gap: 2px;
  border-radius: 16px; color: #ffeccb;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 3px, rgba(255,255,255,.03) 3px 6px),
    radial-gradient(130% 130% at 32% 22%, #c8343d 0%, #9c121d 55%, #6f0a13 100%);
  border: 2px solid #eac77e;
  box-shadow: inset 0 0 0 5px rgba(234,199,126,.3), inset 0 3px 12px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, color .3s, border-color .3s;
}
.seal-dl .stamp b { font-family: "FzGBrush", serif; font-weight: 400; font-size: 50px; line-height: .92; letter-spacing: 1px; text-shadow: 0 2px 4px rgba(0,0,0,.55); }
.seal-dl .lbl { position: relative; z-index: 2; font-size: 18px; color: var(--champ); letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,.5); transition: color .3s, text-shadow .3s; }
/* ngọn lửa xanh phía sau con dấu (ẩn, hiện khi hover) */
.seal-dl .flame { position: absolute; z-index: 1; left: 50%; top: -18px; width: 172px; height: 180px; transform: translateX(-50%); opacity: 0; transition: opacity .35s; pointer-events: none; filter: saturate(1.35);
  background: radial-gradient(52% 48% at 50% 62%, rgba(42,168,255,.55), rgba(42,168,255,0) 72%); }
.seal-dl .flame::before, .seal-dl .flame::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 118px; height: 196px; border-radius: 50% 50% 46% 46%; mix-blend-mode: screen; filter: blur(5px);
  background: radial-gradient(46% 58% at 50% 100%, #e3fbff 0%, #6fd0ff 26%, #1f8bff 56%, rgba(14,96,255,0) 74%);
  animation: bflame 1s ease-in-out infinite;
}
.seal-dl .flame::after { width: 70px; height: 158px; background: radial-gradient(50% 58% at 50% 100%, #fff 0%, #c7f2ff 22%, #2aa8ff 58%, rgba(42,168,255,0) 76%); animation-duration: .72s; animation-delay: .18s; }
@keyframes bflame {
  0%, 100% { transform: translate(-50%, 4%) scaleY(.93) scaleX(1); }
  25%      { transform: translate(-53%, -6%) scaleY(1.08) scaleX(.93); }
  50%      { transform: translate(-50%, -13%) scaleY(1.18) scaleX(.88); }
  75%      { transform: translate(-47%, -6%) scaleY(1.06) scaleX(.95); }
}
.seal-dl:hover .flame { opacity: 1; }
.seal-dl:hover .stamp { transform: translateY(-4px) rotate(-3deg) scale(1.05); color: #eaffff; border-color: #bfeaff;
  box-shadow: inset 0 0 0 5px rgba(191,234,255,.42), inset 0 3px 12px rgba(0,0,0,.4), 0 0 32px rgba(42,168,255,.75), 0 14px 28px rgba(0,0,0,.55); }
.seal-dl:hover .lbl { color: #bdf0ff; text-shadow: 0 0 10px rgba(42,168,255,.85); }
.seal-dl:active .stamp { transform: translateY(0) scale(.98) rotate(-1deg); } /* dập dấu */
/* bản nhỏ (sidebar bài viết) */
.seal-dl.sm .stamp { width: 90px; height: 90px; border-radius: 12px; }
.seal-dl.sm .stamp b { font-size: 36px; }
.seal-dl.sm .flame { width: 124px; height: 132px; top: -14px; }
.seal-dl.sm .flame::before { width: 86px; height: 144px; }
.seal-dl.sm .flame::after { width: 52px; height: 116px; }
.seal-dl.sm .lbl { font-size: 15px; }

/* ---- vệt sáng quét định kỳ cho nút vàng/hồng ---- */
.btn-gold, .btn-primary { position: relative; overflow: hidden; }
.btn-gold::after, .btn-primary::after {
  content: ""; position: absolute; top: -60%; left: -30%; width: 34%; height: 220%; transform: rotate(18deg);
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .45), transparent);
  animation: btn-sweep 5s ease-in-out infinite; pointer-events: none;
}
/* chạy bằng transform (GPU) thay vì đổi `left` (tính lại bố cục mỗi khung). 470% ≈ quãng -40% → 120% bề rộng nút */
@keyframes btn-sweep {
  0%        { transform: translateX(-40%) rotate(18deg); }
  55%, 100% { transform: translateX(470%) rotate(18deg); }
}

/* ---- blossom ở tiêu đề mục: nhịp xoay ---- */
.sec-head .blossom { filter: drop-shadow(0 0 5px rgba(239, 156, 196, .5)); animation: blossom-pulse 4s ease-in-out infinite; }
@keyframes blossom-pulse { /* chỉ transform; quầng sáng để tĩnh (animate filter = vẽ lại mỗi khung) */
  0%, 100% { transform: rotate(0) scale(1); }
  50%      { transform: rotate(36deg) scale(1.14); }
}

/* ---- thẻ bài nổi bật: viền sáng chạy quanh khi hover ---- */
.feature::before {
  content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1.5px; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 58%, rgba(246, 195, 220, .95) 72%, rgba(227, 201, 143, .95) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .4s; animation: spin 6s linear infinite;
}
.feature:hover::before { opacity: .95; }

/* ---- lưới tin: vệt sáng lướt khi hover ---- */
.news-item::after {
  content: ""; position: absolute; top: -50%; left: -70%; width: 45%; height: 200%; transform: rotate(18deg);
  background: linear-gradient(to right, transparent, rgba(246, 195, 220, .22), transparent);
  transition: left .55s ease; pointer-events: none; z-index: 1;
}
.news-item:hover::after { left: 130%; }

/* ---- môn phái: tên phát sáng theo ngũ hành + vệt sáng lướt ---- */
/* nhịp sáng tên phái (animate filter = vẽ lại chữ mỗi khung) — chỉ chạy khi rê chuột vào thẻ/khung môn phái */
.phai:hover .phai-name, .phai-show:hover .phai-name { animation: phai-glow 3.6s ease-in-out infinite; }
@keyframes phai-glow {
  0%, 100% { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
  50%      { filter: drop-shadow(0 0 11px var(--hx)); }
}
.phai::after {
  content: ""; position: absolute; top: -50%; left: -80%; width: 50%; height: 200%; transform: rotate(18deg);
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .25), transparent);
  transition: left .6s ease; pointer-events: none;
}
.phai:hover::after { left: 140%; }

/* ---- tính năng nổi bật: icon nhún nhẹ ---- */
.feat-ico { display: inline-block; animation: if-bob 3s ease-in-out infinite; }
.feat:nth-child(2) .feat-ico { animation-delay: .4s; }
.feat:nth-child(3) .feat-ico { animation-delay: .8s; }
.feat:nth-child(4) .feat-ico { animation-delay: 1.2s; }

/* ============ CHIỀU SÂU (parallax + nghiêng 3D) ============ */

/* lớp quầng sáng trôi phía sau — tạo chiều sâu nền */
.bg-depth { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-depth i {
  position: absolute; border-radius: 50%; opacity: .5; /* gradient đã mềm sẵn — bỏ blur(60px) tốn kém */
  will-change: transform; animation: orb-float 22s ease-in-out infinite;
}
.bg-depth i:nth-child(1) { width: 440px; height: 440px; left: -6%; top: 2%;  background: radial-gradient(circle, rgba(138,63,110,.6), transparent 70%); }
.bg-depth i:nth-child(2) { width: 520px; height: 520px; right: -8%; top: 18%; background: radial-gradient(circle, rgba(63,120,180,.35), transparent 70%); animation-duration: 28s; animation-delay: -6s; }
.bg-depth i:nth-child(3) { width: 380px; height: 380px; left: 24%; bottom: -8%; background: radial-gradient(circle, rgba(227,201,143,.28), transparent 70%); animation-duration: 25s; animation-delay: -12s; }
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 24px) scale(.95); }
}

/* hero có chiều sâu: các lớp dịch theo chuột (JS đặt --px/--py) */
.hero-char { will-change: transform; transform: translate3d(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 12px), 0); transition: transform .25s ease-out; }
.hero-glow { transform: translate3d(calc(var(--px, 0) * -26px), calc(var(--py, 0) * -16px), 0); }

/* nghiêng 3D khi rê chuột (JS gắn .is-tilt + đặt --rx/--ry) */
.feature, .phai, .feat { transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .25s, border-color .25s; }
.is-tilt { transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) scale(1.012); }
.phai.is-tilt { transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) scale(1.03); }
/* nội dung nổi lên trước (translateZ) để thấy rõ chiều sâu */
.feature .ft-body, .phai-name, .phai-sys, .feat-ico, .feat-tt { transform: translateZ(26px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-char, .hero-glow, .is-tilt { transform: none !important; }
}

/* ============================================================
   PHONG CÁCH WEBSITE GAME: tiêu đề thư pháp + khung viền góc vàng
   ============================================================ */
/* tiêu đề mục = BIỂN HIỆU hồng hoa đào (ảnh title-2.png) — GIỮ ĐÚNG TỈ LỆ ảnh (3.14) nên không méo */
.sec-head .blossom { display: none; }
/* đường line mờ dần phân cách title với nội dung bên dưới */
.sec-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(227,201,143,.45) 22%, rgba(246,195,220,.55) 50%, rgba(227,201,143,.45) 78%, transparent);
}
.sec-head h2 {
  box-sizing: border-box; width: 360px; max-width: 100%; height: 66px;
  display: flex; align-items: center; justify-content: center; padding: 0 58px;
  background: url(../img/title-dark-1.png) center/100% 100% no-repeat;
  font-family: "FzGBrush", "Segoe UI", serif; font-weight: 400; letter-spacing: 1px; font-size: 23px;
  color: #ffe6c0; text-shadow: 0 1px 0 #4a1020, 0 2px 6px rgba(0, 0, 0, .6);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); white-space: nowrap;
}
.sec-head h2::before, .sec-head h2::after { content: none; }
/* tiêu đề ở sidebar nhỏ hơn cho vừa cột hẹp */
.col-side .sec-head h2 { width: 248px; height: 45px; padding: 0 40px; font-size: 15px; }
/* biển hiệu sidebar GẮN TRÊN mép panel (nửa trên nhô ra ngoài, nằm giữa) — như mẫu "Giang hồ" */
.col-side .card-pad { padding-top: 36px; overflow: visible; } /* visible để biển hiệu nhô ra không bị cắt */
.col-side > .card:first-child { margin-top: 22px; } /* đẩy ô đầu xuống để biển hiệu không dính line dưới hero */
.col-side .sec-head { position: absolute; top: -23px; left: 0; right: 0; margin: 0; padding: 0; z-index: 3; justify-content: center; }
.col-side .sec-head::after { display: none; }
.col-side .sec-head > a { display: none; }
.sec-head .rule { display: none; }

/* Ô panel SẠCH & THOÁNG (không dùng khung sakura dày — tránh rối).
   Ornate để dành cho điểm nhấn: biển hiệu tiêu đề, khung nhân vật, nút tải. */
.card-pad {
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(60,30,66,.55), rgba(26,12,30,.62));
  border: 1px solid rgba(227,201,143,.26);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,236,190,.1), 0 10px 26px rgba(10,4,14,.45);
}
/* viền sáng mảnh phía trên cho có chiều sâu */
.card-pad { position: relative; }
.card-pad::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(246,195,220,.5), transparent);
}
/* viền + ánh kim nhẹ cho nút game */
.btn-gold { border: 1px solid rgba(255, 230, 160, .55); }
.btn-primary { border: 1px solid rgba(239, 156, 196, .5); }

/* đường phân cách thư pháp dưới hero cho giống trang game */
.hero-fade { position: relative; }
.hero-fade::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: min(880px, 86%); height: 2px;
  background: linear-gradient(90deg, transparent, rgba(227,201,143,.5) 20%, rgba(246,195,220,.6) 50%, rgba(227,201,143,.5) 80%, transparent);
  -webkit-mask: radial-gradient(circle at center, #000 60%, transparent); 
}

/* ---- Nút Tải Game: bảng ngọc đỏ–vàng chạm trổ (phong cách web game) ---- */
.gbtn { position: relative; display: inline-flex; text-decoration: none; vertical-align: middle; }
.gbtn-lg { width: 320px; max-width: 100%; height: 105px; }
.gbtn-sm { width: 220px; height: 72px; }
.gbtn-face {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%;
  background: url(../img/title-6.png) center/100% 100% no-repeat;
  transition: transform .15s, filter .3s;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(239,156,196,.3));
  isolation: isolate;
}
/* hào quang hồng nhịp: lớp ảnh trùng khung có sẵn quầng sáng (vẽ 1 lần), chỉ nhịp OPACITY (GPU).
   Trước đây animate filter drop-shadow => vẽ lại nút mỗi khung hình. */
.gbtn-face::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: inherit; filter: drop-shadow(0 0 14px rgba(246,150,200,.85));
  opacity: 0; animation: gpulse 2.8s ease-in-out infinite;
}
@keyframes gpulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.gbtn-ic { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: #7a1a44; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
.gbtn-text {
  font-family: "FzGBrush", serif; font-weight: 400; letter-spacing: 1px; line-height: 1;
  color: #6a0f38; text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 5px rgba(120,20,70,.35);
}
.gbtn-lg .gbtn-text { font-size: 27px; }
.gbtn-sm .gbtn-text { font-size: 20px; }
.gbtn:hover .gbtn-face { transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(246,150,200,.95)); }
.gbtn:hover .gbtn-ic { stroke: #9c1a55; }
.gbtn:active .gbtn-face { transform: translateY(0) scale(.99); }

/* ============ SHOWCASE THẬP ĐẠI MÔN PHÁI (có ảnh nhân vật) ============ */
.phai-show {
  position: relative; display: grid; grid-template-columns: 460px 1fr; gap: 24px; align-items: center;
}
/* nhân vật đứng trong KHUNG SAKURA (ảnh dọc đúng tỉ lệ 0.752 -> không méo) */
.phai-stage { position: relative; width: min(460px, 90vw); aspect-ratio: 1086 / 1445;
  display: flex; align-items: flex-end; justify-content: center;
  background: url(../img/frame-sakura.png) center/100% 100% no-repeat; }
.phai-aura { position: absolute; left: 50%; top: 48%; width: 300px; height: 300px; transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hx) 40%, transparent), transparent 72%);
  filter: blur(12px); opacity: .5; transition: background .5s; animation: breathe 6s ease-in-out infinite; z-index: 0; }
.phai-ground { position: absolute; left: 50%; bottom: 12%; width: 230px; height: 40px; transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hx) 55%, transparent), transparent 72%); filter: blur(6px); opacity: .6; transition: background .5s; z-index: 0; }
.phai-fig { position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%) translateY(10px); height: 78%; width: auto; max-width: 70%;
  object-fit: contain; object-position: bottom center; opacity: 0; transition: opacity .45s ease, transform .55s ease; pointer-events: none; z-index: 1;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)); }
.phai-fig.active { opacity: 1; transform: translateX(-50%) translateY(0); }
.phai-info { padding: 26px 30px 24px 2px; display: flex; flex-direction: column; justify-content: center; }
.phai-sys { align-self: flex-start; padding: 3px 13px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: var(--hx); background: color-mix(in srgb, var(--hx) 16%, transparent); border: 1px solid color-mix(in srgb, var(--hx) 40%, transparent); transition: color .4s, background-color .4s, border-color .4s; }
.phai-name { font-size: 46px; line-height: 1.05; color: var(--hx); margin: 12px 0 8px; transition: color .4s;
  filter: drop-shadow(0 2px 12px color-mix(in srgb, var(--hx) 45%, transparent)); }
.phai-desc { color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 540px; min-height: 54px; }
.phai-more { align-self: flex-start; margin-top: 14px; color: var(--petal); font-weight: 600; border-bottom: 1px dashed rgba(193,146,182,.5); padding-bottom: 1px; transition: color .25s; }
.phai-more:hover { color: var(--hx); }
.phai-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 22px; }
.phai-tab { cursor: pointer; padding: 9px 4px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--muted); text-align: center;
  background: rgba(27,13,32,.5); border: 1px solid var(--line); border-bottom: 2px solid color-mix(in srgb, var(--hx) 55%, transparent);
  transition: transform .2s, color .2s, background .2s, box-shadow .2s; }
.phai-tab:hover { transform: translateY(-2px); color: #fff; }
.phai-tab.active { color: var(--hx); background: color-mix(in srgb, var(--hx) 14%, rgba(27,13,32,.6));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hx) 50%, transparent), 0 6px 14px rgba(0,0,0,.4); }
@media (max-width: 860px) {
  /* 1 cột: ảnh nhân vật trên, thông tin dưới — căn giữa, không để khối info kéo rộng gây tràn */
  .phai-show { grid-template-columns: 1fr; justify-items: stretch; gap: 16px; }
  .phai-stage { width: min(380px, 86vw); margin: 0 auto; }
  .phai-info { width: 100%; padding: 0 2px; align-items: center; text-align: center; }
  .phai-sys, .phai-more { align-self: center; }
  .phai-desc { max-width: 100%; min-height: 0; }
  .phai-tabs { grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 18px; }
  .phai-tab { padding: 10px 4px; font-size: 12.5px; }
  .phai-name { font-size: 34px; }
}
@media (max-width: 420px) {
  .phai-tabs { grid-template-columns: repeat(2, 1fr); }
  .phai-name { font-size: 30px; }
}

/* nút Tải Game đứng riêng ở đầu sidebar */
.dl-top { text-align: center; margin-top: 15px; margin-bottom: 4px; position: relative; top: 8px; } /* top: dời riêng nút xuống, không đẩy Giang hồ */

/* 3 dải nước phát sáng xoáy quanh nút — lớp SAU (z0) & TRƯỚC (z2) nút, mặt nút z1 */
.gbtn-face { z-index: 1; }
.gbtn-rib { position: absolute; left: -16%; top: -46%; width: 132%; height: 192%; pointer-events: none; }
.gbtn-rib-back { z-index: 0; }
.gbtn-rib-front { z-index: 2; }

/* cánh đào bay vòng quanh nhân vật hero (2 lớp: sau & trước nhân vật) */
.hero-petals { position: absolute; left: -15%; top: -8%; width: 130%; height: 120%; pointer-events: none; }
.hero-petals-back { z-index: 1; }
.hero-petals-front { z-index: 3; }

/* khoảng cách vừa phải cho tiêu đề mục "Tin tức & Sự kiện" (như mockup Untitled) */
.news-sec .sec-head { margin: 0 2px 12px; padding-bottom: 6px; }

/* ===== Hiệu ứng ngũ hành sau nhân vật môn phái ===== */
.phai-fx { position: absolute; inset: 9%; z-index: 0; pointer-events: none; overflow: hidden; border-radius: 12px; }
.fx-rays, .fx-smoke { position: absolute; opacity: 0; transition: opacity .5s; }
/* KIM: tia sáng vàng xoay + quầng sáng */
.phai-show[data-el="kim"] .fx-rays { opacity: .95; }
.fx-rays {
  left: 50%; top: 42%; width: 480px; height: 480px; transform: translate(-50%,-50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,222,140,0) 0deg 5deg, rgba(255,222,140,.32) 5deg 7deg);
  -webkit-mask: radial-gradient(closest-side, #000 12%, rgba(0,0,0,.55) 42%, transparent 72%);
          mask: radial-gradient(closest-side, #000 12%, rgba(0,0,0,.55) 42%, transparent 72%);
  mix-blend-mode: screen; animation: fx-spin 28s linear infinite;
}
@keyframes fx-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* giữ căn giữa khi xoay */
.fx-rays::after {
  content: ""; position: absolute; inset: 20%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,214,120,.55), rgba(255,214,120,0) 70%);
  animation: breathe 4s ease-in-out infinite;
}
/* MỘC - chỉ ĐƯỜNG MÔN: khói xanh lá bốc lên sau lưng (Ngũ Độc dùng đầu lâu riêng) */
.phai-show[data-k="duongmon"] .fx-smoke { opacity: 1; }
.fx-smoke { inset: 0; }
.fx-smoke span {
  position: absolute; bottom: 24%; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,245,155,.75), rgba(70,205,110,0) 70%);
  filter: blur(12px); mix-blend-mode: screen; opacity: 0;
  animation: smoke-rise 5.2s ease-in infinite;
}
.fx-smoke span:nth-child(1) { left: 28%; animation-delay: 0s; }
.fx-smoke span:nth-child(2) { left: 46%; animation-delay: -1.6s; width: 180px; }
.fx-smoke span:nth-child(3) { left: 60%; animation-delay: -2.8s; }
.fx-smoke span:nth-child(4) { left: 38%; animation-delay: -3.8s; width: 120px; }
.fx-smoke span:nth-child(5) { left: 54%; animation-delay: -0.8s; width: 115px; }
@keyframes smoke-rise {
  0%   { transform: translate(0, 0) scale(.55); opacity: 0; }
  22%  { opacity: .8; }
  70%  { opacity: .45; }
  100% { transform: translate(14px, -150%) scale(1.6); opacity: 0; }
}

/* ===== Hiệu ứng riêng theo từng phái (data-k) ===== */
/* Các lớp FX con tạm dừng khi phái chưa được chọn -> không tốn CPU */
.fx-sword, .fx-orbit, .fx-dragon, .fx-fire, .fx-tao, .fx-leaf, .fx-skull, .fx-manji {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none;
}
.fx-sword i, .fx-orbit i, .fx-dragon b, .fx-fire i, .fx-tao b, .fx-leaf i, .fx-skull i, .fx-manji b { animation-play-state: paused; }
.phai-show[data-k="thieulam"] .fx-manji { opacity: .4; } /* chữ Vạn mờ 40% sau lưng Thiếu Lâm (chồng cùng tia sáng Kim) */
.phai-show[data-k="thieulam"] .fx-manji b { animation-play-state: running; }
.phai-show[data-k="ngamy"]   .fx-sword  { opacity: 1; }
.phai-show[data-k="thuyyen"] .fx-orbit  { opacity: 1; }
.phai-show[data-k="caibang"] .fx-dragon { opacity: 1; }
.phai-show[data-k="thiennhan"] .fx-fire { opacity: 1; }
.phai-show[data-k="vodang"]  .fx-tao   { opacity: .5; } /* mờ ~50% theo yêu cầu */
.phai-show[data-k="conlon"]  .fx-leaf  { opacity: 1; }
.phai-show[data-k="ngudoc"]  .fx-skull { opacity: 1; }
.phai-show[data-k="ngamy"]   .fx-sword  i,
.phai-show[data-k="thuyyen"] .fx-orbit  i,
.phai-show[data-k="caibang"] .fx-dragon b,
.phai-show[data-k="thiennhan"] .fx-fire i,
.phai-show[data-k="vodang"]  .fx-tao   b,
.phai-show[data-k="conlon"]  .fx-leaf  i,
.phai-show[data-k="ngudoc"]  .fx-skull i { animation-play-state: running; }

/* NGA MY (Thủy): kiếm khí bạc-lam bay từ dưới chân lên, tan ở sau lưng */
.fx-sword i {
  position: absolute; bottom: 4%; left: var(--x, 50%); width: 5px; height: 120px;
  margin-left: -2.5px; border-radius: 5px;
  background: linear-gradient(to top, rgba(150,215,255,0), rgba(150,215,255,.8) 30%, rgba(210,245,255,.95) 60%, #ffffff 76%, rgba(200,240,255,0));
  filter: blur(.4px) drop-shadow(0 0 10px rgba(130,210,255,.95)) drop-shadow(0 0 20px rgba(110,190,255,.55));
  opacity: 0; transform: translateY(0) rotate(var(--r, 6deg)) scaleY(.5);
  animation: sword-rise 2.3s ease-in infinite; animation-delay: var(--d, 0s);
}
@keyframes sword-rise {
  0%   { opacity: 0; transform: translateY(0) rotate(var(--r,6deg)) scaleY(.5); }
  14%  { opacity: 1; }
  68%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-470px) rotate(var(--r,6deg)) scaleY(1.25); }
}

/* THÚY YÊN (Thủy): cánh hoa đào bay vòng quanh người (quỹ đạo elip) */
.fx-orbit i {
  position: absolute; left: 50%; top: 48%; width: 0; height: 0;
  transform: rotate(0deg); transform-origin: 0 0;
  animation: orbit var(--dur, 9s) linear infinite; animation-delay: var(--d, 0s);
}
.fx-orbit i::before {
  content: ""; position: absolute;
  left: var(--rad, 120px); top: 0; width: 18px; height: 22px; margin: -11px 0 0 -9px;
  background: radial-gradient(130% 120% at 30% 10%, #fff0f7, #f3a9cf 58%, #de86b9);
  border-radius: 100% 0 60% 50% / 100% 0 50% 60%;
  box-shadow: 0 0 9px rgba(246,195,220,.9), 0 0 3px rgba(255,255,255,.6) inset;
  opacity: .95;
}
/* ép quỹ đạo thành elip nghiêng để "ôm" lấy người */
.fx-orbit { transform: scaleY(.62) rotate(-8deg); transform-origin: 50% 48%; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* CÁI BANG (Hỏa): rồng vàng ảo ảnh lớp lớp hiện sau lưng */
.fx-dragon {
  --dw: 230px;
  left: auto; right: calc(4% + 150px); top: calc(8% - 50px); bottom: auto; width: var(--dw); height: var(--dw); /* dời sang trái 150px, lên trên 50px */
  margin: 0; transform: none; /* neo góc trên-phải, không bị thân nhân vật che */
}
.fx-dragon b {
  position: absolute; inset: 0;
  background: url("../img/fx/dragon.png") center/contain no-repeat;
  mix-blend-mode: screen; opacity: 0; will-change: transform, opacity;
  animation: dragon-phase 4.2s ease-out infinite;
}
.fx-dragon b:nth-child(1) { animation-delay: 0s; }
.fx-dragon b:nth-child(2) { animation-delay: -1.4s; }
.fx-dragon b:nth-child(3) { animation-delay: -2.8s; }
@keyframes dragon-phase {
  0%   { opacity: 0;   transform: scale(.72); filter: blur(5px); }
  38%  { opacity: .82; filter: blur(1px); }
  72%  { opacity: .28; transform: scale(1.02); filter: blur(0); }
  100% { opacity: 0;   transform: scale(1.15); filter: blur(4px); }
}

/* THIÊN NHẪN (Hỏa): lửa đỏ từ trời rớt xuống chân, tắt ở dưới sau lưng */
.fx-fire i {
  position: absolute; top: -8%; left: var(--x, 50%); width: 9px; height: 58px;
  margin-left: -4.5px; border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255,120,40,0), rgba(255,80,20,.92) 34%, rgba(255,150,40,.98) 66%, rgba(255,220,140,1) 88%, rgba(255,240,180,0));
  filter: blur(.4px) drop-shadow(0 0 10px rgba(255,80,20,.95)) drop-shadow(0 0 22px rgba(255,60,10,.6));
  opacity: 0; transform: translateY(0) scaleY(.6);
  animation: fire-fall var(--dur, 2s) ease-in infinite; animation-delay: var(--d, 0s);
}
@keyframes fire-fall {
  0%   { opacity: 0; transform: translateY(0) scaleY(.6); }
  12%  { opacity: 1; }
  82%  { opacity: 1; transform: translateY(var(--fy, 430px)) scaleY(1.2); }
  100% { opacity: 0; transform: translateY(calc(var(--fy, 430px) + 36px)) scaleY(1.35); }
}

/* NGŨ ĐỘC (Mộc): 2-4 đầu lâu khói xanh hiện ngẫu nhiên sau lưng, mờ dần 50%->0% ẩn hiện */
.fx-skull i {
  position: absolute; background: url("../img/fx/skull.png") center/contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(120,235,120,.5));
  opacity: 0; transform: translate(-50%, -50%) scale(.3); /* (left,top) = tâm đầu lâu; size nhỏ dần theo độ mờ */
  animation: skull-pulse var(--dur, 4s) ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes skull-pulse {
  0%,100% { opacity: 0;  transform: translate(-50%, -50%) scale(.3); }
  50%     { opacity: .5; transform: translate(-50%, -50%) scale(1); } /* mờ 50% -> size đầy đủ (180px) */
}

/* THIẾU LÂM (Kim): chữ Vạn vàng xoay sau lưng (chồng cùng tia sáng) */
.fx-manji {
  left: 50%; top: 42%; right: auto; bottom: auto; width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
}
.fx-manji b {
  position: absolute; inset: 0; transform-origin: 50% 50%;
  background: url("../img/fx/manji.png") center/contain no-repeat;
  mix-blend-mode: screen; filter: drop-shadow(0 0 14px rgba(255,210,120,.5));
  animation: tao-spin 44s linear infinite;
}

/* VÕ ĐANG (Thổ): bát quái âm dương xoay vòng sau lưng (mờ ~50%) */
.fx-tao {
  --tw: 380px;
  left: 50%; top: 50%; right: auto; bottom: auto; width: var(--tw); height: var(--tw); /* tâm căn giữa chiều cao nhân vật */
  margin: calc(var(--tw)/-2) 0 0 calc(var(--tw)/-2); z-index: 0;
}
.fx-tao b {
  position: absolute; inset: 0; transform-origin: 50% 50%;
  background: url("../img/fx/yinyang.png") center/contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(200,220,255,.4));
  animation: tao-spin 40s linear infinite;
}
.fx-tao b::after { /* quầng sáng nhẹ nhịp thở, không xoay theo */
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(210,228,255,.18), rgba(210,228,255,0) 72%);
}
@keyframes tao-spin { to { transform: rotate(360deg); } }

/* CÔN LÔN (Thổ): lá xanh & trắng bay vòng quanh người */
.fx-leaf i {
  position: absolute; left: 50%; top: 48%; width: 0; height: 0;
  transform: rotate(0deg); transform-origin: 0 0;
  animation: orbit var(--dur, 10s) linear infinite; animation-delay: var(--d, 0s);
}
.fx-leaf i::before {
  content: ""; position: absolute;
  left: var(--rad, 120px); top: 0; width: 13px; height: 20px; margin: -10px 0 0 -6px;
  background: radial-gradient(120% 100% at 35% 15%, #eafff0, #7bd88f 55%, #3fae63);
  border-radius: 0 100% 0 100% / 55% 100% 55% 100%;
  box-shadow: 0 0 7px rgba(130,235,160,.7);
  transform: rotate(18deg); opacity: .95;
}
/* một số lá màu trắng ngọc xen kẽ */
.fx-leaf i:nth-child(3n)::before {
  background: radial-gradient(120% 100% at 35% 15%, #ffffff, #e6f3ea 55%, #bcd8c6);
  box-shadow: 0 0 7px rgba(235,248,240,.8);
}
.fx-leaf i:nth-child(2n)::before { transform: rotate(-26deg); }
.fx-leaf { transform: scaleY(.64) rotate(-6deg); transform-origin: 50% 48%; }


























/* ============================================================
   DIỄN ĐÀN (pages/forum.php) — kế thừa hệ Đào Hoa Lâu
   Panel dùng lại công thức .card-pad (viền vàng mảnh + nền mận).
   Khoảnh khắc riêng: con dấu "Ghim/Khóa" kiểu ấn triện; bài vừa đăng
   loang màu đào rồi nhạt dần (:target).
   ============================================================ */

/* bề mặt trình duyệt theo bảng màu (toàn site) */
::selection { background: rgba(239, 156, 196, .38); color: #fff; }
html { scrollbar-color: #6a3a63 #1b0d20; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #1b0d20; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7a4472, #553651); border-radius: 8px; border: 2px solid #1b0d20; }
input, textarea { caret-color: var(--petal-hot); }
:root { color-scheme: dark; }
.fr-tool, .fr-chip, .fr-act, .fr-pager a, .btn { touch-action: manipulation; }
.num { font-variant-numeric: tabular-nums; }

.fr-page { min-width: 0; }
.fr-ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* panel chung của diễn đàn = cùng chất liệu .card-pad */
.fr-boards, .fr-topics, .fr-compose, .fr-empty, .fr-post {
  background: linear-gradient(180deg, rgba(60, 30, 66, .55), rgba(26, 12, 30, .62));
  border: 1px solid rgba(227, 201, 143, .26);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .1), 0 10px 26px rgba(10, 4, 14, .45);
}

/* ---------- vị trí (breadcrumb) ---------- */
.fr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 4px 0 14px; }
.fr-crumbs a { display: inline-flex; align-items: center; gap: 6px; transition: color .18s; }
.fr-crumbs a:hover { color: var(--petal); }
.fr-crumbs .fr-ic { width: 15px; height: 15px; color: var(--champ); }
.fr-crumbs .sep { opacity: .5; }
.fr-crumbs [aria-current] { color: var(--ink); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- đầu trang ---------- */
.fr-head { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.fr-head > div { flex: 1; min-width: 0; }
.fr-h1 { font-size: 34px; line-height: 1.15; color: var(--petal); font-weight: 400; }
.fr-h1-topic { font-family: "Segoe UI", Tahoma, Arial, sans-serif; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; text-wrap: balance; }
.fr-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.fr-sub b { color: var(--ink); }
.fr-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: -6px 0 16px; }
.fr-note .fr-ic { color: var(--champ); }

/* nút cỡ vừa (không full-width như .btn mặc định) */
.btn.fr-btn { width: auto; padding: 10px 18px; font-size: 14px; white-space: nowrap; }
.fr-link { color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201, 169, 196, .4); transition: color .18s; }
.fr-link:hover { color: var(--petal); }
.fr-page :focus-visible { outline: 2px solid var(--petal-hot); outline-offset: 2px; border-radius: 6px; }

/* ---------- thanh tìm kiếm + người dùng ---------- */
.fr-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.fr-search { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; }
.fr-search > .fr-ic { position: absolute; left: 13px; color: var(--muted); pointer-events: none; }
.fr-search input[type=search] {
  width: 100%; padding: 11px 14px 11px 40px; border-radius: 10px; font-size: 15px; color: var(--ink);
  background: rgba(27, 13, 32, .55); border: 1px solid var(--line); outline: none; transition: border-color .18s, box-shadow .18s;
}
.fr-search input[type=search]:focus { border-color: var(--petal-hot); box-shadow: 0 0 0 3px rgba(239, 156, 196, .2); }
.fr-search input::placeholder, .fr-editor textarea::placeholder, .fr-compose input::placeholder { color: #a98aa4; }
.fr-search-lg { margin-bottom: 16px; }
.fr-me { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.fr-me b { color: var(--ink); }

/* ---------- avatar chữ cái (màu theo tài khoản) ---------- */
.fr-avatar {
  display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-weight: 700; color: #fff7fb;
  background: radial-gradient(120% 120% at 30% 20%, hsl(var(--h), 60%, 62%), hsl(var(--h), 45%, 32%) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .35), 0 3px 8px rgba(10, 4, 14, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.fr-avatar-sm { width: 32px; height: 32px; font-size: 14px; }
.fr-avatar-md { width: 44px; height: 44px; font-size: 18px; }
.fr-avatar-lg { width: 64px; height: 64px; font-size: 26px; font-family: "FzGBrush", "Segoe UI", serif; font-weight: 400; }

/* ---------- huy hiệu chuyên mục (ngọc tròn viền vàng) ---------- */
.fr-medal {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--champ);
  background: radial-gradient(circle at 35% 30%, #7a4472, #3a1d45 75%);
  box-shadow: inset 0 0 0 1px rgba(227, 201, 143, .55), inset 0 0 0 4px rgba(42, 21, 48, .9), inset 0 0 0 5px rgba(227, 201, 143, .25), 0 6px 14px rgba(10, 4, 14, .5);
  transition: box-shadow .22s ease-out, color .22s ease-out;
}
.fr-medal .fr-ic { width: 22px; height: 22px; transition: transform .22s ease-out; }
.fr-medal-lg { width: 64px; height: 64px; }
.fr-medal-lg .fr-ic { width: 30px; height: 30px; }

/* ---------- danh sách chuyên mục ---------- */
.fr-boards { overflow: hidden; }
.fr-board {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 76px 76px minmax(0, 220px);
  align-items: center; gap: 18px; padding: 16px 20px; transition: background .2s ease-out;
}
.fr-board + .fr-board { border-top: 1px solid var(--line); }
.fr-board:hover { background: rgba(138, 63, 110, .16); }
.fr-board:hover .fr-medal { color: #fff1d0; box-shadow: inset 0 0 0 1px rgba(227, 201, 143, .9), inset 0 0 0 4px rgba(42, 21, 48, .9), inset 0 0 0 5px rgba(227, 201, 143, .45), 0 6px 18px rgba(239, 156, 196, .28); }
.fr-board:hover .fr-medal .fr-ic { transform: rotate(-8deg) scale(1.06); }
.fr-board-name { font-size: 17px; font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: 8px; }
.fr-board-name a { color: var(--ink); transition: color .18s; }
.fr-board-name a::after { content: ""; position: absolute; inset: 0; } /* cả hàng bấm được */
.fr-board:hover .fr-board-name a { color: var(--petal); }
.fr-board-desc { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.fr-board-num, .fr-topic-num { text-align: center; line-height: 1.2; }
.fr-board-num b, .fr-topic-num b { display: block; font-size: 17px; color: var(--champ); font-variant-numeric: tabular-nums; }
.fr-board-num span, .fr-topic-num span { font-size: 11.5px; color: var(--muted); }
.fr-board-last { position: relative; z-index: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.fr-board-last a { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .18s; }
.fr-board-last a:hover { color: var(--petal); }
.fr-board-last span { color: var(--muted); font-size: 12px; }
.fr-none { color: var(--muted); font-size: 13px; }
.fr-none a { color: var(--petal); }

/* ---------- con dấu (ấn triện) Ghim / Khóa / BQT ---------- */
.fr-seal {
  display: inline-grid; place-items: center; flex: 0 0 auto; height: 22px; padding: 0 6px; margin-right: 8px; vertical-align: 2px;
  font: 400 13px/1 "FzGBrush", "Segoe UI", serif; letter-spacing: .5px; border-radius: 3px;
  transform: rotate(-4deg); border: 1.5px solid currentColor; box-shadow: inset 0 0 0 1.5px rgba(27, 13, 32, .9), inset 0 0 0 2.5px currentColor;
}
.fr-seal-pin { color: var(--champ); background: rgba(227, 201, 143, .1); }
.fr-seal-lock { color: #f08aa8; background: rgba(240, 138, 168, .1); }
.fr-seal-bqt { color: var(--petal); background: rgba(246, 195, 220, .08); margin: 0; font-size: 11px; height: 19px; }
.fr-topic.is-pinned .fr-seal-pin, .fr-h1 .fr-seal { animation: seal-stamp .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes seal-stamp { from { transform: rotate(-14deg) scale(1.7); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }

/* ---------- đầu chuyên mục ---------- */
.fr-board-head { padding: 4px 0 2px; }

/* ---------- danh sách chủ đề ---------- */
.fr-topics { overflow: hidden; }
.fr-topics-head, .fr-topic { display: grid; grid-template-columns: 32px minmax(0, 1fr) 70px 70px minmax(0, 170px); align-items: center; gap: 14px; padding: 13px 18px; }
.fr-topics-head { padding-top: 11px; padding-bottom: 11px; font-size: 12px; color: var(--muted); background: rgba(27, 13, 32, .35); border-bottom: 1px solid var(--line); }
.fr-topics-head span:first-child { grid-column: 1 / 3; }
.fr-topics-head span:nth-child(2), .fr-topics-head span:nth-child(3) { text-align: center; }
.fr-topic { position: relative; transition: background .2s ease-out; }
.fr-topic + .fr-topic { border-top: 1px solid var(--line); }
.fr-topic:hover { background: rgba(138, 63, 110, .14); }
.fr-topic.is-pinned { background: linear-gradient(90deg, rgba(227, 201, 143, .07), transparent 60%); }
.fr-topic-title { display: inline; font-weight: 600; font-size: 15.5px; color: var(--ink); line-height: 1.4; transition: color .18s; }
.fr-topic-title:hover { color: var(--petal); }
.fr-topic-title::after { content: ""; position: absolute; inset: 0; }
.fr-hot { display: inline-flex; vertical-align: -3px; margin-left: 6px; color: #f3a06a; }
.fr-hot .fr-ic { width: 16px; height: 16px; }
.fr-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.fr-meta .tag { padding: 1px 8px; font-size: 11px; margin-right: 4px; }
.fr-topic-last { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.35; }
.fr-topic-last b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .18s; }
.fr-topic-last span { color: var(--muted); font-size: 12px; }
.fr-topic-last:hover b { color: var(--petal); }

/* ---------- trạng thái rỗng ---------- */
.fr-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 38px 24px; color: var(--muted); }
.fr-empty > .fr-ic { width: 40px; height: 40px; color: var(--champ); opacity: .8; }
.fr-empty p { max-width: 52ch; }
.fr-empty a:not(.btn) { color: var(--petal); }

/* ---------- phân trang ---------- */
.fr-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 18px 0; }
.fr-pager a, .fr-pager span {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px;
  font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); border: 1px solid var(--line); background: rgba(27, 13, 32, .45);
  transition: color .18s, border-color .18s, background .18s;
}
.fr-pager a:hover { color: var(--petal); border-color: rgba(239, 156, 196, .45); }
.fr-pager .cur { color: #3a0f2a; font-weight: 700; background: linear-gradient(180deg, #f2a7ca, #cf6a9c); border-color: transparent; }
.fr-pager .gap { border: 0; background: none; min-width: 20px; padding: 0; }
.fr-pager .fr-ic { width: 16px; height: 16px; }

/* ---------- công cụ điều hành ---------- */
.fr-modbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 14px; border-radius: 12px;
  background: rgba(227, 201, 143, .06); border: 1px dashed rgba(227, 201, 143, .35);
}
.fr-modbar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--champ); margin-right: 4px; }
.fr-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; font-family: inherit;
  color: var(--ink); background: rgba(27, 13, 32, .55); border: 1px solid var(--line); cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.fr-chip .fr-ic { width: 15px; height: 15px; }
.fr-chip:hover { color: var(--petal); border-color: rgba(239, 156, 196, .5); }
.fr-chip-danger:hover { color: var(--bad); border-color: rgba(255, 154, 138, .55); background: rgba(192, 57, 43, .12); }
.fr-move { display: inline-flex; gap: 6px; align-items: center; }
.fr-move select { padding: 6px 10px; border-radius: 999px; font-size: 13px; color: var(--ink); background: rgba(27, 13, 32, .55); border: 1px solid var(--line); max-width: 200px; }
.fr-move select option { background: #2a1530; }

/* ---------- bài viết trong chủ đề ---------- */
.fr-thread { display: flex; flex-direction: column; gap: 14px; }
.fr-post { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden; scroll-margin-top: 16px; }
.fr-post-staff { border-color: rgba(227, 201, 143, .5); }
.fr-author { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 14px; text-align: center; background: rgba(27, 13, 32, .4); border-right: 1px solid var(--line); }
.fr-author-id { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.fr-author-name { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.fr-rank { font-size: 12px; color: var(--muted); }
.fr-role { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .2px; }
.fr-role-admin { color: #3a2a0f; background: linear-gradient(180deg, #f0d79a, #c89a3c); }
.fr-role-mod { color: #3a0f2a; background: linear-gradient(180deg, #f2a7ca, #cf6a9c); }
.fr-role-op { color: var(--petal); background: rgba(138, 63, 110, .35); border: 1px solid rgba(239, 156, 196, .3); }
.fr-author-stats { display: flex; gap: 14px; font-size: 12px; }
.fr-author-stats dt { color: var(--muted); }
.fr-author-stats dd { color: var(--champ); font-weight: 700; }
.fr-post-main { display: flex; flex-direction: column; min-width: 0; padding: 14px 22px 12px; }
.fr-post-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.fr-permalink { color: var(--muted); font-variant-numeric: tabular-nums; transition: color .18s; }
.fr-permalink:hover { color: var(--petal); }
.fr-post-body { flex: 1; padding: 14px 0 6px; font-size: 15.5px; line-height: 1.75; max-width: 75ch; overflow-wrap: anywhere; }
.fr-post-body a { color: var(--petal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(246, 195, 220, .4); }
.fr-post-body a:hover { text-decoration-color: currentColor; }
.fr-post-body strong { color: #fff; }
.fr-post-body .fr-u { text-decoration: underline; text-underline-offset: 3px; }
.fr-img { max-width: min(100%, 640px); max-height: 520px; border-radius: 10px; margin: 8px 0; box-shadow: 0 8px 20px rgba(10, 4, 14, .45); }
.fr-code { margin: 8px 0; padding: 12px 14px; border-radius: 10px; background: rgba(15, 6, 18, .7); border: 1px solid var(--line); overflow-x: auto; font: 13.5px/1.6 Consolas, "Courier New", monospace; color: #f3dfe9; white-space: pre; }
.fr-quote {
  position: relative; margin: 8px 0 10px; padding: 12px 16px 12px 44px; border-radius: 10px; color: #e8d3e3; font-size: 14.5px;
  background: rgba(27, 13, 32, .5); border: 1px solid rgba(227, 201, 143, .22);
}
.fr-quote::before { /* dấu ngoặc thư pháp */
  content: "\201C"; position: absolute; left: 12px; top: 4px; font: 400 34px/1 "FzGBrush", Georgia, serif; color: var(--champ); opacity: .75;
}
.fr-quote cite { display: block; font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--champ); margin-bottom: 4px; }
.fr-quote .fr-quote { background: rgba(58, 29, 64, .45); }
.fr-edited { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 4px; }
.fr-post-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.fr-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.2; font-family: inherit;
  color: var(--muted); background: none; border: 0; cursor: pointer; transition: color .18s, background .18s;
}
.fr-act .fr-ic { width: 16px; height: 16px; }
.fr-act:hover { color: var(--petal); background: rgba(138, 63, 110, .25); }
.fr-act-danger:hover { color: var(--bad); background: rgba(192, 57, 43, .14); }
.fr-inline { display: inline; }

/* khoảnh khắc riêng: bài vừa đăng / được dẫn tới loang màu đào rồi nhạt dần */
.fr-post::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 0% 0%, rgba(246, 195, 220, .26), rgba(239, 156, 196, .08) 45%, transparent 70%);
}
.fr-post:target { border-color: rgba(239, 156, 196, .65); }
.fr-post:target::after { animation: fr-ink 2.4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes fr-ink {
  0%   { opacity: 0; clip-path: circle(0% at 0% 0%); }
  25%  { opacity: 1; }
  60%  { opacity: 1; clip-path: circle(150% at 0% 0%); }
  100% { opacity: 0; clip-path: circle(150% at 0% 0%); }
}

/* ---------- soạn thảo ---------- */
.fr-compose { padding: 20px 22px; }
.fr-compose .field input { font-size: 15px; }
.fr-compose-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--muted); font-size: 14px; }
.fr-compose-who b { color: var(--ink); }
.fr-editor { border: 1px solid var(--line); border-radius: 12px; background: rgba(27, 13, 32, .55); transition: border-color .18s, box-shadow .18s; }
.fr-editor:focus-within { border-color: var(--petal-hot); box-shadow: 0 0 0 3px rgba(239, 156, 196, .2); }
.fr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.fr-tool { display: inline-grid; place-items: center; width: 34px; height: 32px; border-radius: 8px; color: var(--muted); background: none; border: 0; cursor: pointer; transition: color .15s, background .15s; }
.fr-tool:hover { color: var(--petal); background: rgba(138, 63, 110, .3); }
.fr-tool:active { transform: translateY(1px); }
.fr-count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; padding-right: 4px; }
.fr-count.is-near { color: var(--bad); }
.fr-editor textarea {
  display: block; width: 100%; min-height: 190px; padding: 14px 16px; resize: vertical; border: 0; outline: none; background: none;
  color: var(--ink); font: 15px/1.7 "Segoe UI", Tahoma, Arial, sans-serif;
}
.fr-editor-foot { padding: 8px 14px; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line); }
.fr-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; }
.fr-actions .fr-note { margin: 0 auto 0 0; }
.fr-btn.is-busy { opacity: .7; pointer-events: none; }
.fr-reply { margin-top: 18px; scroll-margin-top: 16px; }

/* gợi ý đăng nhập / bị khóa */
.fr-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; border-radius: 14px; color: var(--muted);
  background: rgba(27, 13, 32, .5); border: 1px dashed rgba(227, 201, 143, .35);
}
.fr-hint > .fr-ic { width: 22px; height: 22px; color: var(--champ); }
.fr-hint > span { flex: 1 1 260px; color: var(--ink); }
.fr-flash { margin-bottom: 16px; }

/* ---------- sidebar: mới thảo luận, số liệu, nội quy ---------- */
.fr-latest { list-style: none; }
.fr-latest li + li { border-top: 1px dashed var(--line); }
.fr-latest a { display: flex; flex-direction: column; gap: 2px; padding: 10px 4px; transition: padding .2s ease-out; }
.fr-latest a:hover { padding-left: 10px; }
.fr-latest .t { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .18s; }
.fr-latest a:hover .t { color: var(--petal); }
.fr-latest .m { font-size: 12px; color: var(--muted); }
.fr-side-more { display: block; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); text-align: right; font-size: 13px; color: var(--petal); }
.fr-side-more:hover { color: #fff; }
.fr-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fr-stats > div { padding: 10px 12px; border-radius: 12px; background: rgba(27, 13, 32, .4); border: 1px solid var(--line); }
.fr-stats dt { font-size: 11.5px; color: var(--muted); }
.fr-stats dd { font-size: 20px; font-weight: 800; color: var(--champ); display: flex; align-items: center; gap: 8px; }
.fr-online i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.fr-online i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); animation: fr-live 2.2s ease-out infinite; }
@keyframes fr-live { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.fr-rules { list-style: none; counter-reset: r; font-size: 13.5px; color: var(--ink); }
.fr-rules li { position: relative; padding: 7px 0 7px 26px; counter-increment: r; }
.fr-rules li + li { border-top: 1px dashed var(--line); }
.fr-rules li::before { content: counter(r); position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #3a2a0f; background: var(--champ); }

/* ---------- màn hình hẹp ---------- */
@media (max-width: 960px) {
  .fr-board { grid-template-columns: 46px minmax(0, 1fr) 70px 70px; }
  .fr-board-last { grid-column: 2 / -1; }
}
@media (max-width: 720px) {
  .fr-head { flex-wrap: wrap; }
  .fr-h1 { font-size: 28px; }
  .fr-h1-topic { font-size: 21px; }
  .fr-bar { flex-direction: column; align-items: stretch; }
  .fr-board { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px; }
  .fr-medal { width: 40px; height: 40px; grid-row: span 2; align-self: start; }
  .fr-board-num { display: none; }
  .fr-board-last { grid-column: 2; }
  .fr-topics-head { display: none; }
  .fr-topic { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; }
  .fr-topic-views { display: none; }
  .fr-topic-last { grid-column: 2 / -1; flex-direction: row; gap: 6px; }
  .fr-topic-last span::before { content: "\00B7  "; }
  .fr-post { grid-template-columns: 1fr; }
  .fr-author { flex-direction: row; justify-content: flex-start; text-align: left; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fr-author .fr-avatar-lg { width: 44px; height: 44px; font-size: 19px; }
  .fr-author-id { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  .fr-author-stats { margin-left: auto; flex-direction: column; gap: 0; text-align: right; }
  .fr-author-stats > div { display: flex; gap: 6px; justify-content: flex-end; }
  .fr-post-main { padding: 12px 16px 10px; }
  .fr-compose { padding: 16px; }
  .fr-modbar .fr-move select { max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-post:target::after, .fr-seal, .fr-online i::after { animation: none !important; }
  .fr-post:target::after { opacity: .6; }
}

/* ============================================================
   HIỆU NĂNG CUỘN — tạm dừng hiệu ứng khi khuất màn hình / đổi tab
   (JS offscreenPause() gắn .anim-off cho vùng không còn trong khung nhìn,
   và .page-hidden cho <html> khi tab bị ẩn). SVG SMIL được pause bằng JS.
   ============================================================ */
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after,
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }

/* ===== Slider / banner trang chủ (ảnh quản trong admin) ===== */
.hslider { position:relative; border-radius:16px; overflow:hidden; margin:0 0 24px; aspect-ratio:1000/380; min-height:200px; background:#2a1530; box-shadow:var(--shadow); }
.hslider-stage { position:absolute; inset:0; }
.hslide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; }
.hslide.is-active { opacity:1; pointer-events:auto; }
.hslide a, .hslide img { display:block; width:100%; height:100%; }
.hslide img { object-fit:cover; }
.hslide-cap { position:absolute; left:0; right:0; bottom:0; padding:30px 22px 16px; background:linear-gradient(to top, rgba(26,8,30,.88), rgba(26,8,30,0)); }
.hslide-cap span { color:#fff; font-weight:800; font-size:19px; text-shadow:0 2px 8px rgba(0,0,0,.55); }
.hslider-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer; color:#fff; font-size:24px; line-height:1; background:rgba(26,8,30,.42); backdrop-filter:none; transition:background .15s, opacity .15s; opacity:.55; }
.hslider:hover .hslider-nav { opacity:1; }
.hslider-nav:hover { background:var(--petal,#ef9cc4); color:#2a1530; }
.hslider-nav.prev { left:10px; }
.hslider-nav.next { right:10px; }
.hslider-dots { position:absolute; left:0; right:0; bottom:12px; z-index:3; display:flex; gap:8px; justify-content:center; }
.hslider-dots button { width:10px; height:10px; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.5); transition:background .15s, transform .15s; }
.hslider-dots button.is-active { background:var(--champ,#e3c98f); transform:scale(1.2); }
@media (max-width:560px){
  .hslider { aspect-ratio:16/9; border-radius:12px; }
  .hslide-cap span { font-size:16px; }
  .hslider-nav { width:34px; height:34px; font-size:20px; }
}

/* ===== Banner quảng cáo 2 bên hông (album "Quảng cáo Left/Right") ===== */
.side-ad { position:fixed; top:50%; transform:translateY(-50%); z-index:60; width:150px; display:none; flex-direction:column; gap:12px; max-height:94vh; }
.side-ad-left  { left:16px; }
.side-ad-right { right:16px; }
.side-ad a { display:block; width:100%; }
.side-ad img { display:block; width:100%; height:auto; border-radius:10px; box-shadow:var(--shadow); }
@media (min-width:1540px){ .side-ad { display:flex; } }
@media (min-width:1780px){ .side-ad { width:170px; } .side-ad-left{ left:24px; } .side-ad-right{ right:24px; } }

/* ===== Hộp chat hỗ trợ nổi (góc phải dưới) ===== */
.chatw { position: fixed; right: 22px; bottom: 22px; z-index: 60; --rtile: 96px; }
.chatw-fab {
  width: var(--rtile); height: var(--rtile); cursor: pointer; position: relative; display: block;
  border: 0; padding: 0; background: transparent; color: #fff; line-height: 0;
  filter: drop-shadow(0 9px 14px rgba(10,4,14,.5));
  transition: transform .2s, filter .2s;
}
.chatw-fab:hover { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 12px 18px rgba(10,4,14,.6)); }
.chatw-botwrap {
  display: block; width: 100%; height: 100%; transform-origin: 50% 90%;
}
.chatw-bot {
  display: block; width: 100%; height: 100%;
  background-image: url("../img/robot-sprite.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--rtile) * 12) var(--rtile);
  image-rendering: auto;
  transform-origin: 50% 90%;
  animation: bot-breathe 3.6s ease-in-out infinite;   /* "tho" nhe lien tuc cho co suc song */
}
/* Hit tho nhe lien tuc (rat tinh te, muot) */
@keyframes bot-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-1.5px) scaleY(1.012); }
}
/* Hanh dong idle: dat tren .chatw-botwrap de khong dung "tho" cua .chatw-bot */
.chatw-botwrap.act-hop  { animation: bot-hop .9s both; }
.chatw-botwrap.act-sway { animation: bot-sway 1.6s ease-in-out both; }
.chatw-botwrap.act-lean { animation: bot-lean 1.7s ease-in-out both; }
/* Nhay nhe theo duong cong: lay da (khuyu) -> bat len (giam toc) -> roi xuong (tang toc) -> nen dap dat -> bat lai */
@keyframes bot-hop {
  0%   { transform: translateY(0) scale(1, 1);        animation-timing-function: ease-out; }
  14%  { transform: translateY(0) scale(1.07, .88);   animation-timing-function: ease-out; }
  46%  { transform: translateY(-20px) scale(.95, 1.07); animation-timing-function: ease-in; }
  78%  { transform: translateY(0) scale(1.08, .88);   animation-timing-function: ease-out; }
  90%  { transform: translateY(0) scale(.97, 1.03);   animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) scale(1, 1); }
}
/* Lac lu con lac tat dan (muot) */
@keyframes bot-sway {
  0%, 100% { transform: rotate(0deg); }
  16% { transform: rotate(-6deg); }
  40% { transform: rotate(4.5deg); }
  62% { transform: rotate(-2.8deg); }
  82% { transform: rotate(1.4deg); }
}
/* Nghieng qua mot ben nhu dang ngo quanh roi tra ve */
@keyframes bot-lean {
  0%   { transform: rotate(0deg); }
  22%  { transform: rotate(-8deg); }
  50%  { transform: rotate(-8deg); }
  74%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .chatw-bot { animation: none; }
  .chatw-botwrap.act-hop, .chatw-botwrap.act-sway, .chatw-botwrap.act-lean { animation: none; }
}
.chatw-fab-dot {
  position: absolute; top: 10px; right: 6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--plum-dark);
}
.chatw-fab-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--ok); opacity: .6; animation: chatw-ping 1.8s ease-out infinite;
}
@keyframes chatw-ping { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.chatw.is-open .chatw-fab-dot { display: none; }

.chatw-panel {
  position: absolute; right: 0; bottom: calc(var(--rtile) + 16px); width: 340px; max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, rgba(42,21,48,.98), rgba(27,13,32,.98));
  border: 1px solid var(--champ); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(8,3,12,.6); color: var(--ink);
  transform: translateY(14px) scale(.98); opacity: 0; pointer-events: none;
  transform-origin: bottom right; transition: opacity .22s, transform .22s;
}
.chatw.is-open .chatw-panel { transform: none; opacity: 1; pointer-events: auto; }

.chatw-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px;
  background: linear-gradient(135deg, var(--plum-mid), var(--plum-dark)); border-bottom: 1px solid var(--line); }
.chatw-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, var(--petal), var(--plum-mid)); color: #3a1733; font-size: 18px; }
.chatw-id { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.chatw-id strong { font-size: 15px; }
.chatw-id em { font-style: normal; font-size: 12px; color: var(--petal); }
.chatw-x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.chatw-x:hover { background: rgba(255,255,255,.16); }

.chatw-body { padding: 14px 12px; max-height: 46vh; min-height: 120px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; background: rgba(20,10,24,.35); }
.chatw-msg { max-width: 85%; padding: 9px 12px; border-radius: 13px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.chatw-msg a { color: var(--petal-hot); text-decoration: underline; }
.chatw-msg.bot { align-self: flex-start; background: rgba(90,48,92,.5); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chatw-msg.me { align-self: flex-end; background: linear-gradient(135deg, var(--plum-mid), #6b2f55); border-bottom-right-radius: 4px; }
.chatw-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chatw-links a { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; text-decoration: none;
  background: rgba(227,201,143,.14); border: 1px solid var(--champ); color: var(--champ); }
.chatw-links a:hover { background: rgba(227,201,143,.26); }

.chatw-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chatw-chip { cursor: pointer; font-size: 12.5px; padding: 6px 11px; border-radius: 999px;
  background: rgba(246,195,220,.1); border: 1px solid var(--line); color: var(--ink); transition: background .15s, border-color .15s; }
.chatw-chip:hover { background: rgba(246,195,220,.2); border-color: var(--petal-hot); }

.chatw-form { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; border-top: 1px solid var(--line); background: rgba(20,10,24,.35); }
.chatw-form input, .chatw-form textarea {
  width: 100%; padding: 9px 11px; border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--ink);
  background: rgba(27,13,32,.6); border: 1px solid var(--line); outline: none; resize: vertical; }
.chatw-form input:focus, .chatw-form textarea:focus { border-color: var(--petal-hot); }
.chatw-send { cursor: pointer; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--champ); font-weight: 600;
  color: #3a1733; background: linear-gradient(135deg, var(--petal), var(--champ)); }
.chatw-send:hover { filter: brightness(1.05); }
.chatw-send[disabled] { opacity: .6; cursor: default; }

@media (max-width: 600px) {
  .chatw { right: 14px; bottom: 14px; --rtile: 78px; }
  .chatw-panel { width: calc(100vw - 28px); }
  .to-top { bottom: 104px; right: 14px; }
}
.chatw-links .chatw-link-tel { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: rgba(227,201,143,.14); border: 1px solid var(--champ); color: var(--champ); }
.chatw-form[hidden] { display: none; }
/* Hộp thoại VẼ bằng CSS (robot "đang nói") — nổi trên đầu robot */
.chatw-bubble {
  position: absolute; right: calc(var(--rtile) * 0.30); bottom: calc(var(--rtile) * 0.86);
  max-width: 200px; padding: 8px 13px; border-radius: 15px;
  background: linear-gradient(180deg, #ffffff, #eaf3ff);
  border: 2px solid #7fc4ff; color: #223247;
  font-size: 13px; font-weight: 700; line-height: 1.35; white-space: nowrap; text-align: center;
  box-shadow: 0 7px 18px rgba(10, 4, 14, .35);
  transform: scale(0); transform-origin: bottom right; opacity: 0; pointer-events: none; z-index: 2;
  transition: transform .3s cubic-bezier(.2, 1.5, .45, 1), opacity .25s;
}
.chatw-bubble::before, .chatw-bubble::after {
  content: ""; position: absolute; bottom: 0; width: 0; height: 0; border-style: solid;
}
.chatw-bubble::before { right: 18px; bottom: -11px; border-width: 11px 8px 0 8px; border-color: #7fc4ff transparent transparent transparent; }
.chatw-bubble::after  { right: 20px; bottom: -7px;  border-width: 8px 6px 0 6px;  border-color: #eaf3ff transparent transparent transparent; }
.chatw-bubble.show { transform: scale(1); opacity: 1; animation: chatw-bubble-bob 2s ease-in-out .35s infinite; }
@keyframes chatw-bubble-bob { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1) translateY(-3px); } }
.chatw.is-open .chatw-bubble { opacity: 0; transform: scale(0); animation: none; }
@media (prefers-reduced-motion: reduce) { .chatw-bubble.show { animation: none; } }

/* 09/11/2026: biển hiệu gắn trên mép panel dùng được ở cột chính (trang Tải game) — giống tiêu đề sidebar "Hướng dẫn nhanh" */
.card-pad.card-tag { padding-top: 36px; overflow: visible; margin-top: 40px; }
.sec-head.sec-tag { position: absolute; top: -23px; left: 0; right: 0; margin: 0; padding: 0; z-index: 3; justify-content: center; }
.sec-head.sec-tag::after { display: none; }
.sec-head.sec-tag h2 { width: 248px; height: 45px; padding: 0 40px; font-size: 15px; }