:root {
  --bg: #07111e;
  --bg-soft: #0a1727;
  --panel: #0d1d31;
  --panel-2: #102843;
  --panel-3: #142f4e;
  --text: #f2f7ff;
  --muted: #91a5be;
  --muted-2: #667d99;
  --line: #213a57;
  --blue: #2e72ff;
  --blue-bright: #69a5ff;
  --gold: #f4a41b;
  --gold-soft: #ffd477;
  --green: #18d88a;
  --red: #ff6f62;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --max: 1220px;
  --radius: 14px;
}

html[data-theme="light"] {
  --bg: #edf3f9;
  --bg-soft: #f5f8fc;
  --panel: #ffffff;
  --panel-2: #eef4fb;
  --panel-3: #dfeafa;
  --text: #0b1d31;
  --muted: #607690;
  --muted-2: #8294a9;
  --line: #cad9e9;
  --blue: #1557d6;
  --blue-bright: #1557d6;
  --gold: #b56b00;
  --gold-soft: #d98b13;
  --green: #087c54;
  --shadow: 0 22px 58px rgba(18, 45, 78, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 94px; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font: 15px/1.65 "Noto Sans TC", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image: linear-gradient(rgba(105, 165, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 165, 255, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
  z-index: -1;
}
body, button, input, select, textarea { font-family: inherit; }
button, input, select, textarea { font-size: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .button, .brand-copy, .eyebrow, .topline, .card-label, .hud-frame, .category-tab, .gift-card, .trade-card { font-family: "Chakra Petch", "Noto Sans TC", sans-serif; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.shell { width: min(var(--max), calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 18px; top: -80px; z-index: 100; padding: 10px 14px; color: #fff; background: var(--blue); }
.skip-link:focus { top: 10px; }

.topline { border-bottom: 1px solid var(--line); background: rgba(10, 23, 39, .93); color: var(--muted); font-size: 10px; letter-spacing: .08em; }
html[data-theme="light"] .topline { background: #dfeafa; }
.topline-inner { min-height: 33px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topline b { color: var(--gold-soft); font-weight: 700; }
.topline i { display: inline-block; width: 4px; height: 4px; margin: 0 9px; border-radius: 50%; background: var(--blue-bright); vertical-align: middle; }
.topline a { color: var(--gold-soft); font-weight: 700; }
.topline a span { margin-left: 5px; font-size: 14px; }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); }
.nav-row { min-height: 78px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { width: 41px; height: 41px; display: grid; place-items: center; border: 1px solid var(--blue); background: linear-gradient(145deg, var(--panel-2), var(--panel)); box-shadow: 0 0 0 4px rgba(46, 114, 255, .08); }
.brand-mark svg { width: 32px; height: 32px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand-copy { display: grid; line-height: 1; letter-spacing: .08em; }
.brand-copy strong { font-size: 15px; font-weight: 700; }
.brand-copy b { margin-top: 5px; color: var(--blue-bright); font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; }
.main-nav a { position: relative; padding: 10px 12px; color: var(--muted); font-family: "Chakra Petch", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.main-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--gold); transition: transform .18s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--text); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--panel); }
.icon-button:hover { border-color: var(--blue); color: var(--blue-bright); }
.menu-toggle { display: none; font-size: 19px; }

.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 17px; border: 1px solid transparent; border-radius: 4px; font-weight: 700; font-size: 12px; letter-spacing: .02em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-blue { color: #fff !important; background: var(--blue); box-shadow: 0 10px 25px rgba(46, 114, 255, .2); }
.button-blue:hover { background: #4785ff; box-shadow: 0 13px 30px rgba(46, 114, 255, .3); }
.button-outline { color: var(--text); background: transparent; border-color: var(--line); }
.button-outline:hover { border-color: var(--blue-bright); background: var(--panel-2); }
.button-small { min-height: 39px; padding: 8px 12px; font-size: 11px; }
.zalo-pill { display: inline-grid; place-items: center; padding: 2px 5px; color: #0876f7; background: #fff; border-radius: 6px 6px 6px 2px; font-family: "Segoe UI", sans-serif; font-size: 10px; font-weight: 800; line-height: 17px; letter-spacing: -.03em; }

.hero { position: relative; padding: 88px 0 78px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 78% 15%, rgba(46, 114, 255, .19), transparent 28%), radial-gradient(circle at 18% 42%, rgba(244, 164, 27, .07), transparent 24%); }
.hero::after { content: ""; position: absolute; right: -120px; bottom: -180px; width: 560px; height: 560px; border: 1px solid rgba(105, 165, 255, .1); border-radius: 50%; box-shadow: 0 0 0 32px rgba(105, 165, 255, .025), 0 0 0 64px rgba(105, 165, 255, .02); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr); align-items: center; gap: 76px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--gold-soft); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.eyebrow::before { content: ""; width: 25px; height: 1px; background: currentColor; }
.hero h1 { margin: 23px 0 22px; font-size: clamp(46px, 5.6vw, 78px); font-weight: 700; }
.hero h1 span, .gift-copy h2 span { color: var(--blue-bright); }
.hero-lead { max-width: 570px; color: var(--muted); font-size: 16px; line-height: 1.9; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.hero-tags span { padding: 6px 9px; border: 1px solid var(--line); background: rgba(13, 29, 49, .56); color: var(--muted); font-family: "Chakra Petch", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .08em; }
html[data-theme="light"] .hero-tags span { background: rgba(255, 255, 255, .62); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
.hero-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--muted-2); font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(24, 216, 138, .1); }

.hero-visual { position: relative; min-width: 0; }
.hud-frame { position: relative; padding: 21px; border: 1px solid var(--blue); background: linear-gradient(145deg, rgba(16, 40, 67, .94), rgba(7, 17, 30, .95)); box-shadow: var(--shadow), 0 0 0 7px rgba(46, 114, 255, .07); overflow: hidden; }
html[data-theme="light"] .hud-frame { background: linear-gradient(145deg, #f9fcff, #dce9fa); }
.hud-frame::before, .hud-frame::after { content: ""; position: absolute; width: 56px; height: 56px; border-color: var(--gold); border-style: solid; pointer-events: none; }
.hud-frame::before { left: -1px; top: -1px; border-width: 3px 0 0 3px; }
.hud-frame::after { right: -1px; bottom: -1px; border-width: 0 3px 3px 0; }
.hud-top, .hud-bottom { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.hud-top b, .hud-bottom span:last-child { color: var(--gold-soft); }
.hud-top b { font-weight: 700; }
.hud-main { display: flex; align-items: center; gap: 28px; padding: 38px 20px 34px; }
.radar { position: relative; width: 170px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(105, 165, 255, .35); border-radius: 50%; background: radial-gradient(circle, rgba(46, 114, 255, .21) 0, transparent 63%), linear-gradient(90deg, transparent 49.5%, rgba(105, 165, 255, .28) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(105, 165, 255, .28) 50%, transparent 50.5%); overflow: hidden; flex: none; }
.radar::before { content: ""; position: absolute; inset: 19%; border: 1px solid rgba(105, 165, 255, .28); border-radius: 50%; }
.radar-ring { position: absolute; border: 1px solid rgba(105, 165, 255, .21); border-radius: 50%; }
.ring-one { inset: 32%; }.ring-two { inset: 7%; }
.radar-line { position: absolute; width: 100%; height: 1px; background: var(--gold); transform: rotate(-42deg); transform-origin: center; opacity: .9; }
.radar-dot { position: absolute; left: 58%; top: 29%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(244, 164, 27, .12), 0 0 18px var(--gold); }
.radar strong { color: var(--text); font-size: 28px; letter-spacing: .1em; z-index: 1; }
.hud-info { min-width: 0; }
.hud-kicker { display: block; color: var(--gold-soft); font-size: 10px; letter-spacing: .24em; }
.hud-info strong { display: block; margin: 8px 0 10px; color: var(--text); font-size: clamp(31px, 4vw, 51px); line-height: .92; letter-spacing: .06em; }
.hud-info small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.hud-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.hud-grid > div { min-height: 82px; padding: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hud-grid span { display: block; color: var(--gold-soft); font-size: 9px; }
.hud-grid b { display: block; margin-top: 8px; color: var(--text); font-size: 14px; }
.hud-grid small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .07em; }
.hud-bottom { padding-top: 17px; font-size: 8px; }
.hud-bottom i { display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(24, 216, 138, .1); }
.floating-badge { position: absolute; right: -25px; bottom: 19px; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid var(--gold); color: var(--bg); background: var(--gold); box-shadow: 0 12px 30px rgba(244, 164, 27, .23); transform: rotate(-3deg); }
.floating-badge strong { font-family: "Chakra Petch", sans-serif; font-size: 26px; line-height: 1; }
.floating-badge span { font-family: "Chakra Petch", sans-serif; font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; }

.signal-strip { border-bottom: 1px solid var(--line); background: var(--panel); }
.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.signal-item { display: flex; align-items: flex-start; gap: 13px; padding: 22px 24px; }
.signal-item + .signal-item { border-left: 1px solid var(--line); }
.signal-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: none; color: var(--gold-soft); border: 1px solid var(--line); background: var(--panel-2); font-family: "Chakra Petch", sans-serif; font-weight: 700; }
.signal-item b { display: block; color: var(--text); font-family: "Chakra Petch", sans-serif; font-size: 12px; }
.signal-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.section { padding: 90px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 33px; }
.section-heading h2 { margin-top: 14px; font-size: clamp(34px, 4vw, 49px); font-weight: 700; }
.section-heading > p { max-width: 390px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.section-heading-tight { margin-bottom: 25px; }

.catalog-section { background: linear-gradient(180deg, transparent, rgba(13, 29, 49, .55)); }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.category-tab { min-height: 39px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); background: var(--panel); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.category-tab:hover { color: var(--text); border-color: var(--blue); }
.category-tab.active { border-color: var(--blue); color: #fff; background: var(--blue); }
.catalog-tools { display: flex; align-items: center; gap: 9px; }
.search-box { position: relative; }
.search-box > span:not(.sr-only) { position: absolute; left: 12px; top: 7px; color: var(--muted); font-size: 21px; }
.search-box input, .catalog-tools select { min-height: 39px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); font-size: 11px; }
.search-box input { width: 205px; padding: 8px 12px 8px 33px; }
.catalog-tools select { padding: 8px 10px; }
.search-box input::placeholder { color: var(--muted-2); }
.result-line { min-height: 25px; margin-top: 19px; color: var(--muted); font-family: "Chakra Petch", sans-serif; font-size: 10px; letter-spacing: .08em; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.product-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 18px 35px rgba(0, 0, 0, .2); }
.product-visual { position: relative; min-height: 188px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--panel-2); background-image: linear-gradient(135deg, rgba(105, 165, 255, .05) 25%, transparent 25%), linear-gradient(315deg, rgba(105, 165, 255, .05) 25%, transparent 25%); background-position: 0 0, 9px 9px; background-size: 18px 18px; }
.product-visual::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(105, 165, 255, .21); clip-path: polygon(0 0, 26% 0, 26% 1px, 74% 1px, 74% 0, 100% 0, 100% 26%, calc(100% - 1px) 26%, calc(100% - 1px) 74%, 100% 74%, 100% 100%, 74% 100%, 74% calc(100% - 1px), 26% calc(100% - 1px), 26% 100%, 0 100%, 0 74%, 1px 74%, 1px 26%, 0 26%); }
.product-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 25%, rgba(46, 114, 255, .22), transparent 34%); pointer-events: none; }
.art-reg { background-color: #0f273f; }.art-op { background-color: #111e31; }.art-xu { background-color: #352818; }.art-service { background-color: #102d35; }.art-gift { background-color: #291f3a; }
html[data-theme="light"] .art-reg { background-color: #dceeff; } html[data-theme="light"] .art-op { background-color: #e4eaf3; } html[data-theme="light"] .art-xu { background-color: #fff0d2; } html[data-theme="light"] .art-service { background-color: #d7f0ef; } html[data-theme="light"] .art-gift { background-color: #eee3fa; }
.art-symbol { position: relative; z-index: 1; color: var(--blue-bright); font-family: "Chakra Petch", sans-serif; font-size: 53px; font-weight: 700; letter-spacing: .03em; text-shadow: 0 0 27px rgba(105, 165, 255, .4); }
.art-xu .art-symbol { color: var(--gold-soft); text-shadow: 0 0 27px rgba(244, 164, 27, .42); }.art-gift .art-symbol { color: #d7a7ff; }.art-service .art-symbol { color: #6ee3da; }
.product-tag, .product-code { position: absolute; z-index: 2; top: 13px; padding: 4px 7px; font-family: "Chakra Petch", sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.product-tag { left: 13px; color: var(--text); border: 1px solid rgba(105, 165, 255, .27); background: rgba(7, 17, 30, .58); }
html[data-theme="light"] .product-tag { background: rgba(255,255,255,.72); }
.product-code { right: 13px; color: var(--gold-soft); }
.product-scan { position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 2; height: 1px; background: var(--blue); opacity: .65; box-shadow: 0 0 13px var(--blue); }
.product-body { display: flex; flex-direction: column; flex: 1; padding: 17px 17px 16px; }
.product-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted-2); font-family: "Chakra Petch", sans-serif; font-size: 9px; letter-spacing: .06em; }
.product-meta b { color: var(--green); font-weight: 600; }
.product-card h3 { margin: 9px 0 8px; font-size: 18px; font-weight: 700; }
.product-card p { min-height: 38px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.product-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.product-price { color: var(--text); font-family: "Chakra Petch", sans-serif; font-size: 17px; font-weight: 700; line-height: 1.05; }
.product-price small { display: block; margin-top: 5px; color: var(--muted-2); font-size: 8px; font-weight: 500; }
.card-actions { display: flex; gap: 6px; }
.text-button { min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: transparent; font-family: "Chakra Petch", sans-serif; font-size: 9px; font-weight: 700; }
.text-button:hover { color: var(--text); border-color: var(--blue); }.text-button.buy { color: #fff; border-color: var(--blue); background: var(--blue); }
.empty-state { display: grid; gap: 6px; place-items: center; padding: 55px 20px; border: 1px dashed var(--line); background: var(--panel); text-align: center; }
.empty-state strong { font-family: "Chakra Petch", sans-serif; font-size: 20px; }.empty-state span { color: var(--muted); font-size: 12px; }

.service-section { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(13, 29, 49, .63), transparent); }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.service-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.service-card:hover { border-color: var(--blue); }
.service-image { position: relative; aspect-ratio: 1.42; overflow: hidden; background: var(--panel-2); }
.service-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 32%, rgba(7, 17, 30, .8)); }
.service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.service-image.image-fallback { background: radial-gradient(circle at 65% 25%, rgba(46,114,255,.35), transparent 30%), linear-gradient(135deg, var(--panel-3), var(--panel)); }
.service-card:hover .service-image img { transform: scale(1.05); }
.service-code { position: absolute; z-index: 1; left: 13px; top: 12px; padding: 4px 7px; color: var(--gold-soft); border: 1px solid rgba(244, 164, 27, .55); background: rgba(7, 17, 30, .65); font-family: "Chakra Petch", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.service-body { display: flex; flex-direction: column; flex: 1; padding: 19px 18px 18px; }
.card-label { color: var(--gold-soft); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.service-body h3 { margin: 8px 0 9px; font-size: 20px; }.service-body p { min-height: 34px; color: var(--muted); font-size: 11px; line-height: 1.7; }.service-body p + p { margin-top: 5px; }.service-body b { color: var(--text); }.service-highlight { color: var(--gold-soft) !important; }.service-body .button { align-self: flex-start; margin-top: 16px; }
.service-note { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 11px; }.service-note span { color: var(--green); font-weight: 700; }

.gift-section { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 45%, rgba(46, 114, 255, .2), transparent 34%), var(--panel); }
.gift-section::after { content: "CODE"; position: absolute; right: -25px; bottom: -69px; color: rgba(105, 165, 255, .045); font-family: "Chakra Petch", sans-serif; font-size: 190px; font-weight: 700; letter-spacing: -.1em; pointer-events: none; }
.gift-layout { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 78px; }
.gift-copy h2 { margin: 16px 0 17px; font-size: clamp(38px, 4vw, 57px); }.gift-copy > p { max-width: 520px; color: var(--muted); font-size: 14px; line-height: 1.9; }.gift-copy > p b { color: var(--gold-soft); }.gift-copy .button { margin-top: 26px; }
.gift-meta { display: flex; gap: 12px; margin-top: 25px; }.gift-meta div { min-width: 92px; padding: 11px 12px; border: 1px solid var(--line); background: var(--bg-soft); }.gift-meta strong { display: block; color: var(--gold-soft); font-family: "Chakra Petch", sans-serif; font-size: 21px; line-height: 1; }.gift-meta span { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; }
.gift-card { position: relative; padding: 24px; border: 1px solid var(--blue); background: #091726; box-shadow: var(--shadow), 0 0 0 8px rgba(46, 114, 255, .08); }.gift-card::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(105, 165, 255, .28); pointer-events: none; }.gift-card-top { position: relative; z-index: 1; display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; letter-spacing: .13em; }.gift-card-top b { color: var(--gold-soft); }.gift-console { position: relative; z-index: 1; margin-top: 24px; padding: 19px; border: 1px solid #183653; background: #06111e; color: #9cc2e9; }.console-line { display: flex; align-items: center; gap: 5px; padding-bottom: 15px; border-bottom: 1px solid #183653; color: #6b88a7; font-size: 10px; }.console-line i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }.console-line i:nth-child(2) { background: var(--gold); }.console-line i:nth-child(3) { background: var(--green); }.console-line span { margin-left: 8px; font-family: "Chakra Petch", sans-serif; }.gift-console p { margin-top: 15px; color: #9cc2e9; font-family: "Chakra Petch", sans-serif; font-size: 12px; }.gift-console em { color: var(--gold); font-style: normal; }.console-progress { height: 5px; margin-top: 22px; background: #17324e; }.console-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); }.gift-console small { display: block; margin-top: 10px; color: var(--muted-2); font-size: 9px; letter-spacing: .09em; }.gift-seal { position: absolute; z-index: 2; right: 39px; bottom: 27px; width: 73px; height: 73px; display: grid; place-items: center; align-content: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-soft); background: rgba(7, 17, 30, .88); font-family: "Chakra Petch", sans-serif; font-size: 22px; font-weight: 700; line-height: .8; transform: rotate(9deg); }.gift-seal span { margin-top: 6px; font-size: 8px; letter-spacing: .2em; }

.trade-section { background: var(--bg-soft); }
.trade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }.trade-panel h2 { margin: 16px 0 16px; font-size: clamp(35px, 4vw, 52px); }.trade-panel > p { max-width: 500px; color: var(--muted); font-size: 14px; line-height: 1.85; }.trade-panel .button { margin-top: 27px; }.trade-list { display: grid; gap: 13px; margin-top: 25px; }.trade-list div { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }.trade-list b { width: 27px; height: 27px; display: grid; place-items: center; flex: none; color: var(--gold-soft); border: 1px solid var(--line); font-family: "Chakra Petch", sans-serif; font-size: 10px; }.trade-card { position: relative; min-height: 310px; padding: 25px; border: 1px solid var(--line); background: linear-gradient(145deg, var(--panel-2), var(--panel)); box-shadow: var(--shadow); overflow: hidden; }.trade-card::before { content: ""; position: absolute; width: 230px; height: 230px; right: -60px; bottom: -65px; border: 1px solid rgba(105, 165, 255, .23); border-radius: 50%; box-shadow: 0 0 0 24px rgba(105, 165, 255, .04), 0 0 0 48px rgba(105, 165, 255, .03); }.trade-card-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; letter-spacing: .14em; }.trade-card-head b { color: var(--green); }.trade-lines { display: grid; gap: 22px; margin-top: 48px; }.trade-lines div { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }.trade-lines span { color: var(--muted); font-size: 10px; }.trade-lines strong { color: var(--text); font-size: 12px; text-align: right; }.trade-stamp { position: absolute; right: 42px; bottom: 33px; padding: 10px; border: 1px solid var(--gold); color: var(--gold-soft); font-size: 10px; font-weight: 700; line-height: 1.05; letter-spacing: .12em; transform: rotate(-12deg); }

.faq-section { border-top: 1px solid var(--line); }.faq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 90px; }.faq-grid h2 { margin: 16px 0; font-size: clamp(32px, 3.4vw, 44px); }.faq-grid > div > p { color: var(--muted); font-size: 13px; line-height: 1.85; }.faq-list details { border-bottom: 1px solid var(--line); padding: 17px 0; }.faq-list details:first-child { padding-top: 0; }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; color: var(--text); font-family: "Chakra Petch", sans-serif; font-size: 14px; font-weight: 700; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; color: var(--gold-soft); font-size: 20px; font-weight: 400; }.faq-list details[open] summary::after { content: "−"; }.faq-list details p { padding: 12px 31px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }.faq-list details p b { color: var(--gold-soft); }

.site-footer { padding: 42px 0 20px; border-top: 1px solid var(--line); background: var(--panel); }.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 17px; color: var(--muted); font-family: "Chakra Petch", sans-serif; font-size: 11px; }.footer-links a:hover, .footer-links button:hover { color: var(--blue-bright); }.footer-links button { padding: 0; border: 0; color: var(--gold-soft); background: none; font: inherit; cursor: pointer; }.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 17px; color: var(--muted-2); font-size: 10px; }
.floating-zalo { position: fixed; right: 23px; bottom: 22px; z-index: 25; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid #69a5ff; border-radius: 50%; background: #0876f7; box-shadow: 0 10px 30px rgba(8, 118, 247, .35); }.floating-zalo:hover { transform: translateY(-3px); }

.modal { width: min(810px, calc(100% - 26px)); max-height: 91dvh; padding: 0; overflow: auto; color: var(--text); border: 1px solid var(--line); border-radius: 5px; background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,.55); }.modal::backdrop { background: rgba(1, 7, 15, .75); backdrop-filter: blur(5px); }.modal-close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--panel); font-size: 22px; line-height: 1; }.modal-close:hover { color: var(--text); border-color: var(--blue); }.product-modal { display: none; grid-template-columns: 1fr 1fr; }.product-modal[open] { display: grid; }.modal-product-art { min-height: 405px; border-right: 1px solid var(--line); background: radial-gradient(circle at 66% 25%, rgba(46,114,255,.28), transparent 28%), linear-gradient(135deg, #102d4a, #081421); position: relative; display: grid; place-items: center; }.modal-product-art::before { content: ""; position: absolute; inset: 30px; border: 1px solid rgba(105,165,255,.3); }.modal-product-art::after { content: "DF"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-soft); font: 700 82px "Chakra Petch", sans-serif; letter-spacing: .1em; text-shadow: 0 0 32px rgba(244,164,27,.35); opacity: .22; }.modal-art-symbol { position: relative; z-index: 1; color: var(--gold-soft); font: 700 50px "Chakra Petch", sans-serif; letter-spacing: .08em; text-shadow: 0 0 20px rgba(244,164,27,.38); }.modal-art-label { position: absolute; z-index: 1; left: 32px; bottom: 27px; color: var(--muted); font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .12em; }.modal-content { padding: 43px 31px 29px; }.modal-content h2 { margin: 16px 0 12px; font-size: 29px; }.modal-price { color: var(--gold-soft); font-family: "Chakra Petch", sans-serif; font-size: 27px; font-weight: 700; }.modal-content > p { color: var(--muted); font-size: 12px; line-height: 1.8; }.modal-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; padding: 15px 0; border-block: 1px solid var(--line); font-size: 11px; }.modal-specs dt { color: var(--muted); }.modal-specs dd { margin: 0; color: var(--text); font-weight: 700; text-align: right; }.modal-note { padding: 11px 13px; border-left: 2px solid var(--gold); background: var(--panel-2); }.full-button { width: 100%; margin-top: 20px; }
.contact-modal { width: min(550px, calc(100% - 26px)); padding: 32px; }.contact-modal h2 { margin: 15px 0 9px; font-size: 27px; }.contact-modal > p { color: var(--muted); font-size: 12px; line-height: 1.8; }.contact-modal textarea { width: 100%; min-height: 175px; margin: 16px 0 15px; padding: 12px; resize: vertical; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--bg-soft); font-size: 12px; line-height: 1.7; }.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }.contact-status { margin-top: 11px; color: var(--green); font-size: 11px; }
.toast { position: fixed; left: 50%; bottom: 29px; z-index: 80; max-width: calc(100% - 32px); padding: 11px 17px; transform: translateX(-50%); color: #fff; border: 1px solid #355477; background: #0b1b2e; box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 12px; text-align: center; }

@media (max-width: 1040px) {
  .shell { width: min(var(--max), calc(100% - 42px)); }
  .nav-row { gap: 14px; }.main-nav { gap: 0; }.main-nav a { padding-inline: 8px; font-size: 12px; }.main-nav a::after { left: 8px; right: 8px; }
  .hero-grid { gap: 40px; }.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.gift-layout { gap: 42px; }
}
@media (max-width: 800px) {
  .topline-inner { min-height: 38px; }.topline-inner > a { display: none; }
  .nav-row { min-height: 70px; }.main-nav { position: absolute; left: 21px; right: 21px; top: 77px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 9px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); }.main-nav.open { display: flex; }.main-nav a { padding: 12px; }.main-nav a::after { display: none; }.menu-toggle { display: grid; }
  .hero { padding: 65px 0 58px; }.hero-grid { grid-template-columns: 1fr; }.hero-copy { max-width: 670px; }.hero-visual { width: min(100%, 610px); margin: 9px auto 0; }.floating-badge { right: -8px; }.signal-grid { grid-template-columns: 1fr; }.signal-item { padding: 16px 0; }.signal-item + .signal-item { border-top: 1px solid var(--line); border-left: 0; }
  .section { padding: 66px 0; }.section-heading { display: block; }.section-heading > p { margin-top: 13px; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.gift-layout, .trade-grid, .faq-grid { grid-template-columns: 1fr; gap: 36px; }.faq-grid { gap: 34px; }.footer-top { display: block; }.footer-links { justify-content: flex-start; margin-top: 22px; }
}
@media (max-width: 560px) {
  .shell { width: calc(100% - 30px); }.brand-copy strong { font-size: 13px; }.brand-copy b { font-size: 8px; }.brand-mark { width: 37px; height: 37px; }.brand-mark svg { width: 28px; height: 28px; }.nav-actions .button { display: none; }.hero h1 { font-size: 44px; }.hero-lead { font-size: 13px; }.hero-tags span { font-size: 8px; }.hero-actions .button { flex: 1; padding-inline: 10px; }
  .hud-main { gap: 16px; padding: 28px 7px; }.radar { width: 112px; }.hud-info strong { font-size: 32px; }.hud-grid > div { min-height: 74px; padding: 10px; }.hud-grid b { font-size: 12px; }.hud-bottom { font-size: 7px; }.floating-badge { right: -5px; bottom: 13px; padding: 9px 11px; }.floating-badge strong { font-size: 20px; }
  .catalog-toolbar { display: block; }.catalog-tools { margin-top: 12px; }.search-box, .search-box input, .catalog-tools select { width: 100%; }.catalog-tools { flex-direction: column; align-items: stretch; }.product-grid, .service-grid { grid-template-columns: 1fr; }.product-visual { min-height: 210px; }.service-image { aspect-ratio: 1.65; }.gift-meta { gap: 7px; }.gift-meta div { min-width: 0; flex: 1; padding: 10px 8px; }.gift-card { padding: 17px; }.gift-seal { right: 24px; bottom: 25px; }.trade-lines { margin-top: 35px; }.trade-lines div { display: block; }.trade-lines strong { display: block; margin-top: 5px; text-align: left; }.trade-stamp { right: 25px; bottom: 27px; }.footer-bottom { display: block; }.footer-bottom span + span { display: block; margin-top: 8px; }.product-modal { grid-template-columns: 1fr; }.product-modal[open] { display: block; }.modal-product-art { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }.modal-content { padding: 28px 22px 24px; }.contact-modal { padding: 28px 20px 22px; }.contact-actions .button { flex: 1; }.floating-zalo { right: 15px; bottom: 15px; width: 52px; height: 52px; }
}

/* TẠP HÓA DELTA FORCE — multi-page storefront and local Delta admin */
.df-page { background: var(--bg); }
.df-page .topline { background: #07111e; }
.df-page .site-header { background: rgba(7, 17, 30, .88); }
.df-page .main-nav a.current { color: #fff; }
.df-page .main-nav a.current::after { transform: scaleX(1); }
.df-page .brand-copy strong { letter-spacing: .11em; }
.df-page .brand-copy b { color: var(--gold-soft); }
.df-page .brand-mark { border-color: var(--gold); }
.df-page .brand-mark svg { stroke: var(--gold); }

.page-hero { position: relative; min-height: 430px; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(5, 14, 25, .98) 0%, rgba(5, 14, 25, .81) 48%, rgba(5, 14, 25, .55) 100%), url("https://web.df.garena.com/02_h5/240923_official_website/vi/pc/bg_01.jpg") center/cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: .42; background: linear-gradient(125deg, transparent 44%, rgba(46, 114, 255, .18) 44.2%, transparent 44.6%), linear-gradient(125deg, transparent 67%, rgba(244, 164, 27, .12) 67.2%, transparent 67.5%); pointer-events: none; }
.page-hero .shell { position: relative; z-index: 1; }
.page-hero-copy { max-width: 650px; padding: 68px 0 72px; }
.page-hero h1 { margin: 16px 0 16px; color: #f5f8ff; font-size: clamp(43px, 6vw, 76px); text-transform: uppercase; }
.page-hero h1 span { color: var(--gold-soft); }
.page-hero p { max-width: 540px; color: #b8c8db; font-size: 14px; line-height: 1.85; }
.page-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }.page-hero-meta span { padding: 6px 9px; color: #d6e4f7; border: 1px solid #355474; background: rgba(12, 29, 49, .72); font: 700 9px "Chakra Petch", sans-serif; letter-spacing: .08em; }
.hero-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.hero-ribbon { position: absolute; right: 0; bottom: 35px; display: flex; align-items: center; gap: 12px; padding: 12px 17px; color: #07111e; background: var(--gold); font: 700 11px "Chakra Petch", sans-serif; transform: skew(-13deg); box-shadow: 0 10px 30px rgba(0,0,0,.22); }.hero-ribbon span { transform: skew(13deg); }

.df-content-section { padding: 76px 0; }.df-content-section.alt { border-block: 1px solid var(--line); background: var(--panel); }
.df-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }.df-section-head h2 { margin-top: 13px; font-size: clamp(31px, 4vw, 47px); }.df-section-head p { max-width: 390px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.df-link-arrow { color: var(--gold-soft); font: 700 12px "Chakra Petch", sans-serif; white-space: nowrap; }.df-link-arrow:hover { color: var(--blue-bright); }
.df-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.df-feature-card { position: relative; min-height: 235px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(140deg, var(--panel-3), var(--panel)); }.df-feature-card::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(105,165,255,.22); clip-path: polygon(0 0, 28% 0, 28% 1px, 72% 1px, 72% 0, 100% 0, 100% 28%, calc(100% - 1px) 28%, calc(100% - 1px) 72%, 100% 72%, 100% 100%, 72% 100%, 72% calc(100% - 1px), 28% calc(100% - 1px), 28% 100%, 0 100%, 0 72%, 1px 72%, 1px 28%, 0 28%); }.df-feature-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 26%, rgba(46,114,255,.35), transparent 32%), linear-gradient(150deg, transparent 45%, rgba(244,164,27,.12)); pointer-events: none; }.df-feature-card:nth-child(2)::after { background: radial-gradient(circle at 25% 25%, rgba(24,216,138,.18), transparent 34%), linear-gradient(150deg, transparent 45%, rgba(46,114,255,.12)); }.df-feature-card:nth-child(3)::after { background: radial-gradient(circle at 70% 22%, rgba(244,164,27,.24), transparent 34%), linear-gradient(150deg, transparent 45%, rgba(105,165,255,.08)); }.df-feature-card > * { position: relative; z-index: 1; }.df-feature-symbol { position: absolute; right: 24px; top: 35px; color: rgba(105,165,255,.35); font: 700 54px "Chakra Petch", sans-serif; letter-spacing: .1em; }.df-feature-card:nth-child(2) .df-feature-symbol { color: rgba(24,216,138,.35); }.df-feature-card:nth-child(3) .df-feature-symbol { color: rgba(244,164,27,.4); }.df-feature-copy { padding: 23px; }.df-feature-copy small { color: var(--gold-soft); font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .15em; }.df-feature-copy h3 { margin: 8px 0 7px; font-size: 25px; }.df-feature-copy p { min-height: 38px; color: var(--muted); font-size: 11px; line-height: 1.65; }

.df-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }.df-product-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--panel); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.df-product-card:hover { transform: translateY(-4px); border-color: var(--blue-bright); box-shadow: 0 18px 35px rgba(0,0,0,.23); }.df-product-media { position: relative; aspect-ratio: 1.22; overflow: hidden; background: linear-gradient(135deg, #102d4a, #091624); }.df-product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 43%, rgba(2, 9, 17, .91)); }.df-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }.df-product-card:hover .df-product-media img { transform: scale(1.06); }.df-product-label { position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 7px; color: #fff; border: 1px solid rgba(105,165,255,.35); background: rgba(7,17,30,.66); font: 700 8px "Chakra Petch", sans-serif; letter-spacing: .08em; }.df-product-id { position: absolute; z-index: 1; top: 13px; right: 12px; color: var(--gold-soft); font: 700 9px "Chakra Petch", sans-serif; }.df-product-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-soft); font: 700 42px "Chakra Petch", sans-serif; letter-spacing: .08em; }.df-product-body { display: flex; flex: 1; flex-direction: column; padding: 17px 17px 15px; }.df-product-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted-2); font: 9px "Chakra Petch", sans-serif; letter-spacing: .06em; }.df-product-meta b { color: var(--green); font-weight: 700; }.df-product-body h3 { margin: 9px 0 7px; font-size: 17px; }.df-product-body p { min-height: 37px; color: var(--muted); font-size: 11px; line-height: 1.65; }.df-product-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }.df-product-price { color: var(--gold-soft); font: 700 17px "Chakra Petch", sans-serif; line-height: 1.05; }.df-product-price small { display: block; margin-top: 5px; color: var(--muted-2); font: 9px "Noto Sans TC", sans-serif; }.df-product-actions { display: flex; gap: 5px; }.df-mini-button { min-height: 33px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: transparent; font: 700 9px "Chakra Petch", sans-serif; }.df-mini-button:hover { color: var(--text); border-color: var(--blue); }.df-mini-button.primary { color: #fff; border-color: var(--blue); background: var(--blue); }
.df-catalog-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }.df-tabs { display: flex; flex-wrap: wrap; gap: 7px; }.df-tab { min-height: 38px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); background: var(--panel); font: 700 10px "Chakra Petch", sans-serif; }.df-tab:hover, .df-tab.active { color: #fff; border-color: var(--blue); background: var(--blue); }.df-search-sort { display: flex; gap: 8px; }.df-search-sort input, .df-search-sort select { min-height: 38px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); font-size: 11px; }.df-search-sort input { width: 205px; padding: 8px 11px; }.df-search-sort select { padding: 8px 9px; }.df-result { margin: 7px 0 15px; color: var(--muted); font: 10px "Chakra Petch", sans-serif; letter-spacing: .07em; }.df-empty { padding: 55px 20px; border: 1px dashed var(--line); color: var(--muted); background: var(--panel); text-align: center; }.df-empty strong { display: block; margin-bottom: 5px; color: var(--text); font: 700 20px "Chakra Petch", sans-serif; }

.df-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }.df-service-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }.df-service-card:hover { border-color: var(--blue); }.df-service-media { position: relative; aspect-ratio: 1.62; overflow: hidden; background: var(--panel-2); }.df-service-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 33%, rgba(5,14,25,.86)); }.df-service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }.df-service-card:hover img { transform: scale(1.05); }.df-service-code { position: absolute; z-index: 1; top: 12px; left: 12px; color: var(--gold-soft); font: 700 9px "Chakra Petch", sans-serif; letter-spacing: .12em; }.df-service-body { display: flex; flex: 1; flex-direction: column; padding: 19px; }.df-service-body small { color: var(--gold-soft); font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .11em; }.df-service-body h3 { margin: 9px 0 9px; font-size: 23px; }.df-service-body p { min-height: 42px; color: var(--muted); font-size: 12px; line-height: 1.75; }.df-service-price { margin-top: 14px; color: var(--gold-soft); font: 700 21px "Chakra Petch", sans-serif; }.df-service-body .button { align-self: flex-start; margin-top: 17px; }.df-service-note { display: flex; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 11px; }.df-service-note b { color: var(--green); }

.df-gift-layout { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 75px; }.df-gift-copy h2 { margin: 15px 0 16px; font-size: clamp(39px, 5vw, 64px); }.df-gift-copy h2 span { color: var(--blue-bright); }.df-gift-copy > p { max-width: 520px; color: var(--muted); font-size: 14px; line-height: 1.9; }.df-gift-copy > p b { color: var(--gold-soft); }.df-gift-stats { display: flex; gap: 10px; margin: 25px 0 0; }.df-gift-stats div { min-width: 100px; padding: 12px; border: 1px solid var(--line); background: var(--bg-soft); }.df-gift-stats strong { display: block; color: var(--gold-soft); font: 700 25px "Chakra Petch", sans-serif; line-height: 1; }.df-gift-stats span { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }.df-console { position: relative; padding: 25px; border: 1px solid var(--blue); background: linear-gradient(145deg, #102843, #07111e); box-shadow: var(--shadow), 0 0 0 8px rgba(46,114,255,.08); }.df-console::before { content: ""; position: absolute; inset: 11px; border: 1px dashed rgba(105,165,255,.26); pointer-events: none; }.df-console-head { position: relative; z-index: 1; display: flex; justify-content: space-between; color: var(--muted); font: 10px "Chakra Petch", sans-serif; letter-spacing: .14em; }.df-console-head b { color: var(--gold-soft); }.df-console-box { position: relative; z-index: 1; margin-top: 25px; padding: 21px; border: 1px solid #1b3d60; background: #06111e; }.df-console-line { display: flex; align-items: center; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid #1b3d60; color: #7595b7; font: 10px "Chakra Petch", sans-serif; }.df-console-line i { width: 6px; height: 6px; border-radius: 50%; background: #ff6f62; }.df-console-line i:nth-child(2) { background: var(--gold); }.df-console-line i:nth-child(3) { background: var(--green); }.df-console-line span { margin-left: 8px; }.df-console-box p { margin-top: 15px; color: #a2c8eb; font: 12px "Chakra Petch", sans-serif; }.df-console-box em { color: var(--gold); font-style: normal; }.df-progress { height: 5px; margin-top: 22px; background: #183552; }.df-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); }.df-console-box small { display: block; margin-top: 10px; color: #617c99; font: 9px "Chakra Petch", sans-serif; letter-spacing: .09em; }
.df-gift-table { margin-top: 26px; }.df-gift-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 19px; border: 1px solid var(--line); background: var(--panel); }.df-gift-card + .df-gift-card { margin-top: 9px; }.df-gift-card h3 { font-size: 18px; }.df-gift-card p { margin-top: 5px; color: var(--muted); font-size: 11px; }.df-gift-card strong { color: var(--gold-soft); font: 700 18px "Chakra Petch", sans-serif; white-space: nowrap; }

.df-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }.df-info-card { padding: 22px; border: 1px solid var(--line); background: var(--panel); }.df-info-card span { color: var(--gold-soft); font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .12em; }.df-info-card h3 { margin: 13px 0 8px; font-size: 19px; }.df-info-card p { color: var(--muted); font-size: 11px; line-height: 1.75; }

.df-admin-shell { min-height: 100vh; background: var(--bg); }.df-admin-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 0 34px; border-bottom: 1px solid var(--line); background: rgba(7,17,30,.92); backdrop-filter: blur(15px); }.df-admin-topbar .brand { flex: none; }.df-admin-topbar-actions { display: flex; align-items: center; gap: 8px; }.df-admin-main { width: min(1420px, calc(100% - 68px)); margin: 0 auto; padding: 34px 0 65px; }.df-admin-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 24px; }.df-admin-intro h1 { margin-top: 13px; font-size: 42px; }.df-admin-intro p { max-width: 450px; color: var(--muted); font-size: 12px; line-height: 1.8; }.df-admin-actions { display: flex; flex-wrap: wrap; gap: 8px; }.df-admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }.df-admin-stat { padding: 18px; border: 1px solid var(--line); background: var(--panel); }.df-admin-stat small { color: var(--muted); font-size: 10px; }.df-admin-stat strong { display: block; margin-top: 7px; color: var(--gold-soft); font: 700 28px "Chakra Petch", sans-serif; }.df-admin-panel { margin-bottom: 20px; padding: 22px; border: 1px solid var(--line); background: var(--panel); }.df-admin-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }.df-admin-panel-head h2 { font-size: 22px; }.df-admin-panel-head p { margin-top: 5px; color: var(--muted); font-size: 11px; }.df-admin-table-wrap { overflow-x: auto; }.df-admin-table { width: 100%; border-collapse: collapse; font-size: 11px; }.df-admin-table th { color: var(--muted-2); background: var(--bg-soft); font: 700 9px "Chakra Petch", sans-serif; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.df-admin-table td, .df-admin-table th { padding: 12px 11px; border-bottom: 1px solid var(--line); vertical-align: middle; }.df-admin-table td strong { color: var(--text); font-weight: 700; }.df-admin-table td small { display: block; margin-top: 4px; color: var(--muted); }.df-admin-thumb { width: 53px; height: 42px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }.df-admin-thumb img { width: 100%; height: 100%; object-fit: cover; }.df-admin-badge { display: inline-flex; padding: 4px 7px; color: var(--green); border: 1px solid rgba(24,216,138,.22); background: rgba(24,216,138,.07); font: 700 9px "Chakra Petch", sans-serif; }.df-admin-actions-cell { display: flex; gap: 5px; justify-content: flex-end; }.df-admin-button { min-height: 32px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: transparent; font: 700 9px "Chakra Petch", sans-serif; }.df-admin-button:hover { color: var(--text); border-color: var(--blue); }.df-admin-button.primary { color: #fff; border-color: var(--blue); background: var(--blue); }.df-admin-button.danger { color: #ff968d; }.df-admin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.df-admin-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }.df-admin-field label { color: var(--muted); font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .06em; }.df-admin-field input, .df-admin-field select, .df-admin-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--bg-soft); font-size: 12px; }.df-admin-field input, .df-admin-field select { min-height: 40px; padding: 8px 10px; }.df-admin-field textarea { min-height: 95px; padding: 10px; resize: vertical; }.df-admin-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }.df-admin-help { color: var(--muted); font-size: 11px; line-height: 1.7; }.df-admin-inline { display: flex; align-items: center; gap: 8px; }.df-admin-inline input { min-width: 0; }.df-admin-empty { padding: 26px; color: var(--muted); border: 1px dashed var(--line); text-align: center; }.df-admin-message { min-height: 19px; margin-top: 8px; color: var(--green); font-size: 11px; }.df-admin-file { color: var(--muted); font-size: 11px; }.df-admin-danger-note { margin: 10px 0 0; color: #ff9a90; font-size: 10px; }
.df-admin-modal { width: min(690px, calc(100% - 24px)); padding: 0; }.df-admin-modal .modal-content { padding: 25px; }.df-admin-modal h2 { margin: 0 0 18px; font-size: 25px; }.df-admin-modal .modal-close { top: 17px; right: 18px; }.df-admin-modal .modal-content > p { margin-bottom: 18px; }

@media (max-width: 1040px) { .df-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.df-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.df-gift-layout { gap: 38px; }.df-admin-main { width: min(100% - 42px, 1420px); } }
@media (max-width: 800px) { .page-hero { min-height: 410px; }.page-hero-copy { padding: 55px 0 62px; }.hero-ribbon { right: -10px; bottom: 20px; }.df-section-head { display: block; }.df-section-head p { margin-top: 13px; }.df-feature-grid, .df-info-grid { grid-template-columns: 1fr; }.df-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.df-gift-layout { grid-template-columns: 1fr; gap: 35px; }.df-admin-topbar { padding: 0 20px; }.df-admin-main { width: calc(100% - 30px); }.df-admin-intro { display: block; }.df-admin-intro h1 { font-size: 33px; }.df-admin-intro > div:last-child { margin-top: 18px; }.df-admin-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .page-hero h1 { font-size: 44px; }.hero-action-row .button { flex: 1; }.df-catalog-controls { display: block; }.df-search-sort { display: grid; grid-template-columns: 1fr; margin-top: 12px; }.df-search-sort input { width: 100%; }.df-product-grid, .df-service-grid { grid-template-columns: 1fr; }.df-gift-stats div { min-width: 0; flex: 1; }.df-gift-card { display: block; }.df-gift-card strong { display: block; margin-top: 9px; }.df-admin-grid2 { grid-template-columns: 1fr; gap: 0; }.df-admin-panel { padding: 17px; }.df-admin-panel-head { display: block; }.df-admin-panel-head .button { margin-top: 12px; }.df-admin-topbar-actions .button { display: none; }.df-admin-intro h1 { font-size: 29px; } }

/* Home redesign: quieter field hero, Garena-style editorial frames, no gold DF overlay */
.modal-product-art::after { content: none; display: none; }
.modal-product-art > img { position: relative; z-index: 1; width: calc(100% - 60px); height: calc(100% - 60px); object-fit: cover; border: 1px solid rgba(105,165,255,.38); box-shadow: 0 16px 45px rgba(0,0,0,.35); }
.df-product-fallback { color: transparent; }

.home-hero { min-height: 625px; background: linear-gradient(90deg, rgba(4,12,22,.98) 0%, rgba(4,12,22,.87) 42%, rgba(4,12,22,.42) 100%), url("https://web.df.garena.com/02_h5/240923_official_website/vi/pc/bg_01.jpg") center/cover; }
.home-hero-shell { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: clamp(34px, 7vw, 110px); }
.home-hero .page-hero-copy { max-width: 610px; padding: 82px 0 88px; }
.home-hero h1 { margin-top: 18px; font-family: "Kanit", "Chakra Petch", sans-serif; font-size: clamp(47px, 6.2vw, 84px); font-weight: 600; letter-spacing: .015em; line-height: .99; }
.home-hero h1 span { color: #d9ebff; text-shadow: 0 0 28px rgba(105,165,255,.22); }
.home-hero p { max-width: 520px; margin-top: 24px; color: #ccd9e8; font-size: 15px; line-height: 1.9; }
.home-hero .hero-action-row { margin-top: 31px; }
.df-hero-showcase { position: relative; width: min(100%, 650px); justify-self: end; padding: 16px; border: 1px solid rgba(105,165,255,.42); background: rgba(6,17,30,.58); box-shadow: 0 28px 80px rgba(0,0,0,.34); }
.df-hero-showcase::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(244,164,27,.32); clip-path: polygon(0 0, 15% 0, 15% 1px, 85% 1px, 85% 0, 100% 0, 100% 15%, calc(100% - 1px) 15%, calc(100% - 1px) 85%, 100% 85%, 100% 100%, 85% 100%, 85% calc(100% - 1px), 15% calc(100% - 1px), 15% 100%, 0 100%, 0 85%, 1px 85%, 1px 15%, 0 15%); pointer-events: none; }
.df-hero-showcase-image { position: relative; min-height: 365px; overflow: hidden; border: 1px solid rgba(105,165,255,.28); background: #0a1b2e; }
.df-hero-showcase-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,13,23,.03) 28%, rgba(4,13,23,.9) 100%), linear-gradient(90deg, rgba(4,13,23,.65), transparent 58%); pointer-events: none; }
.df-hero-showcase-image img { width: 100%; height: 100%; min-height: 365px; object-fit: cover; object-position: center; filter: saturate(.86) contrast(1.06); }
.df-hero-corner { position: absolute; z-index: 2; color: #d6e6f8; font: 700 11px "Chakra Petch", sans-serif; letter-spacing: .12em; }
.df-hero-corner.top-left { top: 20px; left: 22px; }.df-hero-corner.top-right { top: 20px; right: 22px; color: var(--green); }.df-hero-corner.bottom-left { bottom: 20px; left: 22px; color: var(--gold-soft); }
.df-hero-showcase-title { position: absolute; z-index: 2; left: 22px; bottom: 58px; }.df-hero-showcase-title small { color: var(--gold-soft); font: 700 12px "Chakra Petch", sans-serif; letter-spacing: .2em; }.df-hero-showcase-title strong { display: block; margin-top: 8px; color: #fff; font: 600 clamp(34px, 4.5vw, 61px) "Kanit", sans-serif; line-height: .86; letter-spacing: .045em; }
.df-hero-showcase-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border-top: 1px solid rgba(105,165,255,.25); }.df-hero-showcase-meta span { padding: 12px 10px 4px; color: #a8bdd4; font: 700 11px "Chakra Petch", sans-serif; letter-spacing: .06em; }.df-hero-showcase-meta span + span { border-left: 1px solid rgba(105,165,255,.25); }.df-hero-showcase-meta b { display: block; margin-bottom: 3px; color: var(--gold-soft); font-size: 13px; }

.df-news-section { padding: 78px 0 82px; border-bottom: 1px solid var(--line); background: #081525; }
.df-news-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }.df-news-title-block h2 { position: relative; margin-top: 9px; color: #f3f7ff; font: 600 clamp(37px, 5vw, 66px) "Kanit", sans-serif; letter-spacing: .08em; line-height: .95; }.df-news-title-block h2::before { content: attr(data-title); position: absolute; z-index: 0; top: -13px; left: 5px; color: transparent; font: inherit; letter-spacing: inherit; -webkit-text-stroke: 1px rgba(105,165,255,.25); transform: translate(7px, -3px); }.df-news-title-block h2 { isolation: isolate; }.df-news-title-block h2::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: -13px; width: 88px; height: 3px; background: var(--gold); box-shadow: 0 0 18px rgba(244,164,27,.42); }.df-news-title-block p { margin-top: 23px; color: var(--muted); font-size: 14px; }
.df-news-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.df-news-filters .df-tab { min-height: 36px; font-size: 11px; }
.df-news-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }.df-news-list { display: grid; gap: 12px; }.df-news-item { position: relative; display: block; overflow: hidden; color: var(--text); border: 1px solid #2a4664; background: #0d2035; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }.df-news-item:hover { border-color: var(--blue-bright); transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0,0,0,.25); }.df-news-item-wrap { position: relative; height: 100%; }.df-news-item-feature .df-news-item-wrap { min-height: 447px; display: flex; align-items: flex-end; }.df-news-item-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.07); }.df-news-item-feature .df-news-item-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,17,30,.04) 23%, rgba(6,17,30,.95) 100%); }.df-news-info { position: relative; z-index: 1; }.df-news-item-feature .df-news-info { width: 100%; padding: 30px; }.df-news-item-list .df-news-item-wrap { display: grid; grid-template-columns: 39% 61%; min-height: 141px; }.df-news-item-list img { width: 100%; height: 100%; min-height: 141px; object-fit: cover; filter: saturate(.8) contrast(1.04); }.df-news-item-list .df-news-info { padding: 17px 18px 15px; }.df-news-date { color: var(--gold-soft); font: 700 11px "Chakra Petch", sans-serif; letter-spacing: .1em; text-transform: uppercase; }.df-news-title { margin-top: 9px; color: #f3f7ff; font: 600 19px "Kanit", sans-serif; line-height: 1.18; text-transform: uppercase; }.df-news-item-feature .df-news-title { max-width: 720px; font-size: clamp(25px, 3vw, 39px); line-height: 1.04; }.df-news-summary { margin-top: 9px; color: #aebfd1; font-size: 13px; line-height: 1.65; }.df-news-item-feature .df-news-summary { max-width: 680px; font-size: 14px; }.df-news-read-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; color: #fff; font: 700 11px "Chakra Petch", sans-serif; letter-spacing: .08em; text-transform: uppercase; }.df-news-read-more span { color: var(--gold-soft); font-size: 16px; }.df-news-pinned { position: absolute; z-index: 3; top: 0; left: 0; display: none; width: 66px; height: 66px; background: url("https://web.df.garena.com/02_h5/240923_official_website/vi/pc/news_pinned.png") center/contain no-repeat; }.df-news-pinned.is-visible { display: block; }.df-news-image-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, #112c48, #07111e); }.df-news-footer { display: flex; justify-content: flex-end; margin-top: 18px; }.df-news-empty { padding: 50px; color: var(--muted); border: 1px dashed var(--line); background: var(--panel); text-align: center; }

.news-detail-hero .page-hero-copy { padding-bottom: 65px; }.df-news-detail-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(265px, .75fr); gap: 25px; align-items: start; }.df-news-detail { overflow: hidden; border: 1px solid var(--line); background: var(--panel); }.df-news-detail-image { position: relative; aspect-ratio: 1.9; overflow: hidden; background: var(--panel-2); }.df-news-detail-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6,17,30,.5)); }.df-news-detail-image img { width: 100%; height: 100%; object-fit: cover; }.df-news-detail-copy { padding: 28px 31px 32px; }.df-news-detail-copy .eyebrow { margin-top: 18px; }.df-news-detail-copy h2 { margin: 12px 0 15px; color: var(--text); font: 600 clamp(30px, 4vw, 51px) "Kanit", sans-serif; line-height: 1.05; text-transform: uppercase; }.df-news-detail-summary { color: var(--muted); font-size: 16px; line-height: 1.8; }.df-news-detail-content { margin: 24px 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }.df-news-detail-content p { margin: 0 0 18px; color: #bdccdc; font-size: 15px; line-height: 1.9; }.df-news-sidebar { padding: 20px; border: 1px solid var(--line); background: var(--panel); }.df-news-sidebar h2 { margin: 9px 0 18px; font: 600 29px "Kanit", sans-serif; }.df-news-related { display: block; padding: 15px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }.df-news-related span, .df-news-related em { display: block; color: var(--gold-soft); font: 700 10px "Chakra Petch", sans-serif; letter-spacing: .08em; font-style: normal; }.df-news-related strong { display: block; margin: 7px 0 8px; font: 600 16px "Kanit", sans-serif; line-height: 1.25; text-transform: uppercase; }.df-news-related:hover strong { color: var(--blue-bright); }.df-news-sidebar .button { width: 100%; margin-top: 17px; }

@media (max-width: 980px) { .home-hero-shell { grid-template-columns: 1fr; gap: 0; }.home-hero .page-hero-copy { max-width: 680px; padding-bottom: 45px; }.df-hero-showcase { justify-self: start; margin: 0 0 60px; }.df-news-layout { grid-template-columns: 1fr; }.df-news-item-feature .df-news-item-wrap { min-height: 380px; }.df-news-detail-layout { grid-template-columns: 1fr; }.df-news-sidebar { order: -1; } }
@media (max-width: 700px) { .home-hero { min-height: 0; }.home-hero .page-hero-copy { padding-top: 58px; }.df-hero-showcase { padding: 10px; }.df-hero-showcase-image, .df-hero-showcase-image img { min-height: 270px; }.df-hero-showcase-meta span { font-size: 10px; }.df-news-heading { display: block; }.df-news-filters { justify-content: flex-start; margin-top: 25px; }.df-news-item-feature .df-news-info { padding: 22px; }.df-news-item-list .df-news-item-wrap { grid-template-columns: 34% 66%; min-height: 160px; }.df-news-item-list img { min-height: 160px; }.df-news-title { font-size: 17px; }.df-news-summary { font-size: 12px; }.df-news-detail-copy { padding: 23px 20px 26px; }.df-news-detail-copy h2 { font-size: 30px; } }
@media (max-width: 560px) { .home-hero h1 { font-size: 45px; }.home-hero p { font-size: 14px; }.df-hero-showcase-image, .df-hero-showcase-image img { min-height: 220px; }.df-hero-showcase-title { bottom: 43px; }.df-hero-showcase-title strong { font-size: 36px; }.df-hero-corner { font-size: 9px; }.df-hero-showcase-meta { grid-template-columns: 1fr; }.df-hero-showcase-meta span + span { border-top: 1px solid rgba(105,165,255,.25); border-left: 0; }.df-news-section { padding: 58px 0; }.df-news-item-feature .df-news-item-wrap { min-height: 365px; }.df-news-item-list .df-news-item-wrap { display: block; }.df-news-item-list img { display: block; height: 170px; min-height: 0; }.df-news-item-list .df-news-info { padding: 16px; }.df-news-item-feature .df-news-title { font-size: 27px; }.df-news-detail-image { aspect-ratio: 1.42; } }

/* NGHEO-INSPIRED ARMORY CARD / TYPOGRAPHY v3 */
:root {
  --df-font-ui: "Kanit", "Segoe UI", Arial, sans-serif;
  --df-font-display: "Chakra Petch", "Kanit", sans-serif;
  --df-reward-green: #25f0ad;
  --df-reward-yellow: #ffd436;
  --df-reward-line: rgba(128, 171, 170, .34);
  --df-reward-line-strong: rgba(144, 195, 192, .55);
  --df-reward-panel: #0a1516;
  --df-reward-panel-2: #0c1919;
  --df-reward-muted: #9aadaa;
}

/* Make the storefront typography feel like the reference game/reward UI. */
.df-page * { font-family: var(--df-font-ui) !important; }
.df-page,
.df-page button,
.df-page input,
.df-page select,
.df-page textarea { font-family: var(--df-font-ui) !important; }
.df-page h1,
.df-page h2,
.df-page h3,
.df-page .brand-copy,
.df-page .eyebrow,
.df-page .topline,
.df-page .main-nav a,
.df-page .button,
.df-page .df-tab,
.df-page .df-result,
.df-page .page-hero-meta span,
.df-page .hero-ribbon,
.df-page .df-product-stock,
.df-page .df-product-eyebrow,
.df-page .df-product-price,
.df-page .df-product-detail-link,
.df-page .df-service-code,
.df-page .df-news-date,
.df-page .df-news-title,
.df-page .df-news-read-more { font-family: var(--df-font-display) !important; }
.df-page { font-size: 16px; font-weight: 500; letter-spacing: .005em; }
.df-page .main-nav a,
.df-page .button { font-weight: 600; }

/* Reference-style account grid: broad cards, 16:9 media and technical frame. */
.df-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 22px;
  padding-top: 11px;
}
.df-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--df-reward-line);
  border-top-color: var(--df-reward-line-strong);
  border-radius: 0;
  background:
    radial-gradient(ellipse at 77% 72%, rgba(46, 94, 87, .11) 0 2%, transparent 3% 100%),
    linear-gradient(180deg, #0a1617 0%, #081314 100%);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .16);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.df-product-card::before,
.df-product-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.df-product-card::before {
  left: -1px;
  top: -11px;
  width: 47%;
  height: 8px;
  border-top: 1px solid rgba(140, 186, 185, .42);
  border-left: 1px solid rgba(140, 186, 185, .26);
  background:
    repeating-linear-gradient(90deg, rgba(140,186,185,.2) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, rgba(140,186,185,.13), transparent 92%);
  clip-path: polygon(0 0, 92% 0, 96% 50%, 100% 50%, 100% 100%, 0 100%);
  opacity: .9;
}
.df-product-card::after {
  right: -1px;
  bottom: -1px;
  width: 21px;
  height: 21px;
  border-right: 1px solid rgba(140, 186, 185, .52);
  border-bottom: 1px solid rgba(140, 186, 185, .52);
  clip-path: polygon(62% 0,100% 0,100% 100%,0 100%,0 62%,62% 62%);
}
.df-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(87, 238, 195, .58);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .25), 0 0 0 1px rgba(37, 240, 173, .05);
}
.df-product-rail {
  position: absolute;
  z-index: 5;
  top: -9px;
  left: 9px;
  height: 7px;
  max-width: 42%;
  overflow: hidden;
  color: rgba(161, 190, 188, .36);
  font: 600 6px/7px var(--df-font-display);
  letter-spacing: .06em;
  white-space: nowrap;
  pointer-events: none;
}
.df-product-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--df-reward-line);
  border-radius: 0;
  background: #091313;
  text-align: left;
}
.df-product-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(164, 202, 198, .12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.df-product-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 10, 10, .02) 52%, rgba(3, 10, 10, .42) 100%);
  pointer-events: none;
}
.df-product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.93) contrast(1.035);
  transition: transform .35s ease, filter .35s ease;
}
.df-product-card:hover .df-product-media img {
  transform: scale(1.025);
  filter: saturate(1) contrast(1.05);
}
.df-product-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(37, 240, 173, .32) !important;
  background: radial-gradient(circle at 65% 25%, rgba(37,240,173,.12), transparent 34%), #091313;
  font: 700 54px var(--df-font-display) !important;
  letter-spacing: .1em;
}
.df-product-stock {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 6px 11px 5px;
  color: #03110d;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--df-reward-green);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .22);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.df-product-stock.is-out { color: #f4f7f6; background: #4e5c5a; }
.df-product-stock.is-check { color: #09110f; background: #e2c25e; }
.df-product-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 158px;
  padding: 13px 24px 16px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 82% 25%, transparent 0 18px, rgba(93,137,132,.05) 19px 20px, transparent 21px 38px, rgba(93,137,132,.035) 39px 40px, transparent 41px),
    linear-gradient(180deg, rgba(9, 22, 22, .98), rgba(7, 18, 19, .98));
}
.df-product-body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(112,154,151,.045) 17.2% 17.4%, transparent 17.6% 100%),
    linear-gradient(0deg, transparent 0 70%, rgba(112,154,151,.04) 70.2% 70.4%, transparent 70.6% 100%);
}
.df-product-body > * { position: relative; z-index: 1; }
.df-product-eyebrow {
  color: #839894;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.df-product-body h3 {
  margin: 7px 0 5px;
  color: #f0f6f4;
  font-family: var(--df-font-display) !important;
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.df-product-body p {
  min-height: 0;
  display: -webkit-box;
  overflow: hidden;
  color: #a9bbb7;
  font-family: var(--df-font-ui) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.df-product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 0;
}
.df-product-price {
  color: var(--df-reward-yellow);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.df-product-detail-link {
  min-height: auto;
  padding: 0;
  border: 0;
  color: var(--df-reward-green);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.df-product-detail-link::after { content: ""; display: inline-block; width: 0; margin-left: 0; transition: width .18s ease, margin-left .18s ease; }
.df-product-detail-link:hover { color: #73ffd2; }
.df-product-card:hover .df-product-detail-link::after { content: " ↗"; width: auto; margin-left: 2px; }

/* Light mode still keeps the armory cards dark so product artwork and the frame stay consistent. */
html[data-theme="light"] .df-product-card { border-color: rgba(59, 95, 94, .42); background: #0a1516; }
html[data-theme="light"] .df-product-body { background: linear-gradient(180deg, #0a1717, #081314); }
html[data-theme="light"] .df-product-eyebrow { color: #91a49f; }
html[data-theme="light"] .df-product-body h3 { color: #f0f6f4; }
html[data-theme="light"] .df-product-body p { color: #a9bbb7; }

@media (max-width: 1100px) {
  .df-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 22px; }
  .df-product-body h3 { font-size: 21px; }
}
@media (max-width: 700px) {
  .df-product-grid { grid-template-columns: 1fr; gap: 27px; }
  .df-product-body { min-height: 151px; padding: 13px 18px 15px; }
  .df-product-body h3 { font-size: 20px; }
  .df-product-body p { font-size: 13px; }
}

/* ==========================================================================
   DELTA ARMORY FRAME V4
   Technical card framing based on the supplied Delta Force reference.
   Kept CSS-only so the storefront does not depend on Garena frame assets.
   ========================================================================== */
.df-page {
  --df-frame-line: rgba(111, 148, 146, .48);
  --df-frame-line-strong: rgba(151, 190, 187, .68);
  --df-frame-dim: rgba(111, 148, 146, .20);
  --df-frame-green: #22efaa;
  --df-frame-yellow: #ffd43d;
  --df-card-bg: #091314;
  --df-card-bg-2: #0b1718;
}

/* Product/account cards ---------------------------------------------------- */
.df-page .df-product-grid {
  gap: 30px 20px;
}

.df-page .df-product-card {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  border: 1px solid var(--df-frame-line) !important;
  border-top-color: var(--df-frame-line-strong) !important;
  border-radius: 0 !important;
  background: var(--df-card-bg) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.012) !important;
}

.df-page .df-product-card::before,
.df-page .df-news-item::before,
.df-page .df-news-detail::before {
  content: "";
  position: absolute;
  z-index: 8;
  top: -10px;
  left: -1px;
  width: min(46%, 210px);
  height: 7px;
  pointer-events: none;
  border-top: 1px solid rgba(150, 188, 186, .46);
  border-left: 1px solid rgba(150, 188, 186, .30);
  background:
    repeating-linear-gradient(90deg, rgba(151,190,187,.20) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, rgba(111,148,146,.12), rgba(111,148,146,.025));
  clip-path: polygon(0 0, 88% 0, 92% 48%, 100% 48%, 100% 100%, 0 100%);
}

.df-page .df-product-card::after,
.df-page .df-news-item::after,
.df-page .df-news-detail::after {
  content: "";
  position: absolute;
  z-index: 8;
  right: -1px;
  bottom: -1px;
  width: 25px;
  height: 25px;
  pointer-events: none;
  background:
    linear-gradient(to left, var(--df-frame-line-strong) 0 1px, transparent 1px) top right/100% 10px no-repeat,
    linear-gradient(to top, var(--df-frame-line-strong) 0 1px, transparent 1px) bottom right/10px 100% no-repeat;
  clip-path: polygon(58% 0,100% 0,100% 100%,0 100%,0 58%,58% 58%);
  opacity: .9;
}

.df-page .df-product-rail,
.df-page .df-news-rail {
  position: absolute;
  z-index: 9;
  top: -9px;
  left: 8px;
  max-width: 38%;
  height: 7px;
  overflow: hidden;
  color: rgba(171, 201, 198, .34) !important;
  font-family: var(--df-font-display) !important;
  font-size: 6px !important;
  font-weight: 600 !important;
  line-height: 7px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.df-page .df-product-media {
  position: relative;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid var(--df-frame-line) !important;
  background: #071011 !important;
}

.df-page .df-product-media::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 7px;
  pointer-events: none;
  border-top: 1px solid rgba(148,184,181,.16);
  border-left: 1px solid rgba(148,184,181,.08);
  border-right: 1px solid rgba(148,184,181,.08);
  box-shadow: inset 0 0 0 1px rgba(2,9,9,.10);
}

.df-page .df-product-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,13,13,.02) 52%, rgba(4,12,12,.34) 100%),
    linear-gradient(90deg, rgba(36,239,170,.018), transparent 25%, transparent 75%, rgba(36,239,170,.018));
}

.df-page .df-product-media img {
  filter: saturate(.92) contrast(1.045) brightness(.96) !important;
}

.df-page .df-product-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(71, 226, 185, .60) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.27), 0 0 0 1px rgba(34,239,170,.035) !important;
}

.df-page .df-product-stock {
  left: 11px !important;
  bottom: 9px !important;
  min-height: 28px !important;
  padding: 5px 10px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #07110e !important;
  background: var(--df-frame-green) !important;
  box-shadow: none !important;
  font-family: var(--df-font-display) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
}
.df-page .df-product-stock.is-out { color: #ecf1f0 !important; background: #4e5b59 !important; }
.df-page .df-product-stock.is-check { color: #10120b !important; background: #d9bd5c !important; }

.df-page .df-product-body {
  min-height: 118px !important;
  padding: 11px 18px 13px !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse at 92% 30%, transparent 0 26px, rgba(116,153,149,.045) 27px 28px, transparent 29px 52px, rgba(116,153,149,.032) 53px 54px, transparent 55px),
    linear-gradient(180deg, #0a1617 0%, #081213 100%) !important;
}

.df-page .df-product-eyebrow {
  color: #839995 !important;
  font-family: var(--df-font-display) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .035em !important;
}

.df-page .df-product-body h3 {
  margin: 6px 0 5px !important;
  color: #eef5f3 !important;
  font-family: var(--df-font-display) !important;
  font-size: clamp(18px, 1.45vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
}

.df-page .df-product-body p {
  color: #a1b3af !important;
  font-family: var(--df-font-ui) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
}

.df-page .df-product-price {
  color: var(--df-frame-yellow) !important;
  font-family: var(--df-font-display) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.df-page .df-product-detail-link {
  color: var(--df-frame-green) !important;
  font-family: var(--df-font-display) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* News cards: same armory frame language --------------------------------- */
.df-page .df-news-item {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  border: 1px solid var(--df-frame-line) !important;
  border-top-color: var(--df-frame-line-strong) !important;
  border-radius: 0 !important;
  background: #091415 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.18) !important;
}

.df-page .df-news-item-wrap {
  position: relative;
  height: 100%;
  overflow: hidden !important;
  background: #091415;
  box-shadow: inset 0 0 0 1px rgba(151,190,187,.045);
}

.df-page .df-news-item-wrap > img {
  outline: 1px solid rgba(149, 186, 183, .13);
  outline-offset: -7px;
  filter: saturate(.90) contrast(1.045) brightness(.96) !important;
}

.df-page .df-news-item-list .df-news-item-wrap {
  grid-template-columns: 42% 58% !important;
}

.df-page .df-news-item-list .df-news-info {
  border-left: 1px solid rgba(111,148,146,.25);
  background:
    radial-gradient(circle at 100% 100%, rgba(96,135,130,.07), transparent 38%),
    linear-gradient(180deg, #0b1718, #081314);
}

.df-page .df-news-item-feature .df-news-info {
  border-top: 1px solid rgba(111,148,146,.24);
  background: linear-gradient(180deg, rgba(7,17,18,.04), rgba(7,17,18,.15));
}

.df-page .df-news-date {
  color: #899d99 !important;
  font-family: var(--df-font-display) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .065em !important;
}

.df-page .df-news-title {
  color: #edf4f2 !important;
  font-family: var(--df-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
}

.df-page .df-news-summary {
  color: #a3b5b1 !important;
  font-family: var(--df-font-ui) !important;
  font-weight: 400 !important;
}

.df-page .df-news-read-more {
  color: var(--df-frame-green) !important;
  font-family: var(--df-font-display) !important;
  font-weight: 600 !important;
}

.df-page .df-news-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(71, 226, 185, .60) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.26) !important;
}

/* News detail image gets the same technical frame. */
.df-page .df-news-detail {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  border: 1px solid var(--df-frame-line) !important;
  border-top-color: var(--df-frame-line-strong) !important;
  border-radius: 0 !important;
  background: #091415 !important;
}

.df-page .df-news-detail-image {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--df-frame-line) !important;
  background: #071011 !important;
}

.df-page .df-news-detail-image::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 7px;
  pointer-events: none;
  border: 1px solid rgba(149,186,183,.12);
}

.df-page .df-news-detail-image img {
  filter: saturate(.92) contrast(1.04) brightness(.97);
}

.df-page .df-news-detail-copy h2,
.df-page .df-news-sidebar h2,
.df-page .df-news-related strong {
  font-family: var(--df-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}

@media (max-width: 700px) {
  .df-page .df-product-grid { gap: 29px; }
  .df-page .df-product-card::before,
  .df-page .df-news-item::before,
  .df-page .df-news-detail::before { width: 54%; }
  .df-page .df-product-body { min-height: 116px !important; padding: 11px 16px 13px !important; }
}


/* ==========================================================================\n   DELTA FORCE TYPOGRAPHY + OFFICIAL FRAME VARIABLES V5\n   Applied from the browser-computed styles supplied by the user.\n   NOTE: Garena's .36rem depends on its own dynamic root rem scale, so this\n   project keeps its existing responsive font sizes and copies the family,\n   smoothing and text-size-adjust behavior instead.\n   ========================================================================== */
:root {
  --df-font-ui: "Chakra Petch", "Noto Sans TC", "Kanit", Arial, "Droid Sans", sans-serif;
  --df-font-display: "Chakra Petch", "Noto Sans TC", "Kanit", Arial, "Droid Sans", sans-serif;
  --df-garena-bg-pc: url("https://web.df.garena.com/02_h5/240923_official_website/vi/pc/bg_02.jpg");
  --df-garena-bg-mb: url("https://web.df.garena.com/02_h5/240923_official_website/vi/mb/bg_02.jpg");
  --df-garena-news-frame-pc: url("https://web.df.garena.com/02_h5/240923_official_website/vi/pc/news_item.png");
  --df-garena-news-pinned: url("https://web.df.garena.com/02_h5/240923_official_website/vi/pc/news_pinned.png");
  --df-garena-news-frame-mb: url("https://web.df.garena.com/02_h5/240923_official_website/vi/mb/news_item.png");
}

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.df-page,
.df-page *,
.df-page button,
.df-page input,
.df-page select,
.df-page textarea,
.df-page table {
  font-family: "Chakra Petch", "Noto Sans TC", "Kanit", Arial, "Droid Sans", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Preserve weight hierarchy while using one coherent Delta Force family stack. */
.df-page h1,
.df-page h2,
.df-page h3,
.df-page h4,
.df-page strong,
.df-page b,
.df-page .brand-copy,
.df-page .main-nav a,
.df-page .button,
.df-page .df-product-body h3,
.df-page .df-product-price,
.df-page .df-product-stock,
.df-page .df-news-title,
.df-page .df-news-read-more {
  font-family: "Chakra Petch", "Noto Sans TC", "Kanit", Arial, "Droid Sans", sans-serif !important;
}

/* Keep the exact CSS custom properties visible in DevTools, matching Garena's source. */
.df-page .df-news-section,
.df-page .df-news-item,
.df-page .df-product-card {
  --62b00f08: var(--df-garena-bg-pc);
  --62b00eaa: var(--df-garena-bg-mb);
  --7cbbb161: var(--df-garena-news-frame-pc);
  --700274f1: var(--df-garena-news-pinned);
  --7cbbb103: var(--df-garena-news-frame-mb);
}

/* Official Garena frame asset as a background layer, with the V4 CSS frame kept as fallback. */
.df-page .df-news-item,
.df-page .df-product-card {
  background-image: var(--7cbbb161), linear-gradient(180deg, #0a1617 0%, #081314 100%) !important;
  background-position: center, center !important;
  background-size: 100% 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 700px) {
  .df-page .df-news-item,
  .df-page .df-product-card {
    background-image: var(--7cbbb103), linear-gradient(180deg, #0a1617 0%, #081314 100%) !important;
  }
}

/* ========================================================================== 
   ACCOUNT + NEWS CARD FRAME V6
   Goal: keep the original product/news artwork untouched; only reproduce the
   thin technical border, Delta typography and dark contour-map info panel.
   ========================================================================== */
.df-page {
  --df-v6-line: rgba(126, 165, 162, .46);
  --df-v6-line-strong: rgba(151, 191, 187, .66);
  --df-v6-green: #19f0a5;
  --df-v6-yellow: #ffd42a;
  --df-v6-panel: #091314;
  --df-v6-panel-deep: #071112;
}

/* Do NOT use the Garena news frame PNG over the whole card. It can change the
   visual area behind the real artwork. The original account image remains the
   product.image configured in catalog/admin. */
.df-page .df-product-card,
.df-page .df-news-item {
  background-image: none !important;
  background-color: var(--df-v6-panel) !important;
  border: 1px solid var(--df-v6-line) !important;
  border-top-color: var(--df-v6-line-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Narrow technical rail above the upper-left edge, as in the reference. */
.df-page .df-product-card::before,
.df-page .df-news-item::before,
.df-page .df-news-detail::before {
  top: -9px !important;
  left: -1px !important;
  width: min(50%, 215px) !important;
  height: 7px !important;
  border-top: 1px solid rgba(151,191,187,.42) !important;
  border-left: 1px solid rgba(151,191,187,.26) !important;
  background:
    repeating-linear-gradient(90deg, rgba(151,191,187,.21) 0 2px, transparent 2px 4px),
    linear-gradient(90deg, rgba(151,191,187,.10), transparent 90%) !important;
  clip-path: polygon(0 0, 89% 0, 93% 45%, 100% 45%, 100% 100%, 0 100%) !important;
  opacity: .92 !important;
}

/* Small lower-right corner cut. */
.df-page .df-product-card::after,
.df-page .df-news-item::after,
.df-page .df-news-detail::after {
  width: 20px !important;
  height: 20px !important;
  right: -1px !important;
  bottom: -1px !important;
  background:
    linear-gradient(to left, var(--df-v6-line-strong) 0 1px, transparent 1px) top right/100% 8px no-repeat,
    linear-gradient(to top, var(--df-v6-line-strong) 0 1px, transparent 1px) bottom right/8px 100% no-repeat !important;
  opacity: .95 !important;
}

.df-page .df-product-rail,
.df-page .df-news-rail {
  top: -8px !important;
  left: 7px !important;
  height: 7px !important;
  max-width: 42% !important;
  color: rgba(172, 201, 198, .30) !important;
  font: 600 6px/7px "Chakra Petch", "Noto Sans TC", "Kanit", Arial, sans-serif !important;
  letter-spacing: .095em !important;
}

/* ACCOUNT ARTWORK: explicitly preserve the configured source image. */
.df-page .df-product-media {
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--df-v6-line) !important;
  background: #050b0c !important;
  overflow: hidden !important;
}
.df-page .df-product-media::before {
  content: none !important;
}
.df-page .df-product-media::after {
  content: none !important;
  background: none !important;
}
.df-page .df-product-media img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  transition: none !important;
}
.df-page .df-product-card:hover .df-product-media img {
  filter: none !important;
  transform: none !important;
}

/* Text panel: the reference uses a nearly black green panel with faint
   topographic contour lines. This asset is local, so it also works offline. */
.df-page .df-product-body {
  min-height: 128px !important;
  padding: 10px 18px 12px !important;
  border: 0 !important;
  background:
    url("card-topography.svg") right center / 62% 100% no-repeat,
    linear-gradient(180deg, #0a1516 0%, #071112 100%) !important;
}
.df-page .df-product-body::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .24 !important;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(123,160,157,.05) 17.1% 17.25%, transparent 17.4% 100%),
    linear-gradient(0deg, transparent 0 72%, rgba(123,160,157,.045) 72.1% 72.25%, transparent 72.4% 100%) !important;
}
.df-page .df-product-body > * { position: relative !important; z-index: 1 !important; }

.df-page .df-product-eyebrow {
  color: #80918e !important;
  font-family: "Chakra Petch", "Noto Sans TC", "Kanit", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}
.df-page .df-product-body h3 {
  margin: 6px 0 5px !important;
  color: #f0f4f3 !important;
  font-family: "Chakra Petch", "Noto Sans TC", "Kanit", Arial, sans-serif !important;
  font-size: clamp(18px, 1.45vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
  text-transform: uppercase !important;
}
.df-page .df-product-body p {
  margin: 0 !important;
  color: #a0afac !important;
  font-family: "Chakra Petch", "Noto Sans TC", "Kanit", Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  -webkit-line-clamp: 2 !important;
}
.df-page .df-product-bottom {
  margin-top: auto !important;
  padding-top: 11px !important;
  border-top: 0 !important;
}
.df-page .df-product-price {
  color: var(--df-v6-yellow) !important;
  font: 700 15px/1 "Chakra Petch", "Noto Sans TC", "Kanit", Arial, sans-serif !important;
  letter-spacing: -.02em !important;
}
.df-page .df-product-detail-link {
  color: var(--df-v6-green) !important;
  font: 600 10px/1.2 "Chakra Petch", "Noto Sans TC", "Kanit", Arial, sans-serif !important;
}
.df-page .df-product-stock {
  left: 10px !important;
  bottom: 9px !important;
  min-height: 23px !important;
  padding: 4px 8px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--df-v6-green) !important;
  color: #06110e !important;
  box-shadow: none !important;
  font: 700 9px/1 "Chakra Petch", "Noto Sans TC", "Kanit", Arial, sans-serif !important;
}
.df-page .df-product-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(109, 183, 168, .68) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.20) !important;
}

/* NEWS: retain each original news image with no tint/filter; only its frame and
   text panel are restyled to match the same card language. */
.df-page .df-news-item-wrap {
  overflow: hidden !important;
  background: var(--df-v6-panel) !important;
}
.df-page .df-news-item-wrap > img {
  opacity: 1 !important;
  filter: none !important;
  outline: none !important;
  mix-blend-mode: normal !important;
}
.df-page .df-news-item-list .df-news-info,
.df-page .df-news-item-feature .df-news-info {
  background:
    url("card-topography.svg") right center / 64% 100% no-repeat,
    linear-gradient(180deg, #0a1516 0%, #071112 100%) !important;
}
.df-page .df-news-item-list .df-news-info {
  border-left: 1px solid var(--df-v6-line) !important;
}
.df-page .df-news-item-feature .df-news-info {
  border-top: 1px solid var(--df-v6-line) !important;
}
.df-page .df-news-title,
.df-page .df-news-date,
.df-page .df-news-summary,
.df-page .df-news-read-more {
  font-family: "Chakra Petch", "Noto Sans TC", "Kanit", Arial, "Droid Sans", sans-serif !important;
}
.df-page .df-news-title { color: #f0f4f3 !important; font-weight: 700 !important; }
.df-page .df-news-date { color: #81948f !important; font-size: 10px !important; }
.df-page .df-news-summary { color: #a0afac !important; font-size: 11px !important; }
.df-page .df-news-read-more { color: var(--df-v6-green) !important; }
.df-page .df-news-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(109, 183, 168, .68) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.20) !important;
}

/* News detail image also stays untouched. */
.df-page .df-news-detail-image::before { content: none !important; }
.df-page .df-news-detail-image img { opacity: 1 !important; filter: none !important; }
.df-page .df-news-detail-copy {
  background:
    url("card-topography.svg") right top / 55% auto no-repeat,
    linear-gradient(180deg, #0a1516, #071112) !important;
}

@media (max-width: 700px) {
  .df-page .df-product-body { min-height: 122px !important; padding: 10px 14px 12px !important; }
  .df-page .df-product-body h3 { font-size: 18px !important; }
}




/* ========================================================================== 
   DELTA FORCE OFFICIAL BG + FRAME OVERRIDE V9
   User requested:
   1) use official EN bg_02.jpg as blurred page background
   2) use official EN news_item.png as the outer frame for account/news cards
   3) keep the original account artwork size and image source
   ========================================================================== */
:root {
  --df-garena-bg-pc: url("https://web.df.garena.com/02_h5/240923_official_website/en/pc/bg_02.jpg");
  --df-garena-bg-mb: url("https://web.df.garena.com/02_h5/240923_official_website/en/mb/bg_02.jpg");
  --df-garena-news-frame-pc: url("https://web.df.garena.com/02_h5/240923_official_website/en/pc/news_item.png");
  --df-garena-news-frame-mb: url("https://web.df.garena.com/02_h5/240923_official_website/en/mb/news_item.png");
}

.df-page {
  position: relative;
  isolation: isolate;
  background: #04101a !important;
}

.df-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 10, 15, .76) 0%, rgba(3, 10, 16, .86) 100%),
    var(--df-garena-bg-pc) center top / cover no-repeat;
  opacity: .58;
  filter: blur(5px);
  transform: scale(1.05);
}

@media (max-width: 700px) {
  .df-page::before {
    background:
      linear-gradient(180deg, rgba(2, 10, 15, .76) 0%, rgba(3, 10, 16, .86) 100%),
      var(--df-garena-bg-mb) center top / cover no-repeat;
  }
}

.df-page > .topline,
.df-page > .site-header,
.df-page > main,
.df-page > .site-footer {
  position: relative;
  z-index: 1;
}

/* Transparent content sections so the blurred official background shows behind. */
.df-page .df-content-section,
.df-page .df-news-section,
.df-page .df-service-section,
.df-page .df-gift-section,
.df-page .df-news-detail-layout,
.df-page .df-section-alt {
  background: transparent !important;
}

/* Keep the original acc image size. */
.df-page .df-product-media {
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
}

.df-page .df-product-media img,
.df-page .df-news-item-wrap > img,
.df-page .df-news-detail-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Use the official news_item.png as an outer technical frame, without replacing the real image. */
.df-page .df-product-card,
.df-page .df-news-item,
.df-page .df-news-detail {
  position: relative !important;
  overflow: visible !important;
  background-color: rgba(6, 17, 19, .92) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.df-page .df-product-card::before,
.df-page .df-news-item::before,
.df-page .df-news-detail::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  background: var(--df-garena-news-frame-pc) center / 100% 100% no-repeat !important;
  opacity: 1 !important;
  clip-path: none !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
}

@media (max-width: 700px) {
  .df-page .df-product-card::before,
  .df-page .df-news-item::before,
  .df-page .df-news-detail::before {
    background: var(--df-garena-news-frame-mb) center / 100% 100% no-repeat !important;
  }
}

/* Disable the custom lower-right cut because the official frame already defines the border shape. */
.df-page .df-product-card::after,
.df-page .df-news-item::after,
.df-page .df-news-detail::after {
  content: none !important;
}

/* The frame needs some breathing room around the image and text panel. */
.df-page .df-product-card,
.df-page .df-news-item {
  padding: 3px !important;
}

.df-page .df-news-detail {
  padding: 4px !important;
}

.df-page .df-product-media,
.df-page .df-news-item-wrap,
.df-page .df-news-detail-image,
.df-page .df-news-detail-copy,
.df-page .df-product-body {
  position: relative;
  z-index: 1;
}

.df-page .df-product-body,
.df-page .df-news-item-list .df-news-info,
.df-page .df-news-item-feature .df-news-info,
.df-page .df-news-detail-copy {
  background:
    linear-gradient(180deg, rgba(6, 17, 19, .90) 0%, rgba(5, 15, 17, .97) 100%),
    url("card-topography.svg") right center / 62% 100% no-repeat !important;
}

/* Keep titles readable within the frame. */
.df-page .df-product-body h3,
.df-page .df-news-title {
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* ========================================================================== 
   V10 - MATCH ORIGINAL GARENA LAYERING
   bg_02.jpg = background of the dark content area.
   news_item.png = background of each complete card; image/text sit above it.
   ========================================================================== */
:root {
  --df-garena-bg-pc: url("https://web.df.garena.com/02_h5/240923_official_website/en/pc/bg_02.jpg");
  --df-garena-bg-mb: url("https://web.df.garena.com/02_h5/240923_official_website/en/mb/bg_02.jpg");
  --df-garena-news-frame-pc: url("https://web.df.garena.com/02_h5/240923_official_website/en/pc/news_item.png");
  --df-garena-news-frame-mb: url("https://web.df.garena.com/02_h5/240923_official_website/en/mb/news_item.png");
}

/* V9 used a blurred fixed pseudo background. Remove it completely. */
.df-page::before { content: none !important; }

/* Garena uses bg_02 directly on the section: background-position center,
   background-size 100% auto, with content rendered above it. */
.df-page main {
  background-color: #000 !important;
  background-image: var(--df-garena-bg-pc) !important;
  background-repeat: repeat-y !important;
  background-position: 50% 0 !important;
  background-size: 100% auto !important;
}

/* Child sections must not paint an opaque navy layer over bg_02. */
.df-page main .df-content-section,
.df-page main .df-news-section,
.df-page main .df-service-section,
.df-page main .df-gift-section,
.df-page main .df-news-detail-layout,
.df-page main .df-section-alt,
.df-page main section:not(.page-hero):not(.home-hero) {
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 700px) {
  .df-page main {
    background-image: var(--df-garena-bg-mb) !important;
    background-size: 100% auto !important;
  }
}

/* news_item.png is the CARD BACKGROUND, not a border overlay.
   The actual account/news image and information are normal children placed on top. */
.df-page .df-product-card,
.df-page .df-news-item,
.df-page .df-news-detail {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: var(--df-garena-news-frame-pc) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
}

@media (max-width: 700px) {
  .df-page .df-product-card,
  .df-page .df-news-item,
  .df-page .df-news-detail {
    background-image: var(--df-garena-news-frame-mb) !important;
  }
}

/* Disable all custom pseudo-frame pieces from earlier versions. */
.df-page .df-product-card::before,
.df-page .df-product-card::after,
.df-page .df-news-item::before,
.df-page .df-news-item::after,
.df-page .df-news-detail::before,
.df-page .df-news-detail::after {
  content: none !important;
  display: none !important;
}

.df-page .df-product-rail,
.df-page .df-news-rail { display: none !important; }

/* Content must sit over news_item.png. */
.df-page .df-product-media,
.df-page .df-product-body,
.df-page .df-news-item-wrap,
.df-page .df-news-info,
.df-page .df-news-detail-image,
.df-page .df-news-detail-copy {
  position: relative !important;
  z-index: 1 !important;
}

/* Keep original acc artwork, preserve 16:9 card media ratio. */
.df-page .df-product-media {
  aspect-ratio: 16 / 9 !important;
  margin: 3px 3px 0 !important;
  width: calc(100% - 6px) !important;
  border: 0 !important;
  background: transparent !important;
}
.df-page .df-product-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Text block remains inside the same PNG background instead of drawing a second card. */
.df-page .df-product-body {
  margin: 0 3px 3px !important;
  min-height: 128px !important;
  background: transparent !important;
}
.df-page .df-product-body::before { content: none !important; }

/* News cards use the same layering: banner + text on top of news_item.png. */
.df-page .df-news-item-wrap {
  margin: 3px !important;
  background: transparent !important;
  overflow: hidden !important;
}
.df-page .df-news-item-list .df-news-info,
.df-page .df-news-item-feature .df-news-info,
.df-page .df-news-detail-copy {
  background: transparent !important;
  border-color: transparent !important;
}
.df-page .df-news-item-wrap > img,
.df-page .df-news-detail-image img {
  filter: none !important;
  opacity: 1 !important;
  object-fit: cover !important;
}

/* A little padding keeps text off the decorative edge of the PNG. */
.df-page .df-news-item-feature .df-news-info { padding-left: 22px !important; padding-right: 22px !important; }
.df-page .df-news-item-list .df-news-info { padding-right: 18px !important; }

/* Don't tint the official background in light theme. */
html[data-theme="light"] .df-page main {
  background-color: #000 !important;
  background-image: var(--df-garena-bg-pc) !important;
}


/* ========================================================================== 
   V11 - BALANCED BACKGROUND + CARD CONTENT ALIGNMENT
   Fixes requested by user:
   - remove ugly background split / seam feeling
   - make text sit in a cleaner position relative to frame background
   - reduce account image height slightly so the outer frame stays visible
   ========================================================================== */

/* Make the dark textured bg_02 feel like one continuous canvas instead of
   a repeated cut section. Use a full-cover desktop background with subtle
   dark overlay so the page reads more evenly. */
.df-page main {
  background-color: #000 !important;
  background-image:
    linear-gradient(180deg, rgba(2, 10, 14, .18) 0%, rgba(2, 10, 14, .28) 100%),
    var(--df-garena-bg-pc) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 50% 0, 50% 0 !important;
  background-size: cover, cover !important;
  background-attachment: fixed, fixed !important;
}

@media (max-width: 700px) {
  .df-page main {
    background-image:
      linear-gradient(180deg, rgba(2, 10, 14, .20) 0%, rgba(2, 10, 14, .30) 100%),
      var(--df-garena-bg-mb) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: 50% 0, 50% 0 !important;
    background-size: cover, cover !important;
    background-attachment: scroll, scroll !important;
  }
}

/* Let internal hero sections blend with the continuous bg instead of forming
   a hard dark band that visually cuts the page. */
.df-page .page-hero:not(.home-hero) {
  min-height: 250px !important;
  border-bottom: 0 !important;
  background:
    linear-gradient(180deg, rgba(4, 12, 18, .66) 0%, rgba(4, 12, 18, .26) 56%, rgba(4, 12, 18, 0) 100%) !important;
}

.df-page .page-hero:not(.home-hero)::before {
  content: none !important;
}

.df-page .page-hero:not(.home-hero) .page-hero-copy {
  padding-top: 56px !important;
  padding-bottom: 30px !important;
}

/* Reduce artwork height a little and create a cleaner inset so the card frame
   remains visible around the image. */
.df-page .df-product-media {
  aspect-ratio: 16 / 8.35 !important;
  margin: 6px 6px 0 !important;
  width: calc(100% - 12px) !important;
}

.df-page .df-product-body {
  margin: 0 6px 6px !important;
  min-height: 136px !important;
  padding: 12px 16px 14px !important;
}

/* Align the text block more naturally inside the lower panel area. */
.df-page .df-product-eyebrow {
  margin-top: 1px !important;
  font-size: 10px !important;
  letter-spacing: .028em !important;
}

.df-page .df-product-body h3 {
  margin: 6px 0 7px !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.028em !important;
}

.df-page .df-product-body p {
  font-size: 11px !important;
  line-height: 1.42 !important;
}

.df-page .df-product-bottom {
  margin-top: auto !important;
  padding-top: 10px !important;
  align-items: flex-end !important;
}

.df-page .df-product-price {
  font-size: 15px !important;
  line-height: 1 !important;
}

.df-page .df-product-detail-link {
  font-size: 10px !important;
  line-height: 1 !important;
  align-self: flex-end !important;
  margin-bottom: 1px !important;
}

/* Slightly better badge placement with the shorter image area. */
.df-page .df-product-stock {
  left: 12px !important;
  bottom: 12px !important;
}

/* News cards: clean the text placement so it sits better in the frame. */
.df-page .df-news-item-feature .df-news-info {
  padding: 24px 24px 22px !important;
}

.df-page .df-news-item-list .df-news-info {
  padding: 14px 16px 13px !important;
}

.df-page .df-news-date {
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

.df-page .df-news-title {
  margin-top: 7px !important;
  line-height: 1.08 !important;
}

.df-page .df-news-summary {
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

.df-page .df-news-read-more {
  margin-top: 13px !important;
}

@media (max-width: 700px) {
  .df-page .df-product-media {
    aspect-ratio: 16 / 8.6 !important;
    margin: 5px 5px 0 !important;
    width: calc(100% - 10px) !important;
  }

  .df-page .df-product-body {
    margin: 0 5px 5px !important;
    min-height: 130px !important;
    padding: 11px 14px 13px !important;
  }

  .df-page .df-product-body h3 {
    font-size: 16px !important;
  }

  .df-page .df-product-body p {
    font-size: 10.5px !important;
  }
}


/* ==========================================================================
   V15 - ACCOUNT FRAME + READABLE SMALL TEXT
   The reference artwork stops at about 212px, even when the card is wider.
   Restore the technical rail above the frame and keep its edges visible.
   ========================================================================== */
.df-page .df-product-grid {
  align-items: stretch !important;
}

.df-page .df-product-card {
  display: grid !important;
  grid-template-rows: auto minmax(102px, 1fr) !important;
  height: 100% !important;
  overflow: visible !important;
}

.df-page .df-product-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 5 !important;
  top: -8px !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 96px !important;
  height: 6px !important;
  border-top: 1px solid rgba(155, 193, 188, .55) !important;
  border-left: 1px solid rgba(155, 193, 188, .33) !important;
  background: repeating-linear-gradient(90deg, rgba(155, 193, 188, .26) 0 2px, transparent 2px 5px) !important;
  clip-path: polygon(0 0, 86% 0, 91% 50%, 100% 50%, 100% 100%, 0 100%) !important;
  pointer-events: none !important;
}

.df-page .df-product-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 5 !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid rgba(145, 184, 178, .43) !important;
  background: none !important;
  clip-path: none !important;
  pointer-events: none !important;
}

.df-page .df-product-media {
  width: calc(100% - 4px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 212px !important;
  aspect-ratio: 16 / 9 !important;
  margin: 2px 2px 0 !important;
  border-bottom: 1px solid rgba(145, 184, 178, .45) !important;
}

.df-page .df-product-stock {
  left: 11px !important;
  bottom: 8px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

.df-page .df-product-body {
  justify-content: flex-start !important;
  min-height: 102px !important;
  margin: 0 2px 2px !important;
  padding: 8px 20px 9px !important;
}

.df-page .df-product-eyebrow {
  margin: 0 !important;
  color: #b5cbc4 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 12px !important;
  letter-spacing: .025em !important;
}

.df-page .df-product-body h3 {
  margin: 4px 0 !important;
  font-size: 17px !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
}

.df-page .df-product-body p {
  min-height: 0 !important;
  margin: 0 !important;
  color: #c7d7d1 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  -webkit-line-clamp: 2 !important;
}

.df-page .df-product-bottom {
  align-items: flex-end !important;
  margin-top: auto !important;
  padding-top: 2px !important;
}

.df-page .df-product-price {
  font-size: 15px !important;
  line-height: 1 !important;
}

.df-page .df-product-detail-link {
  align-self: flex-end !important;
  margin-bottom: 1px !important;
  margin-right: -10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

/* Secondary copy throughout the storefront: stronger ink and one to two
   extra pixels, without changing the display headings or large prices. */
.df-page {
  --muted: #bdccdb;
  --muted-2: #a6bacb;
}
html[data-theme="light"] .df-page {
  --muted: #496075;
  --muted-2: #596f83;
}

.df-page .topline,
.df-page .eyebrow,
.df-page .page-hero-meta span,
.df-page .df-hero-corner,
.df-page .df-hero-showcase-meta span,
.df-page .df-feature-copy small,
.df-page .df-product-label,
.df-page .df-product-id,
.df-page .df-product-meta,
.df-page .df-service-code,
.df-page .df-service-body small,
.df-page .df-info-card span,
.df-page .df-gift-stats span,
.df-page .df-console-head,
.df-page .df-console-line,
.df-page .df-console-box small,
.df-page .df-news-date,
.df-page .df-news-related span,
.df-page .df-news-related em,
.df-page .modal-art-label {
  font-size: 11px !important;
  font-weight: 700 !important;
}
.df-page .df-news-date {
  color: #c0d3cb !important;
}

.df-page .df-section-head p,
.df-page .df-feature-copy p,
.df-page .df-info-card p,
.df-page .df-gift-card p,
.df-page .df-service-body p,
.df-page .df-service-note,
.df-page .df-news-summary,
.df-page .modal-content > p,
.df-page .contact-modal > p {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
}
.df-page .df-news-summary {
  color: #c5d5d0 !important;
}

.df-page .df-result,
.df-page .df-tab,
.df-page .df-mini-button,
.df-page .df-link-arrow,
.df-page .df-news-read-more,
.df-page .footer-links,
.df-page .footer-bottom,
.df-page .modal-specs,
.df-page .df-console-box p,
.df-page .df-search-sort input,
.df-page .df-search-sort select {
  font-size: 12px !important;
  font-weight: 600 !important;
}
.df-page .df-search-sort input::placeholder {
  color: #acbfca !important;
  opacity: 1 !important;
}

@media (max-width: 560px) {
  .df-page .df-product-body { padding-inline: 16px !important; }
  .df-page .df-product-body h3 { font-size: 16px !important; }
}

/* The fallback is shown only when its image fails. The authored display:grid
   above otherwise overrides the browser's default display:none for [hidden]. */
.df-page [hidden] { display: none !important; }

.df-page .df-service-media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Giftcode: replace the decorative queue widget with an editable photo frame. */
.df-page .df-gift-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 2.08;
  min-height: 285px;
  padding: 10px;
  border: 1px solid var(--blue);
  background: #081626;
  box-shadow: var(--shadow), 0 0 0 8px rgba(46, 114, 255, .08);
}
.df-page .df-gift-photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(105, 165, 255, .28);
  pointer-events: none;
}
.df-page .df-gift-photo > img,
.df-page .df-gift-photo > iframe,
.df-page .df-gift-photo-placeholder {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}
.df-page .df-gift-photo > img {
  display: block;
  object-fit: cover;
  object-position: center;
  background: #0d1e2e;
}
.df-page .df-gift-photo > iframe {
  display: block;
  border: 0;
  background: #0a1827;
}
.df-page .df-gift-video-unmute {
  position: absolute;
  inset: 10px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 14px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: #fff;
}
.df-page .df-gift-video-unmute span {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  background: rgba(5,16,30,.87);
  font-size: 13px;
  font-weight: 700;
}
.df-page .df-gift-video-source {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  padding: 5px 8px;
  border-radius: 3px;
  background: rgba(5,16,30,.82);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.df-page .df-gift-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: #bdd1e6;
  text-align: center;
  background: radial-gradient(circle at 50% 48%, rgba(46, 114, 255, .12), transparent 65%), #0a1827;
}
.df-page .df-gift-photo-placeholder svg { width: 35px; height: 35px; fill: none; stroke: #7fadff; stroke-width: 1.6; }
.df-page .df-gift-photo-placeholder strong { color: #e4f0ff; font: 700 16px "Chakra Petch", sans-serif; letter-spacing: .05em; }
.df-page .df-gift-photo-placeholder span { font-size: 12px; font-weight: 600; }

@media (max-width: 560px) {
  .df-page .df-gift-photo { min-height: 0; aspect-ratio: 16 / 10; }
}

/* Catalog navigation, shared by the account and service lists. */
.df-page .df-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.df-page .df-page-button {
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  background: var(--panel);
  font: 700 14px "Chakra Petch", sans-serif;
}
.df-page .df-page-button:hover,
.df-page .df-page-button.is-current {
  border-color: var(--blue-bright);
  color: #fff;
  background: var(--blue);
}
.df-page .df-page-button:disabled { opacity: .48; cursor: default; }
.df-page .df-page-dots { min-width: 20px; color: var(--muted); text-align: center; }
.df-page .df-result,
.df-page .df-service-grid { scroll-margin-top: 90px; }
.df-page .topline a span[data-gift-summary] { margin-left: 0; font-size: inherit; }

/* Phone layout: roomy controls, readable cards and a menu that stays accessible. */
@media (max-width: 800px) {
  .df-page > .site-header { position: sticky !important; top: 0; z-index: 40 !important; }
  .df-page .main-nav {
    top: calc(100% + 1px);
    left: 12px;
    right: 12px;
    z-index: 50;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    border-radius: 6px;
  }
  .df-page .main-nav a { display: flex; align-items: center; min-height: 46px; font-size: 14px; }
  .df-page .menu-toggle,
  .df-page #theme-toggle { min-width: 44px; min-height: 44px; }
}

@media (max-width: 700px) {
  .df-page .shell { width: min(100% - 34px, 620px); }
  .df-page .nav-row { min-height: 64px; gap: 12px; }
  .df-page .df-content-section,
  .df-page .df-news-section { padding-block: 45px !important; }
  .df-page .page-hero:not(.home-hero) { min-height: 0 !important; }
  .df-page .page-hero:not(.home-hero) .page-hero-copy { padding: 43px 0 31px !important; }
  .df-page .page-hero h1 { font-size: clamp(36px, 10vw, 54px); line-height: 1.1; }
  .df-page .hero-ribbon { display: none; }
  .df-page .df-section-head { margin-bottom: 20px; }
  .df-page .df-section-head h2 { font-size: clamp(28px, 8vw, 38px); }
  .df-page .df-product-grid,
  .df-page .df-service-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .df-page .df-product-card { height: auto !important; }
  .df-page .df-product-media { max-height: none !important; aspect-ratio: 16 / 9 !important; }
  .df-page .df-product-body { min-height: 0 !important; padding: 12px 16px 15px !important; }
  .df-page .df-product-body h3 { font-size: 18px !important; line-height: 1.2 !important; }
  .df-page .df-product-body p { font-size: 12px !important; line-height: 1.5 !important; }
  .df-page .df-product-bottom { margin-top: 14px !important; padding-top: 12px !important; }
  .df-page .df-product-detail-link { min-height: 42px; display: inline-flex; align-items: center; margin-right: 0 !important; }
  .df-page .df-service-body .button { min-height: 44px; }
  .df-page .df-gift-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .df-page .df-gift-copy h2 { font-size: clamp(33px, 8.7vw, 49px); line-height: 1.12; }
  .df-page .df-catalog-controls { align-items: stretch; }
  .df-page .df-tabs { gap: 8px; }
  .df-page .df-tab { min-height: 44px; font-size: 12px !important; }
  .df-page .df-search-sort input,
  .df-page .df-search-sort select { min-height: 46px; font-size: 16px !important; }
  .df-page .df-search-sort input { width: 100%; }
  .df-page .df-gift-card strong { white-space: normal; }
  .df-page .floating-zalo { bottom: calc(14px + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
  .df-page .home-hero .page-hero-copy { padding: 45px 0 28px; }
  .df-page .home-hero h1 { font-size: clamp(35px, 10vw, 45px); }
  .df-page .home-hero p { margin-top: 14px; }
  .df-page .df-hero-showcase { margin-bottom: 37px; }
  .df-page .hero-action-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .df-page .hero-action-row .button { min-height: 46px; width: 100%; }
  .df-page .df-gift-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .df-page .df-gift-stats div { min-width: 0; padding: 12px 10px; }
  .df-page .df-gift-stats div:last-child { display: none; }
  .df-page .df-gift-stats span { font-size: 11px !important; }
  .df-page .df-gift-photo.is-video { aspect-ratio: 4 / 5; max-height: 620px; }
  .df-page .df-gift-video-unmute { padding: 10px; }
  .df-page .df-gift-video-unmute span { font-size: 12px; }
  .df-page .df-pagination { gap: 6px; margin-top: 23px; }
  .df-page .df-page-button { min-width: 42px; min-height: 44px; padding-inline: 9px; }
  .df-page .footer-links { gap: 9px 15px; }
  .df-page .product-modal { max-height: calc(100dvh - 24px); overflow-y: auto; }
}

/* V21: use the supplied shop wordmark and a tactical green storefront header. */
.df-page .site-header {
  border-bottom-color: rgba(67, 231, 162, .27);
  background: #0c191f;
  backdrop-filter: none;
}
.df-page .nav-row { min-height: 91px; }
.df-page .brand { line-height: 0; }
.df-page .site-logo { display: block; width: 221px; max-width: 100%; height: auto; mix-blend-mode: lighten; }
.df-page .topline { background: #050d10; border-color: rgba(67, 231, 162, .2); }
.df-page .topline b,
.df-page .topline a { color: #a5f7c5; }
.df-page .main-nav a.current,
.df-page .main-nav a:hover { color: #eafff2; }
.df-page .main-nav a { color: #bed9cb; }
.df-page .main-nav a.active { color: #eafff2; }
.df-page .main-nav a::after { background: #34ed9b; }
.df-page .site-header .icon-button { background: #112724; border-color: rgba(88, 234, 156, .3); color: #e4f7ed; }
.df-page .nav-actions .button-blue { background: #1fdc8d; border-color: #1fdc8d; color: #041a11 !important; }
.df-page .site-footer { border-color: rgba(81, 227, 148, .26); background: #0c191f; }
.df-page .footer-top { border-color: rgba(81, 227, 148, .22); }
.df-page .footer-links { color: #c0dcca; }
.df-page .footer-links button,
.df-page .footer-links a:hover { color: #4bef9e; }
.df-page .footer-bottom { color: #acc5b6; }
.df-page .site-footer .site-logo { width: 239px; }

/* Carry the command-deck palette into the homepage catalog below. */
.df-page[data-page="home"] {
  --blue: #20d986;
  --blue-bright: #58f0a3;
  --line: rgba(89, 188, 139, .33);
  --df-frame-line: rgba(91, 205, 146, .48);
  --df-frame-line-strong: rgba(121, 239, 166, .68);
}
.df-page[data-page="home"] .df-content-section,
.df-page[data-page="home"] .df-news-section { border-bottom-color: rgba(94, 196, 145, .32); }
.df-page[data-page="home"] .df-section-head,
.df-page[data-page="home"] .df-news-heading { padding-bottom: 17px; border-bottom: 1px solid rgba(89, 195, 143, .28); }
.df-page[data-page="home"] .eyebrow,
.df-page[data-page="home"] .df-link-arrow { color: #66f5aa; }
.df-page[data-page="home"] .df-news-title-block h2::after { background: #33e893; box-shadow: 0 0 18px rgba(47, 236, 153, .42); }
.df-page[data-page="home"] .df-news-filters .df-tab.active { color: #062519; }
.df-page[data-page="home"] .df-service-card,
.df-page[data-page="home"] .df-info-card { border-color: rgba(99, 212, 151, .4); background: rgba(7, 22, 22, .89); }
.df-page[data-page="home"] .df-service-card:hover { border-color: #55ec9f; }
.df-page[data-page="home"] .df-gift-photo { border-color: #37e892; box-shadow: 0 0 0 7px rgba(37, 219, 128, .08); }
.df-page[data-page="home"] .df-gift-photo::after { border-color: rgba(109, 241, 167, .35); }
.df-page[data-page="home"] .df-gift-photo-placeholder svg { stroke: #70f2b0; }
.df-page[data-page="home"] .df-content-section .button-blue { color: #072318 !important; }

/* Home command deck. The focal point is a two-line headline and live catalog. */
.df-page .home-hero {
  --hero-green: #3af2a0;
  --hero-line: rgba(112, 245, 180, .36);
  min-height: 680px;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--hero-line);
  background:
    linear-gradient(90deg, rgba(1, 8, 10, .99) 0%, rgba(1, 9, 12, .93) 38%, rgba(1, 10, 13, .67) 100%),
    url("https://web.df.garena.com/02_h5/240923_official_website/vi/pc/bg_01.jpg") center / cover no-repeat !important;
  color: #f2fff7;
}
.df-page .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .26;
  background-image:
    linear-gradient(rgba(54, 255, 153, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 255, 153, .16) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, #000, transparent 95%);
  pointer-events: none;
}
.df-page .home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 75% 45%, rgba(28, 232, 139, .12), transparent 38%);
  pointer-events: none;
}
.df-page .home-hero-shell {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(32px, 5vw, 70px);
}
.df-page .home-hero .page-hero-copy { min-width: 0; max-width: none; padding: 66px 0 77px; }
.df-hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--hero-line);
  background: rgba(10, 33, 29, .75);
  color: #d7f8e5;
  font: 700 10px "Chakra Petch", sans-serif;
  letter-spacing: .09em;
}
.df-hero-status-dot,
.df-hero-live i {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--hero-green);
  box-shadow: 0 0 11px var(--hero-green);
}
.df-hero-status strong { color: var(--hero-green); font-weight: 700; }
.df-hero-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  color: #a2c6ae;
  font: 700 11px "Chakra Petch", sans-serif;
  letter-spacing: .18em;
}
.df-hero-index > span:first-child { color: var(--hero-green); }
.df-hero-index i { width: 34px; height: 1px; background: var(--hero-green); }
.df-page .home-hero h1.df-hero-heading {
  display: grid;
  gap: 3px;
  margin: 15px 0 0;
  color: #f7fff9;
  font: 700 clamp(43px, 5.4vw, 76px) / .95 "Chakra Petch", sans-serif;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.df-hero-heading-line { display: block; width: fit-content; max-width: 100%; white-space: nowrap; text-shadow: none !important; }
.df-page .home-hero h1 .df-hero-heading-green {
  color: #a4ffd1;
  background: linear-gradient(95deg, #f0fff4 0%, #54f0a9 67%, #1ee488 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.df-page .home-hero h1 .df-hero-heading-period { -webkit-text-fill-color: #31fa9e; }
.df-hero-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 12px;
  width: fit-content;
  margin-top: 24px;
  padding: 9px 13px 9px 12px;
  border-left: 3px solid var(--hero-green);
  background: linear-gradient(90deg, rgba(39, 233, 138, .18), rgba(39, 233, 138, 0));
  color: #ddfdec;
  font: 700 11px "Chakra Petch", sans-serif;
  letter-spacing: .09em;
}
.df-hero-strip span + span::before { content: "/"; margin-right: 12px; color: #43e69c; }
.df-page .home-hero .df-hero-lead {
  max-width: 475px;
  margin-top: 23px;
  color: #c8dcd3;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}
.df-hero-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.df-hero-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(92, 186, 139, .4);
  background: rgba(4, 29, 20, .65);
  color: #a7efc8;
  font: 700 10px "Chakra Petch", sans-serif;
  letter-spacing: .06em;
}
.df-page .home-hero .hero-action-row { gap: 11px; margin-top: 27px; }
.df-page .home-hero .hero-action-row .button {
  min-height: 50px;
  padding: 11px 17px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.df-page .home-hero .hero-action-row .button-blue { border-color: #26e993; background: #26e993; color: #082318 !important; }
.df-page .home-hero .hero-action-row .button-outline { border-color: rgba(73, 223, 143, .53); background: rgba(4, 19, 18, .74); color: #f1fff5; }
.df-page .home-hero .hero-action-row .button:hover { filter: brightness(1.13); }
.df-hero-reassurance {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 25px;
  color: #99bdb0;
  font: 700 10px "Chakra Petch", sans-serif;
  letter-spacing: .1em;
}
.df-hero-reassurance-bar { width: 28px; height: 2px; background: var(--hero-green); }

.df-page .df-hero-showcase {
  width: 100%;
  max-width: 625px;
  padding: 12px;
  border: 1px solid rgba(87, 237, 163, .58);
  background: rgba(5, 18, 19, .91);
  box-shadow: 0 0 0 6px rgba(31, 248, 133, .045), 0 24px 65px rgba(0, 0, 0, .48);
}
.df-page .df-hero-showcase::before { inset: 5px; border-color: rgba(137, 255, 183, .31); }
.df-hero-showcase-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 8px 12px;
  color: #9cc6b2;
  font: 700 10px "Chakra Petch", sans-serif;
  letter-spacing: .12em;
}
.df-hero-live { display: inline-flex; align-items: center; gap: 7px; color: #54f4a3; white-space: nowrap; }
.df-page .df-hero-showcase-image {
  min-height: 0;
  aspect-ratio: 1.54;
  border-color: rgba(113, 253, 180, .37);
  background: #071c1b;
}
.df-page .df-hero-showcase-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  filter: saturate(.9) contrast(1.08);
}
.df-page .df-hero-showcase-image::after {
  background: linear-gradient(180deg, rgba(2, 11, 11, .4) 0%, transparent 36%, rgba(1, 9, 11, .93) 100%);
}
.df-page .df-hero-corner { color: #d6f6e2; }
.df-page .df-hero-corner.top-right { color: #55f3a4; }
.df-page .df-hero-corner.bottom-left { color: #b0f7d0; }
.df-hero-scan {
  position: absolute;
  z-index: 1;
  top: 28%;
  right: 14%;
  width: 100px;
  aspect-ratio: 1;
  border: 1px solid rgba(97, 245, 173, .55);
  border-radius: 50%;
  box-shadow: 0 0 0 23px rgba(65, 231, 152, .06), 0 0 0 46px rgba(65, 231, 152, .03);
  opacity: .8;
  pointer-events: none;
}
.df-hero-scan::before,
.df-hero-scan::after { content: ""; position: absolute; background: rgba(114, 246, 177, .72); }
.df-hero-scan::before { width: 1px; height: 36px; top: 31px; left: 49px; }
.df-hero-scan::after { height: 1px; width: 36px; top: 49px; left: 31px; }
.df-page .df-hero-showcase-title { left: 24px; bottom: 56px; }
.df-page .df-hero-showcase-title small { color: #76f7b5; font-size: 11px; }
.df-page .df-hero-showcase-title strong {
  margin-top: 8px;
  color: #fff;
  font: 700 clamp(30px, 3.3vw, 48px) / .95 "Chakra Petch", sans-serif;
  letter-spacing: -.035em;
}
.df-page .df-hero-showcase-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; border-color: rgba(91, 238, 161, .32); }
.df-page .df-hero-showcase-meta a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 64px;
  padding: 12px 10px;
  border-right: 1px solid rgba(91, 238, 161, .27);
  color: #e4fff0;
  font: 700 10px "Chakra Petch", sans-serif;
  letter-spacing: .03em;
}
.df-page .df-hero-showcase-meta a:last-child { border-right: 0; }
.df-page .df-hero-showcase-meta a span { min-width: 0; padding: 0; color: inherit; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit; white-space: nowrap; }
.df-page .df-hero-showcase-meta a:hover,
.df-page .df-hero-showcase-meta a:focus-visible { background: rgba(53, 239, 143, .12); }
.df-page .df-hero-showcase-meta b { margin: 0; color: #54f4a3; font-size: 12px; }
.df-page .df-hero-showcase-meta em { color: #54f4a3; font-size: 15px; font-style: normal; }
.df-hero-ground {
  position: absolute;
  z-index: 1;
  right: max(32px, calc((100vw - 1220px) / 2));
  bottom: 18px;
  display: flex;
  gap: 32px;
  color: #b4d6bf;
  font: 700 10px "Chakra Petch", sans-serif;
  letter-spacing: .13em;
}

@media (max-width: 1100px) {
  .df-page .site-logo { width: 191px; }
  .df-page .home-hero-shell { gap: 30px; }
  .df-page .home-hero h1.df-hero-heading { font-size: clamp(40px, 5.2vw, 67px); }
  .df-page .df-hero-showcase-meta a { grid-template-columns: auto 1fr; }
  .df-page .df-hero-showcase-meta em { display: none; }
}
@media (max-width: 980px) {
  .df-page .home-hero-shell { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .df-page .home-hero .page-hero-copy { max-width: 700px; padding: 65px 0 35px; }
  .df-page .df-hero-showcase { justify-self: start; margin: 0 0 70px; }
  .df-page .home-hero h1.df-hero-heading { font-size: clamp(44px, 7vw, 72px); }
}
@media (max-width: 700px) {
  .df-page .nav-row { min-height: 68px; }
  .df-page .site-logo { width: 172px; }
  .df-page .main-nav { background: #0c191f; border-color: rgba(91, 238, 161, .36); }
  .df-page .home-hero { min-height: 0; }
  .df-page .home-hero .page-hero-copy { padding: 44px 0 25px !important; }
  .df-page .home-hero h1.df-hero-heading { font-size: clamp(37px, 8.9vw, 60px); }
  .df-hero-index { margin-top: 28px; }
  .df-hero-strip { margin-top: 19px; }
  .df-page .home-hero .df-hero-lead { margin-top: 18px; font-size: 14px; line-height: 1.6; }
  .df-page .home-hero .hero-action-row { margin-top: 22px; }
  .df-page .df-hero-showcase { max-width: 100%; margin-bottom: 48px; }
  .df-hero-ground { display: none; }
}
@media (max-width: 480px) {
  .df-page .site-logo { width: 155px; }
  .df-page .home-hero h1.df-hero-heading { font-size: clamp(34px, 9.2vw, 45px); letter-spacing: -.075em; }
  .df-hero-status { gap: 6px; font-size: 9px; }
  .df-hero-status strong { display: none; }
  .df-hero-index { font-size: 9px; }
  .df-hero-strip { gap: 0 8px; font-size: 10px; }
  .df-hero-strip span + span::before { margin-right: 8px; }
  .df-hero-chips span { font-size: 9px; }
  .df-hero-reassurance { font-size: 9px; letter-spacing: 0; }
  .df-page .df-hero-showcase { padding: 8px; }
  .df-hero-showcase-head { padding: 5px 5px 9px; font-size: 9px; }
  .df-page .df-hero-showcase-image { aspect-ratio: 1.16; }
  .df-page .df-hero-showcase-title { left: 13px; bottom: 41px; }
  .df-page .df-hero-showcase-title strong { font-size: clamp(27px, 8vw, 39px); }
  .df-page .df-hero-corner.top-left { top: 13px; left: 13px; }
  .df-page .df-hero-corner.top-right { top: 13px; right: 13px; }
  .df-page .df-hero-corner.bottom-left { bottom: 13px; left: 13px; }
  .df-hero-scan { width: 70px; top: 31%; right: 17%; }
  .df-hero-scan::before { height: 25px; top: 22px; left: 34px; }
  .df-hero-scan::after { width: 25px; top: 34px; left: 22px; }
  .df-page .df-hero-showcase-meta a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 61px; padding: 8px 5px; font-size: 9px; }
}
@media (max-width: 370px) {
  .df-page .site-logo { width: 139px; }
  .df-page .home-hero h1.df-hero-heading { font-size: 33px; }
  .df-page .df-hero-showcase-head { font-size: 8px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: no-preference) {
  .df-hero-status-dot,
  .df-hero-live i { animation: df-hero-pulse 2.8s ease-in-out infinite; }
}
@keyframes df-hero-pulse {
  50% { opacity: .55; box-shadow: 0 0 3px #36f4a0; }
}

/* V22: keep Vietnamese marks inside each headline line. Text gradients clipped
   the accent on CHIẾN when the old .95 line-height squeezed the glyph box. */
.df-page .home-hero h1.df-hero-heading {
  gap: 0;
  line-height: 1.14;
}
.df-page .home-hero h1 .df-hero-heading-green {
  padding-block: .075em .04em;
  color: #6af2ad;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #6af2ad;
}

/* News cards used a stretched product-frame PNG whose baked divider cut
   across text. Draw the frame with CSS and let each image/text pane size itself. */
.df-page .df-news-item,
.df-page .df-news-detail {
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(121, 211, 158, .53) !important;
  background: #0a1819 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22) !important;
}
.df-page .df-news-item:hover { border-color: #65e6a1 !important; }
.df-page .df-news-item-wrap {
  height: 100%;
  margin: 0 !important;
  overflow: hidden !important;
  background: #0a1819 !important;
}
.df-page .df-news-item-wrap::after { content: none !important; }
.df-page .df-news-image-fallback:not([hidden]) { display: block; }
.df-page .df-news-list { grid-auto-rows: minmax(218px, 1fr); }
.df-page .df-news-item-list .df-news-item-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%) !important;
  align-items: stretch;
  min-height: 218px;
}
.df-page .df-news-item-list .df-news-item-wrap > img,
.df-page .df-news-item-list .df-news-image-fallback {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}
.df-page .df-news-item-feature .df-news-item-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  min-height: 0 !important;
}
.df-page .df-news-item-feature .df-news-item-wrap > img,
.df-page .df-news-item-feature .df-news-image-fallback {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1.82;
  flex: none;
  object-fit: cover !important;
}
.df-page .df-news-item-list .df-news-info,
.df-page .df-news-item-feature .df-news-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #0c1b1b !important;
}
.df-page .df-news-item-list .df-news-info {
  align-self: stretch;
  padding: 18px 19px !important;
  border-left: 1px solid rgba(112, 209, 155, .34) !important;
}
.df-page .df-news-item-feature .df-news-info {
  flex: 1;
  min-height: 175px;
  padding: 24px 25px !important;
  border-top: 1px solid rgba(112, 209, 155, .34) !important;
}
.df-page .df-news-title {
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}
.df-page .df-news-summary { line-height: 1.55 !important; }
.df-page .df-news-read-more { margin-top: auto !important; padding-top: 14px; }
.df-page .df-news-detail-image { border-bottom: 1px solid rgba(112, 209, 155, .34) !important; }
.df-page .df-news-detail-copy {
  padding: 27px 29px 31px !important;
  border: 0 !important;
  background: #0b191a !important;
}
.df-page .df-news-detail-copy h2 { line-height: 1.17; overflow-wrap: anywhere; }
.df-page .df-news-detail-summary { line-height: 1.65; }
.df-page .df-news-sidebar {
  align-self: start;
  border-color: rgba(112, 209, 155, .34);
  background: #0b191a;
}
.df-page .df-news-sidebar h2 { line-height: 1.18; }

@media (max-width: 980px) {
  .df-page .df-news-detail-layout .df-news-sidebar { order: initial; }
}
@media (max-width: 560px) {
  .df-page .df-news-item-list .df-news-item-wrap {
    display: flex !important;
    flex-direction: column;
    min-height: 0;
  }
  .df-page .df-news-item-list .df-news-item-wrap > img,
  .df-page .df-news-item-list .df-news-image-fallback {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
  .df-page .df-news-item-list .df-news-info {
    padding: 18px 18px 19px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(112, 209, 155, .34) !important;
  }
  .df-page .df-news-item-feature .df-news-info { min-height: 0; padding: 20px !important; }
  .df-page .df-news-detail-copy { padding: 22px 20px 27px !important; }
}


/* ==========================================================================\n   V23 - SERVICE INFO TEXTURE + SOCIAL FOOTER\n   ========================================================================== */
.df-page .df-service-body {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #09191d !important;
  background-image:
    linear-gradient(180deg, rgba(5,16,18,.10), rgba(5,16,18,.24)),
    url("service-info-topography.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: 100% 100%, 100% 100% !important;
  border-top: 1px solid rgba(79, 232, 158, .18);
}
.df-page .df-service-body > * { position: relative; z-index: 1; }

.footer-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; }
.footer-socials { display: flex; align-items: center; gap: 8px; }
.footer-social {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(84, 225, 151, .34); border-radius: 50%;
  color: #d9f8e7; background: rgba(8, 28, 29, .78);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.footer-social:hover { transform: translateY(-2px); border-color: #4bef9e; color: #061c12; background: #4bef9e; }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }
.footer-social-zalo { border-radius: 10px; }
.footer-social-zalo span { font: 800 10px/1 "Chakra Petch", sans-serif; letter-spacing: -.04em; }

@media (max-width: 760px) {
  .footer-right { width: 100%; justify-content: flex-start; gap: 14px; }
  .footer-socials { width: 100%; }
}


/* ==========================================================================
   V24 - TOPOGRAPHY BACKGROUND FOR TEXT PANELS
   User request: use the provided topo texture image inside the text/info boxes
   (news cards, news detail, account cards, service cards) with full fit and no overflow.
   ========================================================================== */
.df-page .df-product-body,
.df-page .df-service-body,
.df-page .df-news-item-list .df-news-info,
.df-page .df-news-item-feature .df-news-info,
.df-page .df-news-detail-copy,
.df-page .df-news-sidebar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #09191d !important;
  background-image:
    linear-gradient(180deg, rgba(5,16,18,.10), rgba(5,16,18,.24)),
    url("service-info-topography.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: 100% 100%, 100% 100% !important;
}
.df-page .df-product-body > *,
.df-page .df-service-body > *,
.df-page .df-news-item-list .df-news-info > *,
.df-page .df-news-item-feature .df-news-info > *,
.df-page .df-news-detail-copy > *,
.df-page .df-news-sidebar > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   V25 - NEWS ONLY TOPOGRAPHY BACKGROUND
   Correction: apply the topo texture only to News text panels.
   ========================================================================== */
.df-page .df-product-body {
  background: transparent !important;
}
.df-page .df-service-body {
  background: #09191d !important;
  background-image: none !important;
}
.df-page .df-product-body > *,
.df-page .df-service-body > * {
  position: relative;
  z-index: 1;
}
.df-page .df-news-item-list .df-news-info,
.df-page .df-news-item-feature .df-news-info,
.df-page .df-news-detail-copy,
.df-page .df-news-sidebar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #09191d !important;
  background-image:
    linear-gradient(180deg, rgba(5,16,18,.10), rgba(5,16,18,.24)),
    url("service-info-topography.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: 100% 100%, 100% 100% !important;
}
.df-page .df-news-item-list .df-news-info > *,
.df-page .df-news-item-feature .df-news-info > *,
.df-page .df-news-detail-copy > *,
.df-page .df-news-sidebar > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   V26 - RESTORE SERVICE TOPO + ADD NEWS TOPO ONLY
   Correct scope:
   - Keep the existing topo image in Service text panels (same as v23).
   - Add the same topo image to News text panels.
   - Do NOT add topo to account/product text panels.
   ========================================================================== */

/* Account/product cards: keep previous non-topo styling. */
.df-page .df-product-body {
  background: transparent !important;
  background-image: none !important;
}

/* Service cards: restore the topo background that already existed in v23. */
.df-page .df-service-body {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #09191d !important;
  background-image:
    linear-gradient(180deg, rgba(5,16,18,.10), rgba(5,16,18,.24)),
    url("service-info-topography.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: 100% 100%, 100% 100% !important;
  border-top: 1px solid rgba(79, 232, 158, .18) !important;
}
.df-page .df-service-body > * {
  position: relative;
  z-index: 1;
}

/* News cards/detail/sidebar: add the same topo image only inside text boxes. */
.df-page .df-news-item-list .df-news-info,
.df-page .df-news-item-feature .df-news-info,
.df-page .df-news-detail-copy,
.df-page .df-news-sidebar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #09191d !important;
  background-image:
    linear-gradient(180deg, rgba(5,16,18,.10), rgba(5,16,18,.24)),
    url("service-info-topography.png") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: 100% 100%, 100% 100% !important;
}
.df-page .df-news-item-list .df-news-info > *,
.df-page .df-news-item-feature .df-news-info > *,
.df-page .df-news-detail-copy > *,
.df-page .df-news-sidebar > * {
  position: relative;
  z-index: 1;
}

/* V27 — Product detail gallery: preserve image ratio, support cover + 20 detail images. */
.df-page .product-modal {
  width: min(1160px, calc(100% - 28px));
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .75fr);
  max-height: min(94dvh, 900px);
  border-color: rgba(79, 219, 157, .28);
  background: #071317;
  box-shadow: 0 34px 110px rgba(0,0,0,.7), 0 0 0 1px rgba(62,214,151,.06) inset;
}
.df-page .product-modal[open] { display: grid; }
.df-page .product-modal .modal-close {
  top: 14px;
  right: 14px;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(255,183,48,.72);
  border-radius: 8px;
  color: #d8e8e2;
  background: rgba(8,24,31,.94);
  box-shadow: 0 0 0 2px rgba(255,166,0,.08);
}
.df-page .product-modal .modal-close:hover {
  color: #fff;
  border-color: #34ed9b;
  background: #102b29;
}
.df-page .modal-product-art {
  min-width: 0;
  min-height: 620px;
  padding: 22px;
  display: block;
  overflow: hidden;
  border-right: 1px solid rgba(79,219,157,.18);
  background:
    linear-gradient(rgba(71,229,166,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71,229,166,.035) 1px, transparent 1px),
    radial-gradient(circle at 70% 18%, rgba(46,114,255,.17), transparent 32%),
    #061015;
  background-size: 28px 28px, 28px 28px, auto, auto;
}
.df-page .modal-product-art::before,
.df-page .modal-product-art::after { content: none !important; display: none !important; }
.df-page .modal-gallery-shell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.df-page .modal-gallery-stage {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(87,177,158,.32);
  background: #030a0e;
  box-shadow: 0 18px 50px rgba(0,0,0,.28) inset;
}
.df-page .modal-gallery-stage::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 1;
  border: 1px solid rgba(95,191,166,.12);
  pointer-events: none;
}
.df-page .modal-gallery-main {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 600px;
  min-height: 410px;
  object-fit: contain;
  object-position: center;
  background: #03090c;
}
.df-page .modal-gallery-meta {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 13px;
  right: 13px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  font-family: "Chakra Petch", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}
.df-page .modal-gallery-meta span,
.df-page .modal-gallery-meta strong {
  padding: 6px 9px;
  border: 1px solid rgba(91,205,166,.28);
  color: #cfe9df;
  background: rgba(3,14,18,.82);
  backdrop-filter: blur(5px);
}
.df-page .modal-gallery-meta strong { color: #ffd064; border-color: rgba(255,190,65,.34); }
.df-page .modal-gallery-nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 42px;
  height: 64px;
  transform: translateY(-50%);
  border: 1px solid rgba(86,198,164,.32);
  color: #eafbf4;
  background: rgba(3,14,18,.76);
  font: 400 38px/1 "Chakra Petch", sans-serif;
  backdrop-filter: blur(6px);
}
.df-page .modal-gallery-nav:hover { border-color: #34ed9b; background: rgba(11,43,38,.9); }
.df-page .modal-gallery-nav:disabled { opacity: 0; pointer-events: none; }
.df-page .modal-gallery-prev { left: 13px; }
.df-page .modal-gallery-next { right: 13px; }
.df-page .modal-gallery-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #2b6959 #071317;
  padding: 2px 2px 4px;
}
.df-page .modal-gallery-thumb {
  flex: 0 0 86px;
  width: 86px;
  height: 64px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(102,144,155,.3);
  border-radius: 4px;
  background: #071116;
  opacity: .66;
}
.df-page .modal-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #02070a;
}
.df-page .modal-gallery-thumb:hover { opacity: 1; border-color: #7aa8ff; }
.df-page .modal-gallery-thumb.is-current {
  opacity: 1;
  border-color: #34ed9b;
  box-shadow: 0 0 0 1px rgba(52,237,155,.26), 0 0 18px rgba(52,237,155,.1);
}
.df-page .modal-gallery-hint {
  color: #7fa49a;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.df-page .modal-gallery-empty {
  min-height: 500px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(95,191,166,.2);
}
.df-page .product-modal .modal-content {
  position: relative;
  padding: 58px 34px 30px;
  background:
    linear-gradient(180deg, rgba(21,53,65,.24), transparent 34%),
    #0a1b28;
}
.df-page .product-modal .modal-content::before {
  content: "PRODUCT FILE";
  position: absolute;
  top: 20px;
  left: 34px;
  color: rgba(89,223,165,.72);
  font: 700 9px "Chakra Petch", sans-serif;
  letter-spacing: .18em;
}
.df-page .product-modal .modal-content h2 {
  margin-top: 13px;
  font-size: clamp(27px, 3vw, 36px);
  line-height: 1.08;
}
.df-page .product-modal .modal-price {
  margin-top: 16px;
  color: #ffd064;
  font-size: 30px;
}
.df-page .product-modal .modal-specs {
  gap: 12px 18px;
  margin: 22px 0 18px;
  padding: 18px 0;
  border-color: rgba(83,153,174,.24);
}
.df-page .product-modal .modal-note {
  border-left-color: #34ed9b;
  background: rgba(26,61,82,.66);
}
.df-page .product-modal .full-button { margin-top: 18px; min-height: 47px; }

@media (max-width: 900px) {
  .df-page .product-modal { grid-template-columns: 1fr; width: min(760px, calc(100% - 20px)); }
  .df-page .product-modal[open] { display: block; }
  .df-page .modal-product-art { min-height: 0; padding: 14px; border-right: 0; border-bottom: 1px solid rgba(79,219,157,.18); }
  .df-page .modal-gallery-stage { aspect-ratio: 16 / 10; }
  .df-page .modal-gallery-main { min-height: 0; max-height: 58dvh; }
  .df-page .product-modal .modal-content { padding: 48px 24px 24px; }
  .df-page .product-modal .modal-content::before { left: 24px; }
}
@media (max-width: 560px) {
  .df-page .product-modal { width: calc(100% - 12px); max-height: calc(100dvh - 12px); border-radius: 4px; }
  .df-page .modal-product-art { padding: 9px; }
  .df-page .modal-gallery-stage { aspect-ratio: 1 / 1; }
  .df-page .modal-gallery-main { max-height: 52dvh; }
  .df-page .modal-gallery-thumb { flex-basis: 72px; width: 72px; height: 54px; }
  .df-page .modal-gallery-nav { width: 38px; height: 54px; font-size: 31px; }
  .df-page .modal-gallery-meta { top: 8px; left: 8px; right: 8px; }
  .df-page .modal-gallery-meta span { max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .df-page .product-modal .modal-content { padding: 46px 18px 20px; }
  .df-page .product-modal .modal-content::before { left: 18px; }
}