/* ============================================================
   Tinh Trong Giang Ho - trang chu (clone bo cuc jxgl.xoyo.com)
   Viet lai toan bo tu dau, khong tai su dung CSS goc.
   ============================================================ */

:root {
  --bg: #f7f0dd;
  --bg-alt: #efe4c8;
  --bg-panel: #fbf6e8;
  --gold: #b8873f;
  --gold-dark: #8a6529;
  --gold-light: #e4c383;
  --teal: #3f9d8f;
  --red: #c0392b;
  --text: #3a2e22;
  --text-light: #6b5c46;
  --text-invert: #f7f0dd;
  --header-bg: rgba(35, 32, 28, .68);
  --footer-bg: #1a1714;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow: 0 6px 20px rgba(60, 40, 10, .12);
  --font-head: 'Cormorant Garamond', 'Be Vietnam Pro', serif;
  --font-body: 'Be Vietnam Pro', 'Noto Sans', sans-serif;
  --maxw: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg) url("../assets/images/20260211_bg.jpg") no-repeat center top / contain;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.hidden { display: none !important; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: #2b2620;
  color: #cfc4ad;
  font-size: 13px;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.topbar-brand { font-weight: 700; letter-spacing: .5px; color: var(--gold-light); font-size: 15px; }
.topbar-links { display: flex; gap: 18px; align-items: center; }
.topbar-links a:hover { color: #fff; }
.topbar-links .sep { opacity: .4; }

/* ---------- Sub nav ---------- */
.subnav {
  background: linear-gradient(180deg, #5a5347, #454038);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.subnav ul { display: flex; justify-content: center; }
.subnav a {
  display: block;
  padding: 14px 26px;
  color: #e9dfc6;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .5px;
  border-bottom: 3px solid transparent;
  transition: .2s;
}
.subnav li.active a,
.subnav a:hover {
  color: #fff;
  border-bottom-color: var(--gold);
  background: rgba(255, 255, 255, .06);
}

/* ---------- Hero ----------
   Toa do lay tu CSS goc cua jxgl.xoyo.com (.mid rong 1400px trong .wrap 1920px),
   quy doi sang % theo chieu ngang de responsive, giu px cho chieu doc (top/bottom). */
.hero {
  position: relative;
  min-height: 820px;
  background: transparent;
  overflow: hidden;
}
.hero-stage {
  position: relative;
  z-index: 3;
  max-width: 1400px;
  min-height: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.hero-logo-abs {
  position: absolute;
  left: 12.3%;
  top: 88px;
  width: 223px;
  max-width: 26%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
}

.hero-tagline {
  position: absolute;
  left: 12.3%;
  top: 210px;
  right: 12%;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  color: #f3e6c8;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .5);
  margin: 0;
}
.hero-sub {
  position: absolute;
  left: 12.3%;
  top: 330px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 16, 10, .45);
  color: #f3e6c8;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 15px;
  white-space: nowrap;
}
.hero-sub strong { color: var(--gold-light); }

.hero-play-btn {
  position: absolute;
  left: 42.1%;
  top: 250px;
  width: 68px;
  height: 68px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: url("../assets/images/play-ico.png") center/contain no-repeat;
  animation: pulse 1.4s linear infinite both;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }

.hero-dl-panel {
  position: absolute;
  left: 26%;
  top: 634px;
  width: 47.5%;
  min-width: 460px;
  aspect-ratio: 665 / 154;
  background: url("../assets/images/v0301/bg-scan-download-10-10.png") no-repeat center/100% 100%;
}
.hero-dl-qr {
  position: absolute;
  left: 14.3%;
  top: 16.2%;
  width: 15.8%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid #beb07c;
}
.hero-dl-btn {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.hero-dl-btn.dl-android { left: 32.3%; top: 11.7%; width: 25%; aspect-ratio: 166/53; background-image: url("../assets/images/v0301/scan-download-btn/btn-android.png"); }
.hero-dl-btn.dl-ios { left: 32.3%; bottom: 9.7%; width: 25%; aspect-ratio: 166/53; background-image: url("../assets/images/v0301/scan-download-btn/btn-ios.png"); }
.hero-dl-btn.dl-pc { left: 58.35%; top: 11.7%; width: 20.75%; aspect-ratio: 138/79; background-image: url("../assets/images/v0301/scan-download-btn/btn-pc.png"); }
.hero-dl-btn.dl-install { left: 58.35%; bottom: 9.7%; width: 20.75%; aspect-ratio: 138/39; background-image: url("../assets/images/v0301/scan-download-btn/btn-inti.png"); }
.hero-dl-btn.dl-topup { left: 80.3%; top: 11.7%; width: 10.68%; aspect-ratio: 71/121; background-image: url("../assets/images/v0301/scan-download-btn/btn-up.png"); }
.hero-dl-btn:hover { filter: brightness(1.08); }

.hero-badges {
  position: absolute;
  left: 74.1%;
  /* Ben phai chua cho .side-float (fixed 160px + right 20px, thu nho o khung 1025-1340).
     (100vw - 100%) / 2 = khoang tu mep phai .hero-stage ra mep man hinh. */
  right: max(0px, calc(196px - (100vw - 100%) / 2));
  max-width: 150px;
  /* margin-top (% theo be ngang) = nua chieu cao .hero-dl-panel -> canh giua theo panel. */
  top: 634px;
  margin-top: 5.5%;
  transform: translateY(-50%);
}
.hero-badge-18 {
  display: block;
  width: 100%;
  height: auto;
}
/* ---------- Section shell ---------- */
.section { padding: 24px 0; }
.section-alt {
  /* background: var(--bg-alt); */
}
.section-title {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 30px;
  color: var(--gold-dark);
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.section-title::before,
.section-title::after {
  content: "";
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.section-title::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* ---------- Banner + News (2 cot) ----------
   Ty le lay dung tu goc: section-lunbo 680x406, section-news 683x383 margin-left 36px. */
.banner-news { display: grid; grid-template-columns: 680fr 683fr; gap: 36px; align-items: stretch; }
.banner-slider { min-width: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 680/406; background: #ddd; }
/* Truot ngang giong Swiper ban goc: ca dai anh dat canh nhau roi keo bang
   translateX. JS nhan ban slide dau/cuoi de chay vong lien tuc. */
.banner-track {
  display: flex; height: 100%;
  --index: 0;
  transform: translateX(calc(var(--index) * -100%));
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.banner-slide { flex: 0 0 100%; max-width: 100%; height: 100%; }
.banner-slide img { width: 100%; height: 100%; object-fit: cover; }
.banner-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.banner-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .5); padding: 0; }
.banner-dots button.active { background: var(--gold); width: 22px; border-radius: 5px; }

.news-panel { min-width: 0; background: #fcf9f1; border: 1px solid #e6d8b0; border-radius: var(--radius); display: flex; height: 100%; }
.news-nav {
  flex-shrink: 0; width: 112px; padding: 20px 0; display: flex; flex-direction: column;
  align-items: flex-start; position: relative; box-sizing: border-box;
}
.news-nav::after { content: ""; position: absolute; left: 98px; top: 22px; bottom: 22px; width: 1px; background: #666c65; opacity: .1; }
/* flex: 1 de cac tab chia deu chieu cao bang, khong de trong o day khi so tab
   it hon truoc (3 muc thay vi 4). */
.news-nav .nav-item {
  flex: 1;
  width: 96px; min-height: 65px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 14px; line-height: 1.25; font-weight: 600; padding: 4px 2px;
  color: #7b7c7b; background: none; border: none; border-bottom: 1px dashed #dddbd2; position: relative;
  cursor: pointer; box-sizing: border-box;
}
.news-nav .nav-item.cur {
  color: #ae8537; font-weight: 700;
  background:
    url("../assets/images/v0301/nav-news-item.png") no-repeat center / 100% 100%,
    linear-gradient(90deg, rgba(228, 195, 131, .08), rgba(228, 195, 131, .62));
}
.news-nav .nav-item.cur::after {
  content: ""; background: url("../assets/images/v0301/nav-news-item-arrow.png") no-repeat;
  width: 9px; height: 72px; position: absolute; top: -4px; right: -10px;
}
.news-body { flex: 1; min-width: 0; width: 0; padding: 20px 24px 16px 20px; display: flex; flex-direction: column; }
.news-tit {
  display: flex; align-items: center; gap: 8px; min-height: 62px;
  padding-bottom: 16px; border-bottom: 1px dashed #e5e2da; margin-bottom: 10px; box-sizing: border-box;
}
.news-tit a {
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #7c7669; font-size: 17px; font-weight: 700; line-height: 1.4;
}
.tit-hot {
  flex-shrink: 0;
  background: url("../assets/images/v0301/ico-hot.png") no-repeat center/cover;
  width: 37px; height: 18px;
}
.news-list { flex: 1; display: flex; flex-direction: column; }
.news-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #e5e2da; font-size: 14px; }
.news-list li:last-child { border-bottom: none; }
.news-cat {
  flex-shrink: 0; padding: 0 8px; height: 22px; line-height: 22px; min-width: 24px;
  text-align: center; background: #e1ca8a; color: #fff; font-size: 12px; white-space: nowrap;
}
.news-list a { flex: 1; min-width: 0; color: #7b7c7b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .2s; }
.news-list a:hover { color: var(--gold-dark); transform: translateX(4px); }

/* Nut "Xem them" o day moi bang tin. Van trong bang mau vang cua trang nhung
   duoc vien + nen nhat de noi hon cac dong chu tran o tren, cho thay ro la nut. */
.news-more {
  /* Can giua giong .btn-more-view o muc thu vien anh; can phai thi bi bang QR
     noi ben phai (.side-float) de len o khoang be ngang 1300-1520px. */
  align-self: center; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; height: 28px; padding: 0 15px;
  border: 1px solid #e1ca8a; border-radius: 999px;
  background: linear-gradient(180deg, #fdf9ee, #f5e9cd);
  color: var(--gold-dark); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: .2s;
}
/* Mui ten nho ghep tu 2 canh border, khong can them anh. */
.news-more::after {
  content: ""; width: 5px; height: 5px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.news-more:hover {
  color: #fff; border-color: var(--gold);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 2px 7px rgba(184, 135, 63, .3);
}
.news-more:hover::after { transform: rotate(45deg) translate(1px, -1px); }

/* ---------- Floating side panel ----------
   Toa do lay dung tu .side-nav CSS goc: khung 160x374, fixed right:20px bottom:200px. */
.side-float {
  position: fixed;
  right: 20px;
  bottom: 200px;
  z-index: 80;
  width: 160px;
  height: 374px;
  padding-top: 1px;
  background: url("../assets/images/v0301/side-nav.png") no-repeat center top;
}
.side-float .side-ewm {
  width: 129px;
  height: 129px;
  margin: 52px auto 9px;
  background: #fff;
  border: 1px solid #eee;
}
.side-float .btn-side {
  display: block;
  width: 129px;
  height: 40px;
  margin: 0 auto 6px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: .2s;
}
.side-float .btn-side:hover { transform: translateY(-2px); filter: brightness(1.08); }
.side-float .btn-side-ios { background-image: url("../assets/images/v0301/btn-side-ios.png"); }
.side-float .btn-side-android { background-image: url("../assets/images/v0301/btn-side-android.png"); }
.side-float .btn-side-pc { height: 41px; background-image: url("../assets/images/v0301/btn-side-pc.png"); }
.side-float .side-back-top {
  position: absolute;
  bottom: -38px;
  left: 50%;
  margin-left: -37px;
  width: 75px;
  height: 67px;
  padding: 0;
  border: none;
  cursor: pointer;
  background: url("../assets/images/back-top.png") no-repeat center/contain;
}
@media (max-width: 1300px) { .side-float { right: 10px; } }

/* ---------- Tu lieu tro choi & Trung tam chi dan ----------
   Goc: .part-information = 2 cot 680px, cach nhau 40px.
   Dung anh nen goc: tit-info-s.png (duong ke phu de), bg-data-item(-on).png (o pill),
   bg-tip-item.png (the chi dan), ico-right-o.png (mui ten sau tieu de the). */
.part-information { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.info-head { position: relative; margin-bottom: 18px; }
.info-head .tit-info {
  margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--gold-dark);
}
.part-information .btn-more {
  position: absolute; right: 2px; bottom: 4px;
  font-size: 14px; color: #a2a1a1;
}
.part-information .btn-more:hover { color: var(--gold-dark); }

.tit-info-s {
  background: url("../assets/images/v0301/tit-info-s.png") no-repeat center / 100% 100%;
  height: 29px; margin: 22px 0 0; font-size: 17px; font-weight: 600; color: #64a491;
}
.tit-info-s span { display: inline-block; line-height: 20px; margin-left: 8px; position: relative; top: -4px; }

.data-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; margin-top: 12px; }
.data-list a {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; padding: 0 6px;
  background: url("../assets/images/v0301/bg-data-item.png") no-repeat center / 100% 100%;
  font-size: 13px; color: #7b7c7b; transition: .15s;
}
.data-list a:hover { color: #b78933; background-image: url("../assets/images/v0301/bg-data-item-on.png"); }
.data-list a img { width: 18px; height: 18px; flex-shrink: 0; filter: grayscale(100%); transition: .15s; }
.data-list a:hover img { filter: grayscale(0); }
.data-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tip-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 22px; }
.tip-item {
  position: relative; aspect-ratio: 328 / 153;
  background: url("../assets/images/v0301/bg-tip-item.png") no-repeat center / 100% 100%;
  padding: 0 30px; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.tip-item h3 {
  margin: 0; font-size: 19px; color: #b08330; font-weight: 700; white-space: nowrap;
}
.tip-item h3::after {
  content: ""; display: inline-block; vertical-align: middle; position: relative; top: -2px;
  width: 16px; height: 16px; margin-left: 4px;
  background: url("../assets/images/v0301/ico-right-o.png") no-repeat center / contain;
}
.tip-item p {
  margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #7b7c7b; width: 55%;
}
.tip-item img {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: 32%; max-width: 116px; height: auto;
}

/* ---------- Faction showcase ----------
   Bo cuc 3 cot: mo ta trai | nhan vat giua | chi so+ky nang phai, giong ban goc.
   Nav chon mon phai o duoi dang hang ngang (thay vi sidebar doc). */
.faction-wrap { display: flex; flex-direction: column; gap: 10px; }

/* Anh role-*.png la canvas 1920x1053 (nhan vat o giua, xung quanh trong suot),
   2 panel chu dat absolute de len anh: .job-info left 260px / .job-type right 260px (goc). */
.faction-stage {
  position: relative;
  width: min(100vw, 1920px);
  margin-left: 50%;
  transform: translateX(-50%);
  /* Cao theo ti le anh (1920x1053 = 54.85vw) nhung chan 2 dau: thap hon 670px thi
     2 panel chu (cao ~546px, dat o 15% tinh tu tren) tran khoi khung va de len
     .faction-nav; cao hon 900px thi ho mot mang trong giua noi dung va nav. */
  height: clamp(670px, 54.85vw, 900px);
}
/* <picture> chi la vo boc de chon ban anh; khong tao hop rieng trong bo cuc. */
.faction-role-pic { display: contents; }
.faction-role {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
/* Container giua: dung chung be rong voi .container cua site (--maxw) de 2 panel
   thang hang voi noi dung cac section khac, khong bi tran ra ngoai. */
.faction-stage-inner {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; left: 0; right: 0;
  padding: 0 20px;
  box-sizing: border-box;
}
.faction-info-left {
  position: absolute; left: 20px; top: 14.9%;
  width: 36%; max-width: 500px;
}
.faction-info-right {
  position: absolute; top: 15%;
  /* Nhu .hero-badges: chua cho .side-float khoi de len radar/ky nang/tab. */
  right: max(20px, calc(196px - (100vw - 100%) / 2));
  width: 28%; max-width: 380px;
}

/* Hieu ung doi mon phai, lay theo ban goc (Swiper effect fade + 2 lop rieng):
   - khoi chu: fade cheo 300ms (speed cua swiper)
   - anh nhan vat: truot ngang ~140px/1920 va hien dan trong 1s
   - ten mon phai: hien dan cham hon, 3s */
@keyframes faction-role-in {
  from { opacity: 0; transform: translateX(7.3%); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes faction-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.faction-role.is-anim { animation: faction-role-in 1s ease both; }
.faction-stage-inner.is-anim { animation: faction-fade-in .3s ease both; }
.faction-name-tag.is-anim { animation: faction-fade-in 3s ease both; }
@media (prefers-reduced-motion: reduce) {
  .faction-role.is-anim,
  .faction-stage-inner.is-anim,
  .faction-name-tag.is-anim { animation: none; }
}

/* Ten mon phai va mo ta thang cot doc: cung mep trai, cung be rong. */
.faction-name-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 0; }
.faction-name-tag img.kezhi { width: 52px; }
.faction-name-tag .name-vn { font-family: var(--font-head); font-weight: 700; font-size: 34px; color: var(--gold-dark); }
.faction-desc {
  width: 70%; margin: 0; padding: 14px 0;
  font-size: 14px; color: #797979; line-height: 1.9;
  border-top: 1px solid rgba(0, 0, 0, .12); border-bottom: 1px solid rgba(0, 0, 0, .12);
}

/* Thu tu giong ban goc: radar -> dac diem/do kho -> ky nang -> tab vu khi (duoi cung).
   Tab bar dung anh goc: khung skill-tab(-2).png + vien vang truot skill-tab-on.png. */
.faction-tabs {
  position: relative; height: 60px; margin: 28px auto 0; width: 100%;
  display: flex; align-items: center;
  --tab-count: 3; --active-index: 0;
}
/* Dung border-image 9-slice thay vi background-size:100% 100%.
   Khung skill-tab(-2).png cao 60px, mu bo 31px moi dau; vien vang skill-tab-on.png
   140x44, mu bo 17px. Neu keo bang background-size thi 2 anh gian theo he so ngang
   khac nhau (khung ~1.3x, vien vang ~0.86x khi co 3 tab) nen do cong 2 dau khong
   khop nhau. Voi border-image, mu bo giu dung kich thuoc that, chi doan giua gian. */
.faction-tabs::before {
  content: ""; position: absolute; inset: 0 -10px;
  background: none;
  border: 0 solid transparent;
  border-image: url("../assets/images/v0301/skill-tab-2.png") 0 31 fill / 0 31px / 0 stretch;
}
.faction-tabs[data-count="2"]::before {
  border-image-source: url("../assets/images/v0301/skill-tab.png");
}
/* Vien vang thut vao 6px so voi o tab de chu khong cham mep bg. */
.faction-tabs::after {
  content: ""; position: absolute; top: 8px; height: calc(100% - 16px); z-index: 1;
  width: calc(100% / var(--tab-count) - 6px);
  left: calc(var(--active-index) * (100% / var(--tab-count)) + 3px);
  background: none;
  border: 0 solid transparent;
  border-image: url("../assets/images/v0301/skill-tab-on.png") 0 17 fill / 0 17px / 0 stretch;
  transition: left .3s;
}
.faction-tabs button {
  position: relative; z-index: 2; flex: 1; min-width: 0; height: 100%;
  margin: 0 3px; padding: 6px 12px; box-sizing: border-box;
  border: none; background: none; cursor: pointer;
  font-size: 12px; line-height: 1.25; color: #6fa593; transition: color .3s;
}
.faction-tabs button.active { color: #835e29; font-weight: 700; text-shadow: 0 1px 1px #f8fcf6; cursor: default; }

.faction-skill-box { margin-bottom: 4px; text-align: center; }
.faction-skill-box label { display: block; font-size: 13px; color: var(--text-light); font-weight: 600; margin-bottom: 8px; }
.faction-stats { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; }
.faction-stats .radar { width: 250px; height: 250px; flex-shrink: 0; }
.faction-stats .radar svg { display: block; width: 100%; height: 100%; }
.faction-meta { text-align: center; }
.faction-meta p { margin: 4px 0; font-size: 13px; color: var(--text-light); }
.faction-meta .stars { color: var(--gold); letter-spacing: 2px; }
.faction-skills { display: flex; justify-content: center; gap: 14px; }
.faction-skills .skill { text-align: center; width: 70px; }
/* Icon ky nang da co san vien tron trong anh PNG nen khong can nen/vien them. */
.faction-skills img { width: 64px; height: 64px; }
.faction-skills span { display: block; font-size: 11px; margin-top: 4px; color: var(--text-light); }

/* ---------- Faction nav (hang ngang, chu doc - giong .job-nav ban goc) ----------
   Goc: item 38x115, chu doc, duong ke dut chay ngang qua icon hinh thoi o dinh. */
.faction-nav {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center;
  /* Gap co theo be ngang: de cach deu 52px thi 10 nut trai rong 848px, can giua
     man hinh la 2 nut cuoi chui xuong duoi .side-float o cac khung duoi ~1340px. */
  gap: 12px clamp(30px, 3.5vw, 52px); padding-top: 0;
}
.faction-nav::before {
  content: ""; position: absolute; top: 9px; left: 2%; right: 2%; height: 0;
  border-top: 1px dashed rgba(0, 0, 0, .43);
}
.faction-nav button {
  position: relative; width: 38px; height: 128px; padding: 0; border: none; cursor: pointer;
  background: none no-repeat center / 100% 100%;
}
.faction-nav button::before {
  content: ""; position: absolute; top: 1px; left: 50%; margin-left: -8px; z-index: 2;
  width: 16px; height: 16px; background: url("../assets/images/v0301/ico-square.png") no-repeat center/contain;
}
.faction-nav button span {
  position: absolute; inset: 0; padding-top: 24px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: start;
  writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: #707070; letter-spacing: .5px;
}
.faction-nav button.active {
  background-image: url("../assets/images/v0301/job-nav-on.png");
}
.faction-nav button.active span { color: #b08330; }
.faction-nav button.active::before { display: none; }

/* ---------- Bang xep hang ----------
   Theo CSS goc: .rank-con nen bg-rank.png, tab dung sprite tit-rank-type.png
   (trang thai thuong o -60px, active o 0), dropdown nen bg-sel.png. */
.rank-wrap { position: relative; }

.line-choose { position: relative; height: 36px; margin-bottom: 4px; }
.line-choose .sel-box {
  display: inline-block; width: 157px; height: 36px;
  background: url("../assets/images/v0301/bg-sel.png") no-repeat center / 100% 100%;
}
.line-choose select {
  width: 100%; height: 100%; padding-left: 20px; border: none; outline: 0; background: none;
  font-family: inherit; font-size: 13px; color: #b08330; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.line-choose select option { background: #f1dba2; color: #6b5c46; }
.time-tip { position: absolute; right: 0; top: 10px; font-size: 13px; color: #a2a1a1; }

/* Goc: khung bg-rank.png lech xuong 23px, hang tab nam tren cung (y=0) va de len
   mep khung; 2 mui ten o top:-6px nen nho len cao hon hang tab mot chut. */
/* Khung keo gian theo chieu cao noi dung de bao tron ca phan trang. */
.rank-con {
  position: relative; padding: 0 0 22px; margin-top: 19px;
  background: url("../assets/images/v0301/bg-rank.png") no-repeat center 23px / 100% calc(100% - 23px);
}
.btn-prev-rank-type,
.btn-next-rank-type {
  position: absolute; top: -6px; width: 49px; height: 55px; z-index: 2;
  border: none; background: none no-repeat center / 100% auto; cursor: pointer;
}
.btn-prev-rank-type { left: 0; background-image: url("../assets/images/v0301/btn-prev-rank-type.png"); }
.btn-next-rank-type { right: 0; background-image: url("../assets/images/v0301/btn-next-rank-type.png"); }

.rank-type-list {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  width: calc(100% - 138px); margin: 0 auto 25px;
}
/* Duong truot chi dung o ban mobile - o desktop bo qua hop de cac nut van la
   con truc tiep cua .rank-type-list, va an cac ban sao dung de chay vong. */
.rank-type-track { display: contents; }
.rank-type-item.is-clone { display: none; }
.rank-type-item {
  width: 189px; height: 50px; flex-shrink: 0; border: none; cursor: pointer;
  background: url("../assets/images/v0301/tit-rank-type.png") no-repeat 0 -60px / 189px auto;
  display: flex; align-items: center; justify-content: center; padding: 0 16px; box-sizing: border-box;
  font-size: 14px; font-weight: 600; line-height: 1.2; color: #548877;
  transition: all .3s;
}
.rank-type-item.active { background-position: 0 0; color: #ae8537; }

.rank-table-wrap { width: 100%; }
table.rank-table { width: calc(100% - 18px); margin: 0 auto; border-collapse: collapse; text-align: center; color: #7b7c7b; }
.rank-table thead th {
  height: 50px; font-weight: 700; font-size: 17px; color: #ae8537;
}
.rank-table thead th:first-child { width: 10%; }
.rank-table tbody tr:nth-child(2n + 1) { background: #f6f1e1; }
.rank-table td { height: 45px; font-size: 14px; }
.rank-table td span[class^="rank-top"] {
  display: inline-block; width: 40px; height: 28px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.rank-table td span.rank-top1 { background-image: url("../assets/images/v0301/ico-top1.png"); }
.rank-table td span.rank-top2 { background-image: url("../assets/images/v0301/ico-top2.png"); }
.rank-table td span.rank-top3 { background-image: url("../assets/images/v0301/ico-top3.png"); }

.el-pagination { margin-top: 18px; text-align: center; font-size: 0; }
.el-pagination ul { display: inline-flex; gap: 8px; }
.el-pagination li {
  min-width: 29px; height: 29px; line-height: 27px; padding: 0 6px;
  font-size: 15px; color: #b29d7c; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-sm); transition: .2s;
}
.el-pagination .page_code:hover,
.el-pagination .page_code.active { color: #ae8537; border-color: var(--gold-light); background: #fbf6e8; }
.el-pagination .page_btn.disabled { cursor: not-allowed; opacity: .5; }

/* ---------- Hang QR (part-ewm) ----------
   Goc: khung 311x195 dung anh bot-ewm-bg1..4.png (nhan chu nam san trong anh nen
   the <p class="name"> bi an bang font-size:0), o QR 144x144 dat tai top:29 left:30. */
.part-ewm { margin-top: 30px; }
.ewm-list { display: flex; justify-content: space-between; gap: 10px; }
.ewm-list li { flex: 1; min-width: 0; max-width: 311px; }
.ewm-bg {
  position: relative; width: 100%; aspect-ratio: 311 / 195;
  background: no-repeat center / 100% 100%;
}
.ewm-list li:nth-child(1) .ewm-bg { background-image: url("../assets/images/v0301/bot-ewm-bg1.png"); }
.ewm-list li:nth-child(2) .ewm-bg { background-image: url("../assets/images/v0301/bot-ewm-bg2.png"); }
.ewm-list li:nth-child(3) .ewm-bg { background-image: url("../assets/images/v0301/bot-ewm-bg3.png"); }
.ewm-list li:nth-child(4) .ewm-bg { background-image: url("../assets/images/v0301/bot-ewm-bg4.png"); }
.ewm-list li:nth-child(5) .ewm-bg { background-image: url("../assets/images/v0301/bot-ewm-bg5.png"); }
/* Nhan chu da co san trong anh khung -> an the text (giu lai cho screen reader). */
.ewm-bg .name {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ewm-bg .ewm-box {
  position: absolute; left: 9.65%; top: 14.9%;
  width: 46.3%; aspect-ratio: 1 / 1;
  background: #fff; overflow: hidden;
}

/* ---------- Thu vien anh & video (part-view) ----------
   Goc: slide 988x547 nen view-bg.png, anh dat trong khung (top:1 left:9, 970x544),
   the nhan doc view-tag.png 52x160 o goc trai, 2 mui ten 66x76, nut "xem them" 180x52.
   Slide khong active bi phu den 65%. */
.view-ct { margin-top: 20px; }
.view-swiper { position: relative; overflow: hidden; padding: 8px 0; }
/* Do tu ban goc: slide active 1032px, 2 ben 688px -> ty le 0.667;
   khoang cach tam 2 slide ~38% be rong slide nen chung long vao nhau. */
.view-track {
  display: flex; align-items: center;
  --slide-w: 72%;
  --step: calc(var(--slide-w) * .62);
  --index: 0;
  transform: translateX(calc(50% - var(--slide-w) / 2 - var(--index) * var(--step)));
  transition: transform .45s ease;
}
.view-slide {
  flex: 0 0 var(--slide-w); max-width: var(--slide-w);
  margin-right: calc(var(--step) - var(--slide-w));
  position: relative; z-index: 1;
  transform: scale(.667); transform-origin: center center;
  transition: transform .45s ease;
}
.view-slide.active { transform: scale(1); z-index: 2; }

.view-item-box {
  position: relative; width: 100%; aspect-ratio: 988 / 547;
  background: url("../assets/images/v0301/view-bg.png") no-repeat center / 100% 100%;
}
.view-img-box {
  position: absolute; top: .2%; left: .9%; width: 98.2%; height: 99.5%; overflow: hidden;
}
.view-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.view-slide.active .view-img-box:hover img { transform: scale(1.2); }
/* Slide phu: lam toi di, chi slide active la sang. */
.view-img-box::after {
  content: ""; position: absolute; inset: 0; background: #000; opacity: .65; transition: opacity .45s;
}
.view-slide.active .view-img-box::after { opacity: 0; }

.view-tag {
  position: absolute; top: -8px; left: 18px; width: 52px; height: 160px; z-index: 2;
  background: url("../assets/images/v0301/view-tag.png") no-repeat center / 100% 100%;
}
.view-tag-con {
  position: absolute; inset: 0 0 10px 0; margin: auto; width: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.view-tag span {
  writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
  font-size: 14px; color: #835e29; text-shadow: 0 0 2px #f8fcf6;
  max-height: 96px; overflow: hidden;
}
.btn-play-view {
  width: 25px; height: 28px; flex-shrink: 0;
  background: url("../assets/images/v0301/btn-play-view.png") no-repeat center / contain;
}

.btn-prev-view,
.btn-next-view {
  position: absolute; top: 50%; margin-top: -38px; z-index: 3;
  width: 66px; height: 76px; border: none; cursor: pointer;
  background: none no-repeat center / cover; transition: .3s;
}
.btn-prev-view { left: 6%; background-image: url("../assets/images/v0301/btn-prev-view.png"); }
.btn-next-view { right: 6%; background-image: url("../assets/images/v0301/btn-next-view.png"); }
.btn-prev-view:hover,
.btn-next-view:hover { transform: scale(1.06); filter: brightness(1.08); }

.btn-more-view {
  display: block; width: 180px; height: 52px; margin: 24px auto 0;
  background: url("../assets/images/v0301/btn-more-view.png") no-repeat center / cover;
  transition: .3s;
}
.btn-more-view:hover { filter: brightness(1.05); }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: #a89f8f; padding: 34px 0; font-size: 12.5px; }
.footer-logos { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.footer-logos img { height: 26px; filter: grayscale(1) brightness(2); opacity: .8; }
.footer-links a { margin-right: 4px; }
.footer-links a:hover { color: #fff; }
.site-footer p { margin: 6px 0; }
.footer-warn { color: #85796a; }

/* ---------- Utility SVG placeholder ---------- */
.svg-ph { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #eee, #eee 6px, #f6f6f6 6px, #f6f6f6 12px); }

/* ============================================================
   RESPONSIVE
   Ban goc jxgl.xoyo.com co HAI trang rieng biet: ban PC (/index/) va ban
   mobile /h5/ (redirect.js doi chieu theo User-Agent). Ban mobile la mot
   thiet ke rieng theo rem voi khung thiet ke 750px:
       screenFix.js -> html.fontSize = clientWidth / 750 * 100
   nghia la 1rem = clientWidth / 7.5. Ta tai lap dung ty le do bang bien --r,
   nen moi so "0.32rem" trong CSS goc = calc(.32 * var(--r)) o day.
   Bo anh rieng cua ban mobile nam trong assets/images-h5/ (trung ten voi
   anh ban PC nhung KHAC kich thuoc, vi vay de thu muc rieng).

   Moc: >1200 desktop | 821-1200 desktop thu gon | <=820 bo cuc mobile h5.
   ============================================================ */

/* Thanh dau trang, ngan keo va hang tab tu lieu chi danh cho mobile
   (JS van tao .data-nav-wrap o moi kich thuoc, o desktop thi an di). */
.m-topbar, .m-drawer, .hero-m-cta, .data-nav-wrap, .btn-job { display: none; }

/* Desktop man hep: bang noi ben phai de de len noi dung khi vien con hep. */
@media (min-width: 1025px) and (max-width: 1340px) {
  .side-float { right: 6px; transform: scale(.85); transform-origin: right center; }
  /* .side-float thu con 136px + right 6px -> badge va panel chi so duoc rong them. */
  .hero-badges { right: max(0px, calc(158px - (100vw - 100%) / 2)); }
  .faction-info-right { right: max(20px, calc(158px - (100vw - 100%) / 2)); }
}

/* ============================================================
   <=1024px: BO CUC MOBILE (clone ban h5 goc)
   Ban goc coi ca tablet la thiet bi di dong (redirect.js bat ca iPad) nen
   day chuyen sang bo cuc h5 tu 1024px tro xuong.
   ============================================================ */
@media (max-width: 1024px) {
  /* 1rem cua ban goc = 1/7.5 be rong man hinh. Chan tren 109px de tren tablet
     khung thiet ke dung lai o ~818px roi can giua, khong phong to vo han. */
  :root { --r: min(calc(100vw / 7.5), 109px); }

  body {
    padding-top: calc(1.14 * var(--r));   /* chua thanh dau trang fixed */
    font-size: calc(.24 * var(--r));
    /* Ban h5 dung anh nen RIENG (750x5800, doc) chu khong phai anh 1920x4600
       cua ban PC - bo cuc nhan vat/slogan trong anh khac han. */
    background-image: url("../assets/images-h5/20260211_bg.jpg");
    background-size: calc(7.5 * var(--r)) auto;
    background-position: center top;
  }
  /* Moi khoi noi dung deu gioi han trong khung thiet ke 7.5rem va can giua. */
  .container { max-width: calc(7.5 * var(--r)); padding: 0 calc(.32 * var(--r)); }

  /* Thanh tien ich + subnav cua ban PC duoc thay bang thanh mobile + ngan keo. */
  .topbar, .subnav { display: none; }

  /* ---------- Thanh dau trang (.top-bar ban goc) ---------- */
  .m-topbar {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: #7b7f74;
  }
  .m-topbar-in {
    display: flex; align-items: center;
    max-width: calc(7.5 * var(--r)); margin: 0 auto;
    height: calc(1.14 * var(--r)); padding: 0 calc(.3 * var(--r));
  }
  .m-tb-logo {
    flex-shrink: 0; width: calc(.9 * var(--r)); height: calc(.9 * var(--r));
    margin-right: calc(.18 * var(--r)); border-radius: calc(.16 * var(--r));
    overflow: hidden; background: #2b2620;
  }
  .m-tb-logo img { width: 100%; height: 100%; object-fit: cover; }
  .m-tb-info { flex: 1; min-width: 0; }
  /* Ten tieng Viet dai hon ten goc tieng Trung nen giam co chu de khong bi cat. */
  .m-tb-info .tit {
    font-size: calc(.25 * var(--r)); line-height: calc(.32 * var(--r));
    color: #fff; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .m-tb-info .txt {
    font-size: calc(.18 * var(--r)); color: #fff; opacity: .85;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Nut tai va nut menu lay tu sprite m-sp.png cua ban goc (rong 12.40rem). */
  .m-tb-down, .m-tb-menu {
    flex-shrink: 0; border: 0; padding: 0;
    background: url("../assets/images-h5/m-sp.png") no-repeat;
    background-size: calc(12.4 * var(--r)) auto;
  }
  .m-tb-down {
    width: calc(1.84 * var(--r)); height: calc(.57 * var(--r));
    background-position: calc(-2.2 * var(--r)) 0;
  }
  .m-tb-menu {
    width: calc(.64 * var(--r)); height: calc(.64 * var(--r));
    margin-left: calc(.2 * var(--r));
    background-position: calc(-4.61 * var(--r)) 0;
    filter: brightness(1.3);
  }
  .m-drawer.open ~ .m-topbar .m-tb-menu,
  .m-tb-menu[aria-expanded="true"] { background-position: calc(-5.4 * var(--r)) 0; }

  /* ---------- Ngan keo menu (.top-bar-select ban goc) ---------- */
  .m-drawer {
    display: block; position: fixed; inset: 0; z-index: 95;
    pointer-events: none;
  }
  .m-drawer-mask {
    position: absolute; inset: 0; background: #000; opacity: 0;
    transition: opacity .3s ease;
  }
  .m-drawer-panel {
    position: absolute; top: 0; left: 0; right: 0;
    padding: calc(1.14 * var(--r)) max(calc(.32 * var(--r)), calc((100% - 7.5 * var(--r)) / 2 + .32 * var(--r))) calc(.3 * var(--r));
    background: #fdfcf1; border-bottom: 1px solid #b29d7c;
    transform: translateY(-100%); transition: transform .3s ease;
    max-height: 100vh; overflow-y: auto;
  }
  .m-drawer.open { pointer-events: auto; }
  .m-drawer.open .m-drawer-mask { opacity: .6; }
  .m-drawer.open .m-drawer-panel { transform: translateY(0); }
  .m-drawer-tit {
    margin-top: calc(.32 * var(--r)); font-size: calc(.26 * var(--r));
    font-weight: 700; color: #926c26; letter-spacing: 1px;
  }
  /* Toi da 3 cot, chia deu va trai het be ngang ngan keo. */
  .m-drawer-list {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: calc(.15 * var(--r)) calc(.12 * var(--r));
    margin-top: calc(.15 * var(--r));
  }
  .m-drawer-link {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: auto; height: calc(.62 * var(--r)); margin: 0;
    padding: 0 calc(.06 * var(--r)); box-sizing: border-box;
    background: url("../assets/images-h5/v0301/top-link-border.png") no-repeat center / 100% 100%;
    font-size: calc(.18 * var(--r)); line-height: 1.15; color: #b08330;
  }
  .m-drawer-home {
    display: flex; align-items: center; justify-content: center;
    width: calc(2.49 * var(--r)); height: calc(.71 * var(--r));
    margin: calc(.5 * var(--r)) auto 0;
    background: url("../assets/images-h5/v0301/back-home.png") no-repeat center / 100% 100%;
    font-size: calc(.28 * var(--r)); font-weight: 700; color: #926c26;
  }
  .m-drawer-close {
    display: block; margin: calc(.24 * var(--r)) auto 0; padding: 0;
    border: 0; background: none; font-size: calc(.22 * var(--r)); color: #b29d7c;
  }

  /* ---------- Hero (.header ban goc: cao 10.77rem) ----------
     Anh nen chinh la 20260211_bg.jpg dat o body (giong .wrap ban h5). */
  .hero { min-height: 0; height: calc(10.77 * var(--r)); overflow: hidden; }
  .hero-stage {
    max-width: calc(7.5 * var(--r)); width: 100%; margin: 0 auto;
    min-height: 0; height: 100%; padding: 0;
  }
  /* Dai che rieng cho vung thu phap tieng Trung: do tren anh nen 750x5800 thi
     khoi chu Trung nam o y 365-660px = 3.65rem-6.6rem. Che tu 3.35rem den 7.1rem
     roi dat slogan tieng Viet de len cho khong bi chong chu. */
  .hero-stage::before {
    content: ""; position: absolute; left: 0; right: 0; z-index: 0;
    top: calc(3.35 * var(--r)); height: calc(3.75 * var(--r));
    background: linear-gradient(180deg,
      rgba(20, 16, 10, 0), rgba(20, 16, 10, .95) 9%, rgba(20, 16, 10, .95) 88%, rgba(20, 16, 10, 0));
    pointer-events: none;
  }

  .hero-logo-abs {
    left: calc(.18 * var(--r)); top: calc(1.58 * var(--r));
    width: calc(1.82 * var(--r)); max-width: none;
  }
  .hero-tagline {
    left: calc(.4 * var(--r)); right: calc(.4 * var(--r)); top: calc(4.2 * var(--r));
    text-align: center; font-size: calc(.56 * var(--r)); line-height: 1.25;
  }
  .hero-sub {
    left: 50%; transform: translateX(-50%); top: calc(6.1 * var(--r));
    font-size: calc(.24 * var(--r)); padding: calc(.08 * var(--r)) calc(.24 * var(--r));
    white-space: nowrap;
  }
  .hero-play-btn {
    left: auto; right: calc(.5 * var(--r)); margin-left: 0; top: calc(3.9 * var(--r));
    width: calc(.9 * var(--r)); height: calc(.9 * var(--r));
  }
  .hero-dl-panel, .hero-badges { display: none; }

  /* Cap nut CTA mobile: btn-down 2.51x0.82rem, btn-up 1.51x0.82rem, bottom 0.65rem. */
  .hero-m-cta {
    display: flex; justify-content: center; align-items: center;
    gap: calc(.16 * var(--r));
    position: absolute; left: 0; right: 0; bottom: calc(.65 * var(--r)); z-index: 4;
  }
  .hero-m-down, .hero-m-topup { background: no-repeat center / 100% 100%; }
  .hero-m-down {
    width: calc(2.51 * var(--r)); height: calc(.82 * var(--r));
    background-image: url("../assets/images-h5/v0301/btn-down.png");
  }
  .hero-m-topup {
    width: calc(1.51 * var(--r)); height: calc(.82 * var(--r));
    background-image: url("../assets/images-h5/v0301/btn-up.png");
  }

  /* ---------- Khung section ---------- */
  .section { padding: calc(.3 * var(--r)) 0; }
  .hide-m { display: none; }   /* phan tieu de chi hien o desktop */
  .section-title {
    font-size: calc(.38 * var(--r)); margin-bottom: calc(.28 * var(--r));
    gap: calc(.16 * var(--r));
  }
  .section-title::before, .section-title::after { width: calc(.6 * var(--r)); }

  /* ---------- Banner + tin tuc: xep doc ---------- */
  .banner-news { display: block; }
  /* .section-lunbo ban goc: anh rong 6.87rem, vien 0.03rem #fdeec7. */
  .banner-slider {
    width: calc(6.87 * var(--r)); margin: 0 auto; border-radius: 0;
    border: calc(.03 * var(--r)) solid #fdeec7; box-shadow: none;
  }
  .banner-dots { bottom: calc(.14 * var(--r)); gap: calc(.2 * var(--r)); }
  .banner-dots button {
    width: calc(.14 * var(--r)); height: calc(.14 * var(--r)); background: #cbcbcb;
  }
  .banner-dots button.active {
    width: calc(.56 * var(--r)); border-radius: calc(.2 * var(--r)); background: #e1ca8a;
  }

  /* Bang tin: tab chuyen tu cot doc sang hang ngang (.news-nav ban h5). */
  /* Ban goc: .section-news { background: #fcf8ed; width: 6.88rem } - nen kem nga
     phu ca hang tab lan danh sach tin (container o day rong 6.86rem, tuong duong). */
  .news-panel {
    display: block; border: 0; border-radius: 0;
    background: #fcf8ed;
    margin-top: calc(.42 * var(--r));
    padding-bottom: calc(.28 * var(--r));
  }
  .news-nav {
    width: calc(6.42 * var(--r)); height: calc(.56 * var(--r));
    flex-direction: row; align-items: stretch; padding: 0; margin: 0 auto;
  }
  .news-nav .nav-item {
    flex: 1; width: auto; min-height: 0; height: calc(.4 * var(--r));
    margin-top: calc(.16 * var(--r)); padding: 0;
    font-size: calc(.28 * var(--r)); font-weight: 400; color: #6a6a6a;
    background: none; border: 0;
  }
  .news-nav .nav-item.cur { color: #ae8537; background: none; font-weight: 400; }
  /* Duong ke doc: ban goc ke o mep trai MOI tab va them mot duong o mep phai
     ngoai cung, nen 2 tab dau/cuoi cung co duong chi o phia ngoai.
     Chieu dai keo cho trung voi than nen vang cua tab dang chon: nen cao
     0.74rem dat o bottom -0.28rem => mep tren -0.06rem, than vang (61/74)
     ket thuc o 0.55rem => duong chi cao 0.61rem tinh tu -0.06rem. */
  .news-nav .nav-item::before {
    content: ""; position: absolute; left: 0; z-index: 2;
    top: calc(-.06 * var(--r)); height: calc(.61 * var(--r));
    width: 1px; background: #e6e1ce;
  }
  .news-nav::after {
    display: block; content: "";
    left: auto; right: 0; bottom: auto; z-index: 2;
    top: calc(.1 * var(--r)); height: calc(.61 * var(--r));
    width: 1px; background: #e6e1ce; opacity: 1;
  }
  /* Duong ke ngang net dut noi chan ca 5 duong chi doc, dai dung bang hang tab
     (0.1rem + 0.61rem = 0.71rem, tuc ngang day than nen vang cua tab dang chon). */
  .news-nav::before {
    content: ""; position: absolute; z-index: 2;
    left: 0; right: 0; top: calc(.71 * var(--r));
    border-top: 1px dashed #e6e1ce;
  }
  /* Nen tab dang chon (news-cur.png): keo trai het be rong o tab, cham dung
     2 duong ke 2 ben. Khong dung z-index am (se chui xuong duoi nen .news-panel)
     ma boc chu trong <span> roi nang span len tren nen. */
  /* Nen tab dang chon giu dung ty le goc (0.74rem, bottom -0.28rem); duong chi
     doc o tren da duoc keo dai cho trung voi than nen vang. */
  .news-nav .nav-item.cur::after {
    content: ""; position: absolute; z-index: 0;
    left: 1px; right: 1px; top: auto; bottom: calc(-.28 * var(--r));
    margin-left: 0; width: auto; height: calc(.74 * var(--r));
    background: url("../assets/images-h5/v0301/news-cur.png") no-repeat center / 100% 100%;
  }
  .news-nav .nav-item span { position: relative; z-index: 1; }

  /* .swiper-news ban goc thut vao 0.2rem so voi mep khung nen. */
  .news-body { padding: calc(.34 * var(--r)) calc(.2 * var(--r)) 0; width: auto; }
  .news-tit { min-height: 0; padding-bottom: calc(.16 * var(--r)); gap: calc(.12 * var(--r)); }
  .news-tit a { font-size: calc(.28 * var(--r)); color: #b29d7c; }
  .tit-hot { width: calc(.5 * var(--r)); height: calc(.24 * var(--r)); }
  .news-list li { padding: calc(.11 * var(--r)) 0; gap: calc(.14 * var(--r)); }
  /* .news-body khong co padding duoi nen nut phai tu chua le duoi cho no. */
  .news-more {
    height: calc(.56 * var(--r)); padding: 0 calc(.24 * var(--r));
    margin: calc(.16 * var(--r)) 0 calc(.24 * var(--r));
    gap: calc(.1 * var(--r)); font-size: calc(.22 * var(--r));
  }
  /* O the loai: ban goc rong co dinh 0.5rem cho 2 chu Han; nhan tieng Viet dai hon
     nen de rong tu dong, chi giu chieu cao va nen giong ban goc. */
  .news-cat {
    width: auto; min-width: calc(.5 * var(--r)); padding: 0 calc(.08 * var(--r));
    height: calc(.3 * var(--r)); line-height: calc(.3 * var(--r));
    font-size: calc(.18 * var(--r)); color: #f9fdf9; background: #e1ca8a;
  }
  .news-list a { font-size: calc(.24 * var(--r)); color: #b29d7c; }

  /* ---------- Tu lieu & chi dan ----------
     Ban h5 tach thanh 2 khoi doc: "攻略中心" (chi dan) roi "游戏资料" (tu lieu),
     va bien 3 nhom tu lieu thanh tab. */
  /* align-items: start cua ban desktop lam 2 khoi con co lai bang be rong noi dung
     khi doi sang flex doc -> ep stretch de "Tu lieu tro choi" trai het container. */
  .part-information {
    display: flex; flex-direction: column; align-items: stretch;
    gap: calc(.4 * var(--r));
  }
  .tip-part { order: 1; }
  .data-part { order: 2; }
  .info-head { margin-bottom: calc(.2 * var(--r)); }
  .info-head .tit-info {
    font-size: calc(.36 * var(--r)); text-align: center;
    font-family: var(--font-head);
  }
  .part-information .btn-more { bottom: auto; top: calc(.08 * var(--r)); font-size: calc(.22 * var(--r)); }

  /* Chi dan: luoi 2 cot, the 3.33x1.56rem dung bg-tip-item.png. */
  .tip-nav {
    display: grid; grid-template-columns: repeat(2, calc(3.33 * var(--r)));
    justify-content: space-between; gap: calc(.24 * var(--r)) 0;
  }
  .tip-item {
    aspect-ratio: auto; height: calc(1.56 * var(--r));
    padding: 0 calc(1.1 * var(--r)) 0 calc(.24 * var(--r));
  }
  .tip-item h3 { font-size: calc(.24 * var(--r)); }
  .tip-item h3::after {
    width: calc(.16 * var(--r)); height: calc(.16 * var(--r)); margin-left: calc(.1 * var(--r));
  }
  /* Mo ta tieng Viet dai hon ban goc tieng Trung -> chu nho hon va gioi han 3 dong. */
  .tip-item p {
    width: auto; margin-top: calc(.06 * var(--r));
    font-size: calc(.17 * var(--r)); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .tip-item img {
    top: calc(.24 * var(--r)); right: calc(.1 * var(--r)); transform: none;
    width: calc(.95 * var(--r)); max-width: none; height: calc(.95 * var(--r));
  }

  /* Tu lieu: 3 tieu de phu doi thanh 1 hang tab (bg-data-nav.png). */
  .tit-info-s { display: none; }
  .data-nav-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: calc(.6 * var(--r));
    margin: 0 auto calc(.24 * var(--r));
    background: url("../assets/images-h5/v0301/bg-data-nav.png") no-repeat center / 100% 100%;
  }
  /* Ban goc: .data-nav rong 5.42rem + space-between, nhan Han 1.04rem => tam nut
     dau o 1.235rem, pill (2.16rem) cham den 0.155rem tinh tu mep khung nen.
     Ta chia deu o nut nen phai noi .data-nav rong ra 6.58rem thi tam o dau/cuoi
     moi ve dung cho do, pill vua khit 2 dau khung. */
  .data-nav {
    display: flex; align-items: center;
    width: calc(6.58 * var(--r)); height: calc(.44 * var(--r));
  }
  /* Pill bg-data-nav-on.png rong CO DINH 2.16rem va can giua tung nut. Ban goc
     dung 3 nhan Han 4 chu bang nhau nen space-between van vua khung; nhan tieng
     Viet dai ngan khac nhau se day nut dau/cuoi ra sat mep -> pill tran khoi
     khung nen. Chia deu o nut (flex: 1) de tam moi nut luon cach mep du cho. */
  .data-nav button {
    flex: 1; min-width: 0; text-align: center;
    position: relative; border: 0; background: none; padding: 0; white-space: nowrap;
    font-size: calc(.24 * var(--r)); line-height: calc(.44 * var(--r)); color: #548877;
  }
  .data-nav button span { position: relative; z-index: 2; }
  .data-nav button.cur { color: #76521f; text-shadow: -1px 0 1px #f8fcf6; }
  .data-nav button.cur::after {
    content: ""; position: absolute; top: 0; left: 50%; z-index: 1;
    margin-left: calc(-1.08 * var(--r));
    width: calc(2.16 * var(--r)); height: calc(.44 * var(--r));
    background: url("../assets/images-h5/v0301/bg-data-nav-on.png") no-repeat center / 100% 100%;
  }
  .data-list { grid-template-columns: repeat(2, 1fr); gap: calc(.16 * var(--r)) calc(.14 * var(--r)); margin-top: 0; }
  .data-list.is-hidden { display: none; }
  .data-list a { height: calc(.5 * var(--r)); font-size: calc(.22 * var(--r)); gap: calc(.06 * var(--r)); }
  .data-list a img { width: calc(.26 * var(--r)); height: calc(.26 * var(--r)); }

  /* ---------- Mon phai (.job-part ban goc, cao 11.1rem) ----------
     Nhan vat trai het be ngang; cung duong vong cung cham cham (job-bg.png) voi
     5 o tron: o thu 3 la mon phai dang chon (job-item-cur.png). */
  /* .job-part ban goc cao 11.1rem (anh nhan vat doc 750x1023 = 10.23rem) va rong
     tron 7.5rem. Moi toa do con ben trong (radar 0.32rem, meta right 0.3rem...)
     deu tinh theo 7.5rem, nen phai pha padding cua .container - neu khong ca khoi
     bi bop con 6.86rem lam radar de len cot chi so. */
  /* Anh nhan vat co ~0.72rem trong suot o dinh, cong margin cua tieu de nua thi
     hut gan 1rem truoc khi thay noi dung. Ban goc dat .tit-job absolute top:0 de
     tieu de DE LEN khoi mon phai; o day keo khoi len bang margin am cho tuong duong. */
  .faction-wrap {
    display: block; position: relative;
    margin-left: calc(-.32 * var(--r)); margin-right: calc(-.32 * var(--r));
    margin-top: calc(-.9 * var(--r));
    height: calc(11.6 * var(--r)); overflow: hidden;
  }
  #mon-phai .section-title { position: relative; z-index: 2; }
  .faction-stage {
    position: absolute; inset: 0; width: auto; height: auto; margin: 0; transform: none;
    aspect-ratio: auto;
  }
  .faction-stage::before {
    content: ""; position: absolute; z-index: 0;
    top: calc(1.28 * var(--r)); left: calc(.49 * var(--r));
    width: calc(7.01 * var(--r)); height: calc(7.14 * var(--r));
    background: url("../assets/images-h5/v0301/job-bg.png") no-repeat center / 100% 100%;
  }
  .faction-role {
    position: absolute; top: 0; right: 0; left: auto; z-index: 1;
    width: 100%; height: auto; object-fit: contain;
  }
  .faction-stage-inner { position: absolute; inset: 0; max-width: none; padding: 0; }

  /* Ten + mo ta: .job-info goc = left 1.22rem, top 2.5rem, rong 3.44rem;
     day xuong/sang phai mot chut vi mo ta tieng Viet dai hon ban goc. */
  .faction-info-left {
    left: calc(1.4 * var(--r)); top: calc(3.3 * var(--r));
    width: calc(3.44 * var(--r)); max-width: none;
  }
  .faction-name-tag { gap: calc(.12 * var(--r)); margin: 0 0 calc(.12 * var(--r)); }
  .faction-name-tag img.kezhi { width: calc(.9 * var(--r)); }
  .faction-name-tag .name-vn { font-size: calc(.42 * var(--r)); }
  .faction-desc {
    width: 100%; padding: calc(.08 * var(--r)) calc(.16 * var(--r));
    font-size: calc(.18 * var(--r)); line-height: calc(.28 * var(--r));
  }

  /* Khoi chi so/ky nang: .job-type goc = top 8.5rem, cao 2.5rem, rong ca man hinh. */
  /* Cao hon ban goc (2.5rem) vi hang tab da tach xuong hang rieng ben duoi. */
  .faction-info-right {
    left: 0; right: auto; top: calc(8.5 * var(--r));
    width: 100%; max-width: none; height: calc(3.1 * var(--r)); margin: 0;
  }
  .faction-stats { display: contents; }
  .faction-stats .radar {
    position: absolute; top: -24px; left: calc(0 * var(--r));
    width: calc(3 * var(--r)); height: calc(3 * var(--r));
  }
  /* Hai khoi nay thang cot theo mep trai (ngay sau radar rong 3rem). */
  .faction-meta, .faction-skill-box {
    left: calc(3 * var(--r)); right: calc(.3 * var(--r)); width: auto;
  }
  .faction-meta {
    position: absolute; top: 0;
    display: flex; justify-content: space-between; gap: calc(.2 * var(--r));
    text-align: left;
  }
  .faction-meta p { margin: 0; font-size: calc(.18 * var(--r)); color: #6c6d6c; }
  .faction-skill-box {
    position: absolute; top: calc(.44 * var(--r));
    display: flex; align-items: flex-start; text-align: left;
  }
  .faction-skill-box label {
    flex-shrink: 0; margin: calc(.14 * var(--r)) 0 0;
    font-size: calc(.18 * var(--r)); font-weight: 400; color: #6c6d6c;
  }
  .faction-skills { flex: 1; justify-content: space-around; gap: 0; flex-wrap: nowrap; }
  .faction-skills .skill { width: calc(.82 * var(--r)); }
  .faction-skills img { width: calc(.82 * var(--r)); height: calc(.82 * var(--r)); }
  .faction-skills span { font-size: calc(.16 * var(--r)); margin-top: calc(.04 * var(--r)); }
  /* Khi bat lai o "Chieu 150" (4 o thay vi 3): 4 x .82rem = 3.28rem khong lot vao
     cho trong ben phai nhan (chi con ~2.65rem) -> tran hang. Luc do cho nhan xuong
     dong rieng de hang icon an het be rong khoi, moi o van rong hon ban 3 o.
     JS gan data-count theo so o thuc te dang hien. */
  .faction-skill-box[data-count="4"] { flex-direction: column; }
  .faction-skill-box[data-count="4"] label { margin: 0 0 calc(.06 * var(--r)); }
  .faction-skill-box[data-count="4"] .faction-skills { flex: none; width: 100%; }
  .faction-skill-box[data-count="4"] .skill { flex: 1 1 0; min-width: 0; width: auto; }
  .faction-skill-box[data-count="4"] img {
    width: calc(.98 * var(--r)); height: calc(.98 * var(--r)); max-width: 100%;
  }
  /* Nhan bien the tieng Viet dai hon nhieu so voi ban goc (3.08rem nhet ben phai
     radar), nen cho hang tab xuong hang rieng, trai het be rong container va
     dung chung bo anh nen voi .data-nav cho dong bo. */
  .faction-tabs {
    position: absolute; top: calc(2.45 * var(--r));
    left: calc(.32 * var(--r)); right: calc(.32 * var(--r));
    width: auto; height: calc(.62 * var(--r)); margin: 0; padding: 0;
  }
  /* Giu inset 0 -10px cua ban desktop: khung noi rong 10px moi ben so voi hang
     tab, nho vay chu 2 tab ngoai cung khong loi ra khoi phan vat cua khung. */
  /* Tra ve dung background: khung h5 (685x60) gian ngang/doc gan bang nhau nen
     khong bi meo mu bo, khong can 9-slice nhu ban desktop. Phai go border-image
     cua ban desktop, neu khong no van de len. */
  .faction-tabs::before,
  .faction-tabs[data-count="2"]::before {
    border-image: none;
    background: url("../assets/images-h5/v0301/bg-data-nav.png") no-repeat center / 100% 100%;
  }
  /* Pill lat kin ca khung, chi chua 0.045rem (~3px) moi dau - dung nhu .data-nav.
     Anh pill 216x44 co mu bo 16px moi dau. Neu keo bang background-size:100% 100%
     thi khi chi co 2 tab, be ngang gian gan gap ruoi ty le doc lam mu bo bi bet,
     khong con khop do cong cua khung. Dung border-image 9-slice: mu bo giu dung
     ty le (16/44 x chieu cao), chi doan giua bi keo dai. */
  .faction-tabs::after {
    top: calc(.09 * var(--r)); height: calc(.44 * var(--r));
    width: calc(100% / var(--tab-count) - .09 * var(--r));
    left: calc(var(--active-index) * (100% / var(--tab-count)) + .045 * var(--r));
    background-image: none;
    border: 0 solid transparent;
    border-image:
      url("../assets/images-h5/v0301/bg-data-nav-on.png")
      0 16 fill / 0 calc(.16 * var(--r)) / 0 stretch;
  }
  .faction-tabs button {
    font-size: calc(.17 * var(--r)); line-height: 1.15;
    padding: 0 calc(.04 * var(--r)); margin: 0; color: #548877;
  }
  /* Chua them mot chut o 2 tab ngoai cung cho chac, du khung da noi rong 10px. */
  .faction-tabs button:first-child,
  .faction-tabs button:last-child {
    padding-left: calc(.18 * var(--r)); padding-right: calc(.18 * var(--r));
  }
  .faction-tabs button.active { color: #76521f; text-shadow: -1px 0 1px #f8fcf6; }

  /* Nav mon phai: 5 o tron dat doc theo duong vong cung.
     JS gan data-index = vi tri tuong doi so voi muc dang chon (o giua = 2). */
  /* Khung nav phu kin ca khoi de dat 5 o tron theo toa do tuyet doi; phai tat
     pointer-events o lop khung, neu khong no nuot het click cua tab ky nang
     ben duoi (khung khong co nen nhung van an su kien chuot). */
  .faction-nav {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    display: block; gap: 0; padding: 0; overflow: visible;
  }
  .faction-nav::before { display: none; }
  .faction-nav button {
    position: absolute; left: calc(-8 * var(--r)); top: 0;
    width: calc(.92 * var(--r)); height: calc(.92 * var(--r));
    display: flex; align-items: center; justify-content: center;
    padding: 0 calc(.05 * var(--r)); box-sizing: border-box;
    background: url("../assets/images-h5/v0301/job-item.png") no-repeat center / 100% 100%;
    opacity: 0; pointer-events: none; z-index: -1;
    transition: top .3s, left .3s, opacity .3s, width .35s, height .35s;
  }
  .faction-nav button::before, .faction-nav button::after { display: none; }
  /* Huy anh nen "dang chon" cua ban PC - tren mobile o giua (data-index 2) moi la muc chon. */
  .faction-nav button.active { background-image: url("../assets/images-h5/v0301/job-item.png"); }
  .faction-nav button span {
    position: static; inset: auto; padding: 0;
    writing-mode: horizontal-tb; text-orientation: mixed; white-space: normal;
    display: block; text-align: center;
    font-size: calc(.17 * var(--r)); line-height: 1.15; letter-spacing: 0; color: #548877;
  }
  .faction-nav button[data-index="0"],
  .faction-nav button[data-index="1"],
  .faction-nav button[data-index="2"],
  .faction-nav button[data-index="3"],
  .faction-nav button[data-index="4"] { opacity: 1; z-index: 2; pointer-events: auto; }
  .faction-nav button[data-index="0"] { top: calc(1.35 * var(--r)); left: calc(1.75 * var(--r)); }
  .faction-nav button[data-index="1"] { top: calc(2.45 * var(--r)); left: calc(.65 * var(--r)); }
  .faction-nav button[data-index="2"] {
    top: calc(3.93 * var(--r)); left: calc(.03 * var(--r));
    width: calc(1.05 * var(--r)); height: calc(1.15 * var(--r));
    background-image: url("../assets/images-h5/v0301/job-item-cur.png");
  }
  .faction-nav button[data-index="2"] span { color: #b18a39; font-weight: 700; }
  .faction-nav button[data-index="3"] { top: calc(5.73 * var(--r)); left: calc(.33 * var(--r)); }
  .faction-nav button[data-index="4"] { top: calc(7.05 * var(--r)); left: calc(1.27 * var(--r)); }
  /* Cac muc ke tiep an sau 2 dau mut de chuyen canh muot. */
  .faction-nav button[data-index="-1"] { top: calc(.95 * var(--r)); left: calc(2.75 * var(--r)); }
  .faction-nav button[data-index="5"] { top: calc(7.65 * var(--r)); left: calc(2.25 * var(--r)); }

  /* Nut chuyen mon phai dat o 2 dau vong cung (.btn-job ban goc). */
  .btn-job {
    display: block; position: absolute; z-index: 4;
    width: calc(.48 * var(--r)); height: calc(.44 * var(--r));
    background: no-repeat center / cover;
  }
  .btn-prev-job {
    top: calc(1.16 * var(--r)); left: calc(3.06 * var(--r));
    background-image: url("../assets/images-h5/v0301/job-btn-prev.png");
  }
  .btn-next-job {
    top: calc(7.9 * var(--r)); left: calc(2.5 * var(--r));
    background-image: url("../assets/images-h5/v0301/job-btn-next.png");
  }

  /* ---------- Bang xep hang (.rank-part ban goc) ---------- */
  .line-choose {
    height: auto; display: flex; flex-direction: column; align-items: center;
    gap: calc(.1 * var(--r)); margin-bottom: 0;
  }
  .line-choose .sel-box { width: calc(2.4 * var(--r)); height: calc(.5 * var(--r)); }
  .line-choose select { padding-left: calc(.22 * var(--r)); font-size: calc(.22 * var(--r)); }
  .time-tip { position: static; font-size: calc(.2 * var(--r)); }

  .rank-con {
    width: calc(6.96 * var(--r)); min-height: calc(4.18 * var(--r));
    margin: calc(.24 * var(--r)) auto 0; padding: 0 0 calc(.2 * var(--r));
    background: url("../assets/images-h5/v0301/bg-rank.png") no-repeat center calc(.26 * var(--r)) / 100% calc(100% - .26 * var(--r));
    border: 0; border-radius: 0;
  }
  .btn-prev-rank-type, .btn-next-rank-type {
    top: 0; width: calc(.5 * var(--r)); height: calc(.56 * var(--r)); background-size: 100% auto;
  }
  .btn-prev-rank-type { left: calc(.1 * var(--r)); background-image: url("../assets/images-h5/v0301/rank-btn-prev.png"); }
  .btn-next-rank-type { right: calc(.1 * var(--r)); background-image: url("../assets/images-h5/v0301/rank-btn-next.png"); }
  /* Chi hien 3 nut, nut dang chon luon nam o o giua. JS nhan ban danh sach de
     chay vong lien tuc.
     Khe deu nhau giua 5 thanh phan tren mot hang (prev + 3 nut + next):
       .rank-con 6.96rem - le 2 x 0.1rem - prev/next 2 x 0.5rem - 3 nut x 1.6rem
       = 0.96rem chia cho 4 khe = 0.24rem moi khe.
     => be rong khung = 3 x 1.6 + 2 x 0.24 = 5.28rem, tu can giua la vua khop. */
  .rank-type-list {
    display: block; overflow: hidden; padding: 0;
    width: calc(5.28 * var(--r)); height: calc(.5 * var(--r));
    margin: calc(.02 * var(--r)) auto calc(.14 * var(--r));
  }
  .rank-type-track {
    display: flex; gap: calc(.24 * var(--r));
    --rank-index: 0;
    /* Moi buoc = 1.6rem nut + 0.24rem khe. Keo sao cho nut thu --rank-index
       roi vao o giua (o thu 2, bat dau tu 1.84rem). */
    transform: translateX(calc((1 - var(--rank-index)) * 1.84 * var(--r)));
    transition: transform .3s ease;
  }
  .rank-type-item.is-clone { display: flex; }
  .rank-type-item {
    width: calc(1.6 * var(--r)); height: calc(.5 * var(--r)); padding: 0 calc(.08 * var(--r));
    font-size: calc(.22 * var(--r)); font-weight: 400; line-height: 1.1;
    background-image: url("../assets/images-h5/v0301/bg-rank-type.png");
    background-size: calc(3.28 * var(--r)) calc(.5 * var(--r));
    background-position: calc(-1.68 * var(--r)) 0;
  }
  .rank-type-item.active { background-position: 0 0; }

  .rank-table-wrap { width: calc(6.52 * var(--r)); margin: calc(.3 * var(--r)) auto 0; }
  /* table-layout: fixed de o "Hung hiem Long Mach" (dai hon ban goc tieng Trung)
     xuong dong thay vi day bang tran ra ngoai khung. */
  table.rank-table { width: 100%; table-layout: fixed; font-size: calc(.19 * var(--r)); }
  .rank-table thead th { height: calc(.5 * var(--r)); font-size: calc(.21 * var(--r)); }
  .rank-table thead th:first-child { width: calc(.8 * var(--r)); }
  .rank-table thead th:nth-child(2) { width: calc(1.6 * var(--r)); }
  .rank-table thead th:nth-child(3) { width: calc(1.1 * var(--r)); }
  .rank-table thead th:last-child { width: calc(.9 * var(--r)); }
  .rank-table td, .rank-table th { padding: 0 calc(.04 * var(--r)); line-height: 1.25; }
  .rank-table td { height: calc(.42 * var(--r)); font-size: calc(.2 * var(--r)); }
  .rank-table tbody tr:nth-child(2n + 1) { background: #f6f1e0; }
  .rank-table td span[class^="rank-top"] { width: calc(.4 * var(--r)); height: calc(.28 * var(--r)); }
  .el-pagination { margin-top: calc(.14 * var(--r)); }
  .el-pagination ul { gap: calc(.1 * var(--r)); }
  .el-pagination li {
    min-width: calc(.4 * var(--r)); height: calc(.4 * var(--r));
    line-height: calc(.38 * var(--r)); font-size: calc(.22 * var(--r)); padding: 0 calc(.08 * var(--r));
  }

  /* ---------- Hang QR (.web-part ban goc: 2 cot, o 2.74x1.74rem) ---------- */
  .part-ewm { margin-top: calc(.4 * var(--r)); }
  .ewm-list {
    display: grid; grid-template-columns: repeat(2, calc(2.74 * var(--r)));
    justify-content: center; gap: calc(.25 * var(--r)) calc(.26 * var(--r));
  }
  .ewm-list li { max-width: none; }
  .ewm-bg { aspect-ratio: 274 / 174; }
  .ewm-bg .ewm-box { left: 10.9%; top: 17.2%; width: 46%; }

  /* ---------- Thu vien anh (.view-part ban goc) ----------
     Tren mobile 2 slide ben KHONG thu nho, chi lam toi di; slide rong 5.56rem. */
  /* Ban goc .view-swiper rong tron 7.5rem (khong nam trong container co padding),
     slide rong 5.56rem = 74.13% va cac slide NAM SAT NHAU (spaceBetween = 0).
     Pha padding container de moi anh phu lo ra dung (100% - 74.13%)/2 = 12.94%.
     .view-ct ban goc: position relative, cao co dinh 4.52rem, margin-top 0.02rem. */
  .view-ct {
    position: relative; height: calc(4.52 * var(--r));
    margin: calc(.02 * var(--r)) calc(-.32 * var(--r)) 0;
  }
  /* Khung cat cao 3.16rem trong khi slide cao 3.18rem (o anh 3.08rem + margin
     0.05rem tren/duoi). Nho khoang 0.05rem do ma the nhan doc (dat o top -0.08rem)
     chi bi cat mot chut o dinh, dung nhu ban goc. */
  .view-swiper { padding: 0; height: calc(3.16 * var(--r)); }
  .view-item-box { margin: calc(.05 * var(--r)) auto; }
  /* Giu nguyen hieu ung coverflow cua ban PC: 2 anh phu thu nho scale(.667) va
     chong lan vao anh chinh (--step = 62% be rong slide), khong dung kieu
     "3 anh nam sat nhau" cua ban h5. */
  .view-item-box { aspect-ratio: 556 / 308; }
  .view-tag {
    width: calc(.52 * var(--r)); height: calc(1.42 * var(--r));
    top: calc(-.08 * var(--r)); left: calc(.04 * var(--r));
  }
  .view-tag-con { width: calc(.16 * var(--r)); bottom: calc(.08 * var(--r)); gap: calc(.08 * var(--r)); }
  .view-tag span { font-size: calc(.16 * var(--r)); max-height: calc(.9 * var(--r)); }
  .btn-play-view { width: calc(.25 * var(--r)); height: calc(.28 * var(--r)); }
  .btn-prev-view, .btn-next-view {
    width: calc(.5 * var(--r)); height: calc(.56 * var(--r)); margin-top: calc(-.28 * var(--r));
  }
  .btn-prev-view { left: calc(.34 * var(--r)); }
  .btn-next-view { right: calc(.34 * var(--r)); }
  .btn-more-view {
    width: calc(2.14 * var(--r)); height: calc(.62 * var(--r));
    margin: calc(.24 * var(--r)) auto 0;
  }

  /* ---------- Nut len dau trang (back-top.png 0.61x1.97rem, ban doc) ---------- */
  .side-float {
    right: 0; bottom: calc(1.3 * var(--r)); width: auto; height: auto;
    padding: 0; background: none;
  }
  .side-float .side-ewm, .side-float .btn-side { display: none; }
  .side-float { opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.has-scrolled .side-float { opacity: 1; pointer-events: auto; }
  .side-float .side-back-top {
    position: static; margin: 0;
    width: calc(.61 * var(--r)); height: calc(1.97 * var(--r));
    background: url("../assets/images-h5/back-top.png") no-repeat center / 100% auto;
  }

  /* ---------- Footer ---------- */
  .site-footer { padding: calc(.4 * var(--r)) 0; text-align: center; font-size: calc(.2 * var(--r)); }
  .footer-logos { justify-content: center; }
  .footer-links { line-height: 1.9; }
}

/* Man hinh rat hep: giu chu tren o tron mon phai va tab tin tuc doc duoc. */
@media (max-width: 360px) {
  .news-nav .nav-item { font-size: calc(.26 * var(--r)); }
  .faction-nav button span { font-size: calc(.16 * var(--r)); }
}