/* ShotLens AI design tokens v1.0 — nạp trước để phong_cach.css alias --pc-* về --sl-* */
@import url('/static/thuong_hieu/tokens/tokens.css?v=e053394673');

/* Chữ (chủ dự án chốt 24/10): Plus Jakarta Sans (SIL OFL 1.1, font biến thiên 200–800) cho tiêu đề + nội dung,
   gói sẵn trong static/fonts, không tải từ internet. Barlow/Chakra Petch giữ làm dự phòng. Chữ Hán dùng phông hệ thống (Noto Sans SC / Microsoft YaHei / PingFang SC). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/static/fonts/PlusJakartaSans-vietnamese.woff2?v=0bf2c2a04d') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/static/fonts/PlusJakartaSans-latin.woff2?v=a389d97de5') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/Barlow-400-vietnamese.woff2?v=486301dc68') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/Barlow-400-latin.woff2?v=4f0f26f139') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Barlow-500-vietnamese.woff2?v=1e8c9c20c7') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Barlow-500-latin.woff2?v=ad8e9490a9') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Barlow-600-vietnamese.woff2?v=b5e99b73d5') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Barlow-600-latin.woff2?v=800311e32d') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ChakraPetch-500-vietnamese.woff2?v=5c8b27c4ed') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ChakraPetch-500-latin.woff2?v=fd6f87a550') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ChakraPetch-600-vietnamese.woff2?v=a6bc279a29') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ChakraPetch-600-latin.woff2?v=cd2df6837d') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/ChakraPetch-700-vietnamese.woff2?v=fca8b4a798') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/ChakraPetch-700-latin.woff2?v=d09f6c2831') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   BỘ PHONG CÁCH DÙNG CHUNG — thiết kế V3 "thể thao – công nghệ, xanh than – cam"
   (TASK-149, LANE-C). Nền móng từ TASK-116, chuẩn thiết kế:
   docs/mau_giao_dien/BRA_AI_ban_mau_v3.html.
   - Cam cho hành động chính; xanh lơ cho số liệu phụ; hổ phách cho cảnh báo.
   - Chữ: Plus Jakarta Sans cho cả tiêu đề và nội dung (chốt 24/10, thay Chakra Petch/Barlow vì "giống người máy").
   - Giữ nguyên tên lớp .pc-* để các màn cũ vẫn chạy; thêm nhóm .v3-* cho màn mới.
   - prefers-reduced-motion: tắt chuyển động nặng.
   ========================================================================== */

/* ---- Tokens màu (tối là mặc định; chủ đề sáng chỉ khi có class .sang) ---- */
/* TASK-215: --pc-* là alias về --sl-* (ShotLens AI v1.0). Giữ tên cũ để không vỡ giao diện. */
:root {
  --pc-phu-nhan: var(--sl-info, #4FD1FF);
  --pc-phu-nhan-nen: rgba(var(--sl-info-rgb, 79, 209, 255), .12);
  --pc-chinh-rgb: var(--sl-accent-rgb, 255, 138, 61);
  --pc-overlay-rgb: var(--sl-bg-rgb, 11, 18, 32);
  --pc-khong-chac-rgb: var(--sl-uncertain-rgb, 138, 153, 181);
  --pc-nen:            var(--sl-bg, #0B1220);
  --pc-nen-the:        var(--sl-surface, #131D31);
  --pc-nen-the-2:      var(--sl-surface-2, #1A2640);
  --pc-nen-sau:        var(--sl-bg, #0B1220);
  --pc-nen-o:          var(--sl-bg, #0B1220);
  --pc-vien:           var(--sl-border, #22304B);
  --pc-vien-dam:       rgba(var(--sl-text-rgb, 138, 153, 181), .55);
  --pc-chu:            var(--sl-text, #E8EEF8);
  --pc-chu-mo:         var(--sl-text-muted, #8A99B5);
  --pc-chu-mo-2:       var(--sl-text-muted, #8A99B5);
  --pc-chu-trang:      #FFFFFF;
  --pc-chu-tren-chinh: var(--sl-on-accent, #0B1220);

  --pc-chinh:          var(--sl-accent, #FF8A3D);
  --pc-chinh-dam:      color-mix(in srgb, var(--sl-accent) 85%, white);
  --pc-chinh-nen:      rgba(var(--pc-chinh-rgb), .14);
  --pc-chinh-chu:      var(--sl-accent, #FF8A3D);
  --pc-vang-toi:       rgba(var(--pc-chinh-rgb), .55);

  --pc-phu:            var(--sl-surface-2, #1A2640);
  --pc-phu-sang:       rgba(var(--sl-text-rgb, 138, 153, 181), .22);

  --pc-thanh-cong:     var(--sl-success, #4ADE80);
  --pc-thanh-cong-nen: rgba(var(--sl-success-rgb, 74, 222, 128), .12);
  --pc-thanh-cong-chu: var(--sl-success, #4ADE80);

  --pc-canh-bao:       var(--sl-warning, #FFC53D);
  --pc-canh-bao-nen:   rgba(var(--sl-warning-rgb, 255, 197, 61), .12);
  --pc-canh-bao-chu:   var(--sl-warning, #FFC53D);

  --pc-loi:            var(--sl-danger, #FF6B6B);
  --pc-loi-nen:        rgba(var(--sl-danger-rgb, 255, 107, 107), .12);
  --pc-loi-chu:        var(--sl-danger, #FF6B6B);

  /* TASK-215: trạng thái "chưa chắc / chưa đủ dữ liệu" = xám xanh, không phải cảnh báo. */
  --pc-khong-chac:     var(--sl-uncertain, #8A99B5);
  --pc-khong-chac-nen: rgba(var(--sl-uncertain-rgb, 138, 153, 181), .12);
  --pc-khong-chac-chu: var(--sl-uncertain, #8A99B5);

  --pc-info:           var(--sl-info, #4FD1FF);
  --pc-info-nen:       rgba(var(--sl-info-rgb, 79, 209, 255), .12);

  /* ---- Bàn bi-a ---- */
  --pc-table-felt:     var(--sl-felt, #1F6B45);
  --pc-table-felt-light: color-mix(in srgb, var(--sl-felt) 85%, white);
  --pc-table-rail:     var(--sl-surface, #131D31);
  --pc-table-rail-light: var(--sl-accent, #FF8A3D);
  --pc-pocket-dark:    #000000;
  --pc-diamond:        rgba(var(--pc-chinh-rgb), .55);

  /* ---- Chữ ---- */
  --pc-font:           var(--sl-font, 'Plus Jakarta Sans', 'Barlow', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif);
  --pc-font-display:   var(--sl-font, 'Plus Jakarta Sans', 'Chakra Petch', 'Barlow', 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif);
  --pc-font-mono:      Consolas, "Courier New", monospace;
  --pc-size-display:   var(--sl-type-display, 800 48px/52px var(--pc-font));
  --pc-size-h1:        var(--sl-type-h1, 700 28px/36px var(--pc-font));
  --pc-size-h2:        var(--sl-type-h2, 700 22px/30px var(--pc-font));
  --pc-size-h3:        var(--sl-type-h3, 600 18px/26px var(--pc-font));
  --pc-size-body: var(--sl-size-body);
  --pc-size-nho: var(--sl-size-small);
  --pc-size-caption: var(--sl-size-caption);
  --pc-size-nhan:      var(--pc-size-body);
  --pc-size-tieu-de:   28px;
  --pc-size-tieu-de-2: 22px;
  --pc-line-height:    1.45;
  --pc-text-min:       var(--sl-text-min, 12px);

  /* ---- Khoảng cách ---- */
  --pc-gap-1:  var(--sl-space-1);
  --pc-gap-2:  var(--sl-space-2);
  --pc-gap-3:  var(--sl-space-3);
  --pc-gap-4:  var(--sl-space-4);
  --pc-gap-5:  var(--sl-space-6);

  /* ---- Bo góc ---- */
  --pc-radius:    var(--sl-radius-button, 12px);
  --pc-radius-sm: 8px;
  --pc-radius-lg: var(--sl-radius-card, 16px);
  --pc-radius-pill: var(--sl-radius-chip, 999px);

  /* ---- Kích thước chạm ---- */
  --pc-touch-min: 44px;
  --pc-btn-min-h: 48px;

  /* ---- Đổ bóng / chuyển động ---- */
  --pc-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  --pc-glow: 0 0 18px rgba(var(--pc-chinh-rgb), .35);
  --pc-transition: .2s ease;

  color-scheme: dark;
}

/* ---- Chủ đề sáng (chỉ khi người dùng chọn rõ: ?theme=sang) ---- */
/* App ShotLens AI luon toi. */

/* ---- Reset cơ bản ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

.pc-body {
  background: var(--pc-nen);
  color: var(--pc-chu);
  font-family: var(--pc-font);
  font-size: var(--pc-size-body);
  line-height: var(--pc-line-height);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

.pc-skip {
  position: absolute;
  left: -9999px;
}

h1, h2, h3, p { margin-top: 0; }
[hidden] { display: none !important; }

/* ---- Vùng chứa ---- */
.pc-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--pc-gap-4) var(--pc-gap-3);
}

@media (min-width: 1024px) {
  .pc-container {
    max-width: 960px;
    padding: var(--pc-gap-5) var(--pc-gap-4);
  }
}

/* ---- Đầu trang / điều hướng (các màn cũ) ---- */
.pc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pc-nen-sau);
  border-bottom: 1px solid var(--pc-vien);
}

.pc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-gap-2);
  padding: var(--pc-gap-2) var(--pc-gap-3);
}

.pc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pc-touch-min);
  min-height: var(--pc-touch-min);
  padding: 0 var(--pc-gap-3);
  border-radius: var(--pc-radius-sm);
  background: var(--pc-chinh);
  color: var(--pc-chu-tren-chinh);
  font-family: var(--pc-font-display);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}

.pc-nav {
  display: flex;
  align-items: center;
  gap: var(--pc-gap-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pc-nav a,
.pc-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pc-touch-min);
  padding: 0 var(--pc-gap-2);
  border-radius: var(--pc-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--pc-chu);
  font-size: var(--pc-size-nhan);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.pc-nav a:hover,
.pc-nav button:hover,
.pc-nav a[aria-current="page"] {
  background: var(--pc-nen-the-2);
}

.pc-nav .pc-active {
  background: var(--pc-chinh);
  color: var(--pc-chu-tren-chinh);
}

@media (max-width: 1023px) {
  .pc-nav a,
  .pc-nav button {
    padding: 0 10px;
    font-size: var(--pc-size-nho);
  }
}

/* ---- Chữ ---- */
.pc-title {
  font-family: var(--pc-font-display);
  font-size: var(--pc-size-tieu-de);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 var(--pc-gap-2);
}

.pc-title-2 {
  font-family: var(--pc-font-display);
  font-size: var(--pc-size-tieu-de-2);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--pc-gap-2);
}

.pc-title-3 {
  font-family: var(--pc-font-display);
  font-size: var(--pc-size-nhan);
  font-weight: 600;
  line-height: 1.3;
  margin: var(--pc-gap-2) 0 var(--pc-gap-1);
}

.pc-text-muted {
  color: var(--pc-chu-mo);
  font-size: var(--pc-size-nho);
}

.pc-lead {
  font-size: var(--pc-size-body);
  color: var(--pc-chu-mo);
  margin: 0 0 var(--pc-gap-4);
}

/* ---- Thẻ / card ---- */
.pc-card {
  background: linear-gradient(180deg, var(--pc-nen-the), var(--pc-nen-sau));
  border: 1px solid var(--pc-vien);
  border-radius: var(--pc-radius-lg);
  padding: var(--pc-gap-4);
  margin-bottom: var(--pc-gap-4);
}

html.sang .pc-card { background: var(--pc-nen-the); }

.pc-card-muted {
  background: var(--pc-nen-the-2);
}

.pc-card-highlight {
  border-color: var(--pc-chinh);
  box-shadow: var(--pc-shadow);
}

/* ---- Nút ---- */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pc-gap-1);
  min-height: var(--pc-btn-min-h);
  min-width: var(--pc-touch-min);
  padding: var(--pc-gap-1) var(--pc-gap-4);
  border-radius: 8px;
  border: 1px solid var(--pc-vien-dam);
  background: var(--pc-phu);
  color: var(--pc-chu);
  font-family: var(--pc-font-display);
  font-size: var(--pc-size-nhan);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition: filter var(--pc-transition), transform var(--pc-transition);
}

.pc-btn:hover { filter: brightness(1.1); }
.pc-btn:active { transform: translateY(1px); }
.pc-btn:focus-visible,
.v3-chip:focus-visible,
.v3-nav a:focus-visible,
.v3-xu:focus-visible,
.v3-iconbtn:focus-visible,
.v3-play:focus-visible,
.v3-sw:focus-visible,
.v3-pt:focus-visible,
.v3-svc:focus-visible,
.v3-pack:focus-visible,
.pc-input:focus-visible {
  outline: 2px solid var(--pc-chinh-chu);
  outline-offset: 2px;
}

.pc-btn-primary {
  background: var(--pc-chinh);
  border-color: var(--pc-chinh);
  color: var(--pc-chu-tren-chinh);
}

.pc-btn-ghost {
  background: transparent;
  border-color: var(--pc-vang-toi);
  color: var(--pc-chinh-chu);
}

.pc-btn-danger {
  background: var(--pc-loi-nen);
  border-color: var(--pc-loi);
  color: var(--pc-loi-chu);
}

.pc-btn[disabled] { opacity: .45; cursor: not-allowed; }

.pc-btn-block {
  display: flex;
  width: 100%;
}

.pc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-gap-2);
  margin: var(--pc-gap-3) 0;
}

.pc-btn-row .pc-btn {
  flex: 1 1 120px;
}

/* ---- Huy hiệu mức chắc ---- */
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-gap-1);
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--pc-radius-pill);
  font-size: var(--pc-size-nho);
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.pc-badge-chac {
  background: var(--pc-thanh-cong-nen);
  border-color: var(--pc-thanh-cong);
  color: var(--pc-thanh-cong-chu);
}

.pc-badge-kha {
  background: var(--pc-info-nen);
  border-color: var(--pc-info);
  color: var(--pc-chinh-chu);
}

.pc-badge-khong {
  background: var(--pc-khong-chac-nen);
  border: 1.5px dashed var(--pc-khong-chac);
  color: var(--pc-khong-chac-chu);
}

.pc-badge-mo {
  background: var(--pc-nen-the-2);
  border-color: var(--pc-vien-dam);
  color: var(--pc-chu-mo);
}

/* ---- Thanh tiến độ ---- */
.pc-progress {
  height: 10px;
  background: var(--pc-nen-the-2);
  border: 1px solid var(--pc-vien);
  border-radius: var(--pc-radius-pill);
  overflow: hidden;
}

.pc-progress > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--pc-chinh-dam), var(--pc-chinh-chu));
  transition: width .4s ease;
}

/* ---- Danh sách / lưới ---- */
.pc-list {
  display: flex;
  flex-direction: column;
  gap: var(--pc-gap-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pc-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-gap-3);
}

@media (min-width: 1024px) {
  .pc-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pc-item {
  display: flex;
  flex-direction: column;
  gap: var(--pc-gap-2);
  padding: var(--pc-gap-3);
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-vien);
  background: var(--pc-nen-the-2);
}

.pc-item-row {
  display: flex;
  align-items: center;
  gap: var(--pc-gap-2);
  flex-wrap: wrap;
}

.pc-list-compact {
  gap: var(--pc-gap-2);
}

.pc-list-compact .pc-item {
  padding: var(--pc-gap-2);
}

.pc-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ---- Trạng thái rỗng / lỗi / đang tải ---- */
.pc-empty,
.pc-error,
.pc-loading {
  text-align: center;
  padding: var(--pc-gap-5) var(--pc-gap-3);
  border-radius: var(--pc-radius-lg);
  border: 1px dashed var(--pc-vien-dam);
}

.pc-empty { background: var(--pc-nen-the); color: var(--pc-chu-mo); }
.pc-error { background: var(--pc-loi-nen); border-color: var(--pc-loi); color: var(--pc-loi-chu); }
.pc-loading { background: var(--pc-nen-the-2); border-color: var(--pc-vang-toi); color: var(--pc-chinh-chu); }

/* ---- Ô nhập ---- */
.pc-input {
  width: 100%;
  min-height: var(--pc-btn-min-h);
  padding: var(--pc-gap-2) var(--pc-gap-3);
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-vien-dam);
  background: var(--pc-nen-o);
  color: var(--pc-chu);
  font-size: var(--pc-size-body);
}

/* ---- Vùng tải lên ---- */
.pc-dropzone {
  border: 2px dashed var(--pc-vang-toi);
  border-radius: var(--pc-radius-lg);
  background: var(--pc-nen-the-2);
  padding: var(--pc-gap-5) var(--pc-gap-3);
  text-align: center;
  cursor: pointer;
}

.pc-dropzone-active {
  border-color: var(--pc-chinh);
  background: var(--pc-chinh-nen);
}

/* ---- Vùng chọn chế độ ---- */
.pc-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-gap-3);
}

@media (min-width: 1024px) {
  .pc-choice {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pc-choice-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pc-gap-1);
  min-height: 96px;
  padding: var(--pc-gap-3);
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-vien);
  background: var(--pc-nen-the-2);
  color: var(--pc-chu);
  cursor: pointer;
  text-align: center;
}

.pc-choice-item:hover { background: var(--pc-phu-sang); }
.pc-choice-item[aria-pressed="true"] {
  border-color: var(--pc-chinh);
  background: var(--pc-chinh-nen);
  color: var(--pc-chinh-chu);
}

/* ---- Gợi ý / chip (nhãn tĩnh) ---- */
.pc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--pc-radius-pill);
  border: 1px solid var(--pc-vang-toi);
  background: var(--pc-nen-the-2);
  color: var(--pc-chinh-chu);
  font-size: var(--pc-size-nho);
}

/* ---- Bảng nhỏ ---- */
.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pc-size-nho);
}

.pc-table th,
.pc-table td {
  padding: var(--pc-gap-2);
  border-top: 1px solid var(--pc-vien);
  text-align: left;
  vertical-align: top;
}

.pc-table th {
  color: var(--pc-chu-mo);
  font-weight: 600;
  border-top: 0;
}

/* ---- Tiện ích ---- */
.pc-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;
}

.pc-text-center { text-align: center; }
.pc-mb-0 { margin-bottom: 0; }
.pc-mb-1 { margin-bottom: var(--pc-gap-1); }
.pc-mb-2 { margin-bottom: var(--pc-gap-2); }
.pc-mb-3 { margin-bottom: var(--pc-gap-3); }
.pc-mt-2 { margin-top: var(--pc-gap-2); }

/* ---- Đảm bảo không tràn ngang trên điện thoại ---- */
img, video, svg, .pc-container { max-width: 100%; }

/* ==========================================================================
   TASK-135 — Sơ đồ bàn 2D (nhánh dự phòng) + màn Mô phỏng 3D
   ========================================================================== */

.pc-table-wrap {
  position: relative;
  width: 100%;
  background: var(--pc-nen-the-2);
  border: 1px solid var(--pc-vien);
  border-radius: var(--pc-radius);
  padding: var(--pc-gap-2);
  overflow: hidden;
}

.pc-table-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
}

.pc-table-rail {
  fill: var(--pc-table-rail);
  stroke: var(--pc-table-rail-light);
  stroke-width: 0.5;
}

.pc-table-surface {
  fill: var(--pc-table-felt);
  stroke: var(--pc-table-felt-light);
  stroke-width: 0.6;
}

.pc-table-diamonds {
  fill: var(--pc-diamond);
  pointer-events: none;
}

.pc-pocket {
  fill: var(--pc-pocket-dark);
  stroke: var(--pc-table-rail-light);
  stroke-width: 0.6;
}

.pc-ball {
  stroke: var(--pc-chu-trang);
  stroke-width: 0.5;
}

.pc-ball-cue {
  fill: var(--pc-chu-trang);
  stroke: var(--pc-vien-dam);
  stroke-width: 0.6;
}

.pc-ball-unknown {
  fill: transparent;
  stroke: var(--pc-khong-chac);
  stroke-width: 1.0;
  stroke-linecap: round;
  stroke-dasharray: .2 1.5;
}

.pc-ball-label {
  font-family: var(--pc-font);
  font-weight: 700;
  fill: var(--pc-chu-trang);
  pointer-events: none;
  user-select: none;
}

.pc-ball-unknown + .pc-ball-label { fill: var(--pc-chu-trang); }

.pc-bridge-zone {
  fill: rgba(255, 255, 255, .12);
  stroke: var(--pc-chu-trang);
  stroke-width: 0.8;
  stroke-dasharray: 1.2 1.0;
  opacity: .6;
}

.pc-path-observed {
  stroke-dasharray: none;
  stroke: var(--pc-chinh-chu);
  stroke-width: 1.1;
}

.pc-path-inferred {
  stroke: var(--pc-khong-chac-chu);
  stroke-width: 1.1;
  stroke-dasharray: 2.2 1.3;
}

.pc-path-ref { opacity: 0.85; }

.pc-table-rotate-btn {
  position: absolute;
  top: var(--pc-gap-2);
  right: var(--pc-gap-2);
  min-height: 44px;
  min-width: 44px;
  padding: 4px 10px;
  font-size: var(--pc-size-nho);
  z-index: 5;
  opacity: .9;
}

.pc-table-rotate-btn:hover { opacity: 1; }

.pc-table-note {
  margin: var(--pc-gap-2) 0 0;
  color: var(--pc-chu-mo);
  font-size: var(--pc-size-nho);
  text-align: center;
}

.pc-table-confidence {
  color: var(--pc-chu-mo);
  font-size: var(--pc-size-nho);
}

.pc-table-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pc-gap-2) var(--pc-gap-3);
  margin-top: var(--pc-gap-3);
  padding-top: var(--pc-gap-2);
  border-top: 1px dashed var(--pc-vien-dam);
}

.pc-table-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-gap-1);
  font-size: var(--pc-size-nho);
  color: var(--pc-chu-mo);
}

.pc-table-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.pc-legend-observed { background: var(--pc-chinh-chu); }

.pc-legend-inferred {
  background: repeating-linear-gradient(
    90deg,
    var(--pc-khong-chac-chu),
    var(--pc-khong-chac-chu) 5px,
    transparent 5px,
    transparent 8px
  );
  border: 1px dashed var(--pc-khong-chac-chu);
  height: 5px;
}

.pc-legend-unknown,
.pc-legend-bridge {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.pc-legend-unknown {
  border: 2px dashed var(--pc-chu-mo);
  background: transparent;
}

.pc-legend-bridge {
  border: 2px dashed var(--pc-chu-trang);
  background: rgba(255, 255, 255, .12);
}

.pc-table-tooltip {
  position: absolute;
  left: 50%;
  bottom: var(--pc-gap-2);
  transform: translateX(-50%);
  max-width: calc(100% - var(--pc-gap-4));
  padding: var(--pc-gap-2) var(--pc-gap-3);
  background: var(--pc-nen-sau);
  color: var(--pc-chu);
  border: 1px solid var(--pc-vien-dam);
  border-radius: var(--pc-radius-sm);
  font-size: var(--pc-size-nhan);
  line-height: 1.35;
  opacity: 0;
  transition: opacity var(--pc-transition);
  pointer-events: none;
  z-index: 10;
}

.pc-segmented {
  display: inline-flex;
  border: 1px solid var(--pc-vien);
  border-radius: var(--pc-radius);
  overflow: hidden;
}

.pc-segmented .pc-btn {
  min-width: 72px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: var(--pc-nen-the-2);
}

.pc-segmented .pc-btn + .pc-btn { border-left: 1px solid var(--pc-vien); }

.pc-segmented .pc-phase-active {
  background: var(--pc-chinh);
  color: var(--pc-chu-tren-chinh);
}

.pc-card-collapsible {
  padding: 0;
  overflow: hidden;
}

.pc-collapsible-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--pc-btn-min-h);
  padding: var(--pc-gap-2) var(--pc-gap-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-weight: 600;
}

.pc-collapsible-toggle span[aria-hidden] {
  font-size: var(--pc-size-tieu-de);
  line-height: 1;
  color: var(--pc-chinh);
}

.pc-collapsible-body {
  padding: 0 var(--pc-gap-4) var(--pc-gap-4);
  border-top: 1px solid var(--pc-vien);
  animation: pc-fade-in .2s ease;
}

@keyframes pc-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   V3 — KHUNG ỨNG DỤNG: đầu trang, thanh điều hướng dưới (5 mục), thành phần
   ========================================================================== */

body.v3 {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
body.v3.v3-chao { padding-bottom: 16px; }

.v3-app {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.v3-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-gap-2);
  padding: 12px 16px 8px;
  background: linear-gradient(180deg, var(--pc-nen) 70%, transparent);
}

.v3-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--pc-touch-min);
}

.v3-brand img {
  height: 28px;
  width: auto;
  min-width: 96px;
  max-width: 184px;
  display: block;
}

.v3-brand i { font-style: normal; color: var(--pc-chinh); }

.v3-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border-radius: 8px;
  background: var(--pc-chinh);
  flex: none;
}

.v3-mark svg {
  width: 16px;
  height: 16px;
  stroke: var(--pc-chu-tren-chinh);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v3-top-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.v3-xu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--pc-chu);
  background: var(--pc-nen-the-2);
  border: 1px solid var(--pc-vang-toi);
  border-radius: 22px;
  padding: 0 12px 0 8px;
  min-height: var(--pc-touch-min);
  font: 600 14px/1 var(--pc-font-display);
  font-variant-numeric: tabular-nums;
}

.v3-xu svg {
  width: 20px;
  height: 20px;
  stroke: var(--pc-chinh);
  fill: rgba(var(--pc-chinh-rgb), .16);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v3-xu b { font-weight: 700; color: var(--pc-chinh-chu); }
.v3-xu span { color: var(--pc-chu-mo); font-weight: 500; font-size: 14px; }
.v3-xu em {
  font-style: normal;
  font: 600 12px/1 var(--pc-font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-chu-tren-chinh);
  background: var(--pc-chinh);
  padding: 3px 5px;
  border-radius: 3px;
}
.v3-xu.pop { animation: v3-xupop .7s ease-out; }
@keyframes v3-xupop {
  0% { box-shadow: 0 0 0 0 rgba(var(--pc-chinh-rgb), .7); }
  100% { box-shadow: 0 0 0 14px rgba(var(--pc-chinh-rgb), 0); }
}

.v3-iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--pc-touch-min);
  height: var(--pc-touch-min);
  border-radius: 50%;
  border: 1px solid var(--pc-vien);
  background: var(--pc-nen-the);
  color: var(--pc-chu-mo);
  text-decoration: none;
}

.v3-iconbtn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v3-iconbtn[aria-current] { color: var(--pc-chinh); border-color: var(--pc-vang-toi); }

.v3-main {
  flex: 1;
  padding: 8px 16px 24px;
  display: grid;
  gap: 14px;
  align-content: start;
}

/* Thanh điều hướng dưới: 5 mục, nút giữa tròn vàng */
.v3-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 60;
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  border-top: 1px solid var(--pc-vien);
  background: var(--pc-nen);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.v3-nav a {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 2px 8px;
  color: var(--pc-chu-mo-2);
  font: 500 12px/1.1 var(--pc-font);
  text-decoration: none;
  min-height: 60px;
  text-align: center;
}

.v3-nav a[aria-current] { color: var(--pc-chinh); }

.v3-nav svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v3-nav .fab { color: var(--pc-chinh); padding-bottom: 8px; }

.v3-nav .fab span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pc-chinh);
  display: grid;
  place-items: center;
  margin-top: -20px;
  box-shadow: 0 0 0 4px var(--pc-nen), 0 6px 18px rgba(var(--pc-chinh-rgb), .35);
}

.v3-nav .fab svg { width: 24px; height: 24px; stroke: var(--pc-chu-tren-chinh); stroke-width: 2.4; }

/* Thẻ, tiêu đề */
.v3-h2 {
  font: 700 22px/1.1 var(--pc-font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
}

.v3-sub { color: var(--pc-chu-mo); font-size: 16px; margin: 4px 0 0; }
.v3-sub-strong { color: var(--pc-chu); }

.v3-card {
  background: linear-gradient(180deg, var(--pc-nen-the), var(--pc-nen-sau));
  border: 1px solid var(--pc-vien);
  border-radius: var(--pc-radius-lg);
  padding: 14px;
}

html.sang .v3-card { background: var(--pc-nen-the); }

.v3-sech {
  font: 700 14px/1 var(--pc-font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-chu-mo-2);
}

.v3-note { font-size: 14px; color: var(--pc-chu-mo-2); margin: 0; }

.v3-rise { animation: v3-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.v3-rise:nth-child(3) { animation-delay: .08s; }
.v3-rise:nth-child(4) { animation-delay: .16s; }
.v3-rise:nth-child(5) { animation-delay: .24s; }
.v3-rise:nth-child(6) { animation-delay: .32s; }
@keyframes v3-rise {
  from { opacity: .35; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Nút */
.v3-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: 700 14px/1.1 var(--pc-font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 18px;
  min-height: 48px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
}

.v3-btn.gold { background: var(--pc-chinh); color: var(--pc-chu-tren-chinh); }
.v3-btn.ghost { background: transparent; color: var(--pc-chinh-chu); border: 1px solid var(--pc-vang-toi); }
.v3-btn.full { width: 100%; }
.v3-btn[disabled] { opacity: .45; cursor: not-allowed; }
.v3-btn:focus-visible { outline: 2px solid var(--pc-chinh-chu); outline-offset: 2px; }

/* Nhãn "Dữ liệu mẫu" */
.v3-mau {
  display: inline-flex;
  align-items: center;
  width: max-content;
  font: 600 12px/1 var(--pc-font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pc-chu-tren-chinh);
  background: var(--pc-chinh);
  padding: 6px 8px;
  border-radius: 2px;
}

.v3-bar-mau {
  background: var(--pc-chinh);
  color: var(--pc-chu-tren-chinh);
  font: 600 12px/1.2 var(--pc-font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 12px;
}

/* Chip / nhóm chip (nút bật tắt) */
.v3-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.v3-chip {
  appearance: none;
  border: 1px solid var(--pc-vien);
  background: var(--pc-nen-the);
  color: var(--pc-chu-mo);
  font: 500 14px/1.1 var(--pc-font);
  padding: 0 14px;
  min-height: var(--pc-touch-min);
  border-radius: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.v3-chip[aria-pressed="true"] {
  border-color: var(--pc-chinh);
  color: var(--pc-chu);
  background: rgba(var(--pc-chinh-rgb), .12);
}

html.sang .v3-chip[aria-pressed="true"] { background: var(--pc-chinh-nen); }

.v3-leg { display: inline-flex; align-items: center; gap: 6px; }
.v3-leg .st { width: 8px; height: 8px; border-radius: 50%; background: var(--pc-thanh-cong); }
.v3-leg .st.warn { background: var(--pc-khong-chac); }
.v3-chip .sw { width: 14px; height: 4px; border-radius: 2px; }
.v3-chip .st { width: 8px; height: 8px; border-radius: 50%; background: var(--pc-thanh-cong); }
.v3-chip .st.warn { background: var(--pc-khong-chac); }
.v3-chip[disabled] { opacity: .5; cursor: default; }

/* ---- Vòng đếm quét xong ---- */
.v3-scan { display: flex; align-items: center; gap: 14px; }
.v3-ring { position: relative; width: 64px; height: 64px; flex: none; }
.v3-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.v3-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.v3-ring .bgc { stroke: var(--pc-nen-the-2); }
.v3-ring .fg {
  stroke: var(--pc-chinh);
  stroke-dasharray: 157.1;
  stroke-dashoffset: 0;
  animation: v3-fill 1.6s cubic-bezier(.2, .8, .2, 1) both;
  filter: drop-shadow(0 0 5px rgba(var(--pc-chinh-rgb), .55));
}
@keyframes v3-fill { from { stroke-dashoffset: 157.1; } to { stroke-dashoffset: 0; } }
.v3-ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 18px/1 var(--pc-font-display);
  font-variant-numeric: tabular-nums;
}
.v3-scan p { font-size: 16px; color: var(--pc-chu-mo); margin: 0; }
.v3-scan p b { color: var(--pc-chu); font-weight: 600; }

/* ---- Thẻ ưu tiên ---- */
.v3-prio { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }

.v3-mini {
  width: 76px;
  height: 112px;
  border-radius: 8px;
  background: #0A1F1C;
  border: 2px solid var(--pc-vien);
  box-shadow: inset 0 0 0 1px rgba(var(--pc-chinh-rgb), .4);
  overflow: hidden;
}
.v3-mini svg { display: block; width: 100%; height: 100%; }

.v3-rank {
  font: 700 12px/1 var(--pc-font-display);
  letter-spacing: .16em;
  color: var(--pc-chinh);
  text-transform: uppercase;
}
.v3-prio h3 { font: 600 18px/1.2 var(--pc-font-display); margin: 5px 0 4px; }
.v3-prio p { font-size: 16px; color: var(--pc-chu-mo); margin: 0; }

.v3-meter { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--pc-chu-mo); }
.v3-meter .seg { display: flex; gap: 3px; }
.v3-meter .seg i { width: 16px; height: 6px; border-radius: 2px; background: var(--pc-vien); }
.v3-meter .seg i.on { background: var(--pc-chinh); }

.v3-good { display: flex; gap: 10px; align-items: flex-start; }
.v3-good .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pc-thanh-cong);
  margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(53, 214, 154, .14);
}
.v3-good h3 { font: 600 16px/1.25 var(--pc-font-display); margin: 0; }
.v3-good p { font-size: 16px; color: var(--pc-chu-mo); margin: 2px 0 0; }

.v3-need {
  border: 1px dashed var(--pc-vien-dam);
  border-radius: var(--pc-radius-lg);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.v3-need > svg {
  flex: none;
  width: 24px;
  height: 24px;
  stroke: var(--pc-chu-mo-2);
  fill: none;
  stroke-width: 1.6;
}
.v3-need p { font-size: 16px; color: var(--pc-chu-mo); margin: 0; }
.v3-need b { color: var(--pc-chu); font-weight: 600; display: block; margin-bottom: 2px; }
.v3-need .link { display: inline-block; margin-top: 8px; color: var(--pc-chinh-chu); font-weight: 600; text-decoration: none; min-height: 44px; line-height: 44px; }

/* Trạng thái rỗng thật (0 ưu tiên, 0 điểm mạnh) */
.v3-empty { text-align: center; display: grid; gap: 10px; justify-items: center; }
.v3-empty .ic {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(var(--pc-chinh-rgb), .1);
  border: 1px solid var(--pc-vang-toi);
}
.v3-empty .ic svg { width: 28px; height: 28px; stroke: var(--pc-chinh); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v3-empty h3 { font: 700 18px/1.2 var(--pc-font-display); text-transform: uppercase; margin: 0; }
.v3-empty p { color: var(--pc-chu-mo); margin: 0; font-size: 16px; }
.v3-zero { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: 100%; }
.v3-zero div {
  background: var(--pc-nen-the);
  border: 1px solid var(--pc-vien);
  border-radius: 10px;
  padding: 10px 6px;
}
.v3-zero b { display: block; font: 700 22px/1.1 var(--pc-font-display); font-variant-numeric: tabular-nums; }
.v3-zero small { display: block; color: var(--pc-chu-mo-2); font-size: 14px; margin-top: 2px; }

/* ---- Màn Mô phỏng 3D ---- */
.v3-stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--pc-nen);
  border: 1px solid var(--pc-vien);
}
.v3-viewer { width: 100%; aspect-ratio: 3 / 4.6; display: block; touch-action: pan-y; position: relative; }
.v3-viewer canvas { display: block; width: 100%; height: 100%; }
.v3-badge3d {
  position: absolute;
  left: 10px;
  top: 10px;
  font: 600 12px/1 var(--pc-font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-chinh);
  background: rgba(var(--pc-overlay-rgb), .75);
  border: 1px solid var(--pc-vang-toi);
  padding: 6px 8px;
  border-radius: 4px;
  z-index: 2;
}
.v3-hud {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  display: grid;
  gap: 2px;
  justify-items: end;
  font: 600 12px/1.1 var(--pc-font-display);
  letter-spacing: .06em;
  color: var(--pc-chu);
  background: rgba(var(--pc-overlay-rgb), .75);
  border: 1px solid var(--pc-vien);
  padding: 6px 9px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  min-width: 84px;
}
.v3-hud small { font: 500 12px/1 var(--pc-font); letter-spacing: .08em; color: var(--pc-chu-mo); text-transform: uppercase; }
.v3-hud b { color: var(--pc-chinh-chu); font-size: 16px; }
.v3-fallback { padding: 0; }
.v3-fallback-note { padding: 10px 12px; font-size: 14px; color: var(--pc-chu-mo); background: var(--pc-nen-the); border-bottom: 1px solid var(--pc-vien); }
.v3-ctrl { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.v3-play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--pc-chinh);
  color: var(--pc-chu-tren-chinh);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--pc-glow);
}
.v3-play[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.v3-play svg { width: 20px; height: 20px; fill: currentColor; }
.v3-ctrl input[type=range] { width: 100%; accent-color: var(--pc-chinh); height: 44px; background: transparent; }

.v3-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v3-fact { background: var(--pc-nen-the); border: 1px solid var(--pc-vien); border-radius: 10px; padding: 10px; min-width: 0; }
.v3-fact small { display: block; color: var(--pc-chu-mo-2); font-size: 14px; }
.v3-fact b { font: 700 22px/1.1 var(--pc-font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.v3-fact b .u { font-size: 14px; color: var(--pc-chu-mo); font-weight: 500; }

.v3-review { display: grid; gap: 6px; }
.v3-review .lab { font: 700 12px/1 var(--pc-font-display); letter-spacing: .14em; text-transform: uppercase; }
.v3-review .lab.ok { color: var(--pc-thanh-cong); }
.v3-review .lab.warn { color: var(--pc-khong-chac); }
.v3-review .lab.mid { color: var(--pc-khong-chac); }
.v3-review p { font-size: 16px; margin: 0; }
.v3-review small { color: var(--pc-chu-mo-2); font-size: 14px; }
.v3-shots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.v3-shots .v3-chip { flex: none; scroll-snap-align: start; }
.v3-lim { margin: 0; padding-left: 18px; color: var(--pc-chu-mo); font-size: 14px; display: grid; gap: 4px; }

/* ---- Màn Hồ sơ ---- */
.v3-skill { display: grid; gap: 8px; }
.v3-skill .head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.v3-skill h3 { font: 600 16px/1.2 var(--pc-font-display); margin: 0; }
.v3-conf { font-size: 14px; color: var(--pc-chu-mo); text-align: right; }
.v3-conf.ok { color: var(--pc-thanh-cong); }
.v3-conf.mid { color: var(--pc-chinh-chu); }
.v3-conf.no { color: var(--pc-chu-mo-2); }
.v3-track { position: relative; height: 12px; border-radius: 6px; background: var(--pc-nen-the-2); border: 1px solid var(--pc-vien); }
.v3-track .band {
  position: absolute; top: -1px; bottom: -1px; border-radius: 6px;
  background: rgba(var(--pc-chinh-rgb), .22); border: 1px solid var(--pc-vang-toi);
  animation: v3-grow .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left;
}
.v3-track .pin {
  position: absolute; top: -5px; width: 4px; height: 20px; border-radius: 2px;
  background: var(--pc-chinh); box-shadow: 0 0 12px rgba(var(--pc-chinh-rgb), .6); margin-left: -2px;
  animation: v3-slide 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes v3-grow { from { transform: scaleX(.2); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes v3-slide { from { left: 8%; } to { left: var(--to); } }
.v3-track.none { background: repeating-linear-gradient(135deg, var(--pc-nen-the-2) 0 6px, var(--pc-phu-sang) 6px 12px); }
.v3-scale { display: flex; justify-content: space-between; font-size: 14px; color: var(--pc-chu-mo-2); letter-spacing: .04em; }
.v3-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; color: var(--pc-chu-mo); }
.v3-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.v3-prog h3 { font: 700 18px/1.2 var(--pc-font-display); text-transform: uppercase; margin: 0; }
.v3-valid { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--pc-thanh-cong); margin-top: 6px; }
.v3-valid i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc-thanh-cong); }
.v3-valid.no { color: var(--pc-khong-chac-chu); }
.v3-valid.no i { background: var(--pc-khong-chac); border: 1px dashed var(--pc-khong-chac-chu); }
.v3-delta { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 2px; }
.v3-delta b { font: 700 28px/1 var(--pc-font-display); color: var(--pc-chinh-chu); }
.v3-delta span { color: var(--pc-chu-mo); font-size: 14px; }
.v3-chartbox { margin-top: 6px; }
.v3-chartbox svg { display: block; width: 100%; height: auto; overflow: visible; }
.v3-gridl { stroke: var(--pc-vien); stroke-width: 1; stroke-dasharray: 3 4; }
.v3-ylab { fill: var(--pc-chu-mo-2); font: 500 12px var(--pc-font); }
.v3-xlab { fill: var(--pc-chu-mo); font: 500 12px var(--pc-font); text-anchor: middle; }
.v3-vol { fill: var(--pc-vien); }
.v3-vol.on { fill: var(--pc-vang-toi); }
.v3-pt { cursor: pointer; outline: none; }
.v3-pt .core { fill: var(--pc-nen-sau); stroke: var(--pc-chinh); stroke-width: 2.4; }
.v3-pt.sel .core { fill: var(--pc-chinh); }
.v3-pulse { fill: none; stroke: var(--pc-chinh); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: v3-pl 2.2s ease-out infinite; }
@keyframes v3-pl { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.v3-info {
  margin-top: 10px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline;
  padding: 10px 12px; border: 1px solid var(--pc-vien); border-radius: 10px; background: var(--pc-nen-the-2);
}
.v3-info b { font: 700 14px/1.2 var(--pc-font-display); }
.v3-info span { font-size: 14px; color: var(--pc-chu-mo); }
.v3-info .lv { grid-column: 1 / -1; }

.v3-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v3-stat { background: var(--pc-nen-the); border: 1px solid var(--pc-vien); border-radius: 10px; padding: 10px; min-width: 0; }
.v3-stat small { display: block; color: var(--pc-chu-mo-2); font-size: 14px; }
.v3-stat b { font: 700 22px/1.1 var(--pc-font-display); font-variant-numeric: tabular-nums; }
.v3-radar { display: block; width: 100%; height: auto; overflow: visible; }
.v3-rg { fill: none; stroke: var(--pc-vien); stroke-width: 1; }
.v3-rax { stroke: var(--pc-vien); stroke-width: 1; }
.v3-rth { fill: none; stroke: var(--pc-vang-toi); stroke-width: 1.2; stroke-dasharray: 4 4; }
.v3-rlab { fill: var(--pc-chu-mo); font: 500 12px var(--pc-font); }
.v3-rlab.ok { fill: var(--pc-chu); font-weight: 600; }
.v3-rarea { fill: rgba(var(--pc-chinh-rgb), .2); stroke: var(--pc-chinh); stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(var(--pc-chinh-rgb), .45)); }
.v3-rdot { fill: var(--pc-nen-sau); stroke: var(--pc-chinh); stroke-width: 2; }
.v3-rdot.ok { fill: var(--pc-chinh); }
.v3-sum { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.v3-sum b { font: 700 28px/1 var(--pc-font-display); color: var(--pc-chinh-chu); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3-sum span { color: var(--pc-chu-mo); font-size: 14px; }
.v3-card-title { font: 700 16px/1.2 var(--pc-font-display); text-transform: uppercase; margin: 0; }

.v3-ladder { display: grid; gap: 0; }
.v3-step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; position: relative; padding-bottom: 16px; }
.v3-step:last-child { padding-bottom: 0; }
.v3-step::before { content: ""; position: absolute; left: 13px; top: 26px; bottom: -2px; width: 2px; background: var(--pc-vien); }
.v3-step:last-child::before { display: none; }
.v3-step.done::before { background: var(--pc-vang-toi); }
.v3-node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--pc-vien); background: var(--pc-nen-the-2); color: var(--pc-chu-mo-2); }
.v3-node svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v3-step.done .v3-node { background: var(--pc-chinh); border-color: var(--pc-chinh); color: var(--pc-chu-tren-chinh); }
.v3-step.next .v3-node { border-color: var(--pc-chinh); color: var(--pc-chinh); box-shadow: 0 0 0 4px rgba(var(--pc-chinh-rgb), .14); }
.v3-step h3 { font: 600 16px/1.25 var(--pc-font-display); margin: 0; }
.v3-step p { font-size: 14px; color: var(--pc-chu-mo); margin: 2px 0 0; }
.v3-pbar { height: 6px; border-radius: 3px; background: var(--pc-nen-the-2); margin-top: 8px; overflow: hidden; }
.v3-pbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--pc-chinh-dam), var(--pc-chinh-chu)); width: var(--w); animation: v3-pgrow 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes v3-pgrow { from { width: 0; } to { width: var(--w); } }
.v3-pl { display: flex; justify-content: space-between; font-size: 14px; color: var(--pc-chu-mo-2); margin-top: 4px; gap: 8px; }

.v3-prep { display: grid; gap: 10px; }
.v3-prep h3 { font: 700 16px/1.2 var(--pc-font-display); text-transform: uppercase; margin: 0; }
.v3-prep ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.v3-prep li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 16px; color: var(--pc-chu-mo); }
.v3-prep li svg { width: 18px; height: 18px; stroke: var(--pc-chinh); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.v3-prep li b { color: var(--pc-chu); font-weight: 600; }
.v3-remind { display: grid; gap: 10px; border-top: 1px solid var(--pc-vien); padding-top: 12px; }
.v3-rrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v3-rrow span { font-size: 16px; }
.v3-sw { appearance: none; border: 6px solid transparent; background-clip: padding-box; box-sizing: border-box; cursor: pointer; width: 64px; height: 44px; border-radius: 22px; background-color: var(--pc-vien); position: relative; flex: none; transition: background-color .2s; }
.v3-sw::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--pc-chu-mo); transition: transform .2s, background .2s; }
.v3-sw[aria-checked="true"] { background-color: var(--pc-vang-toi); }
.v3-sw[aria-checked="true"]::after { transform: translateX(20px); background: var(--pc-chinh); }
.v3-teaser { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.v3-teaser h3 { font: 600 16px/1.25 var(--pc-font-display); margin: 0; }
.v3-teaser p { font-size: 14px; color: var(--pc-chu-mo); margin: 2px 0 0; }
.v3-teaser .mini-r { width: 56px; height: 56px; }

/* ---- Trang chủ / Phân tích mới / Ví Xu ---- */
.v3-last { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.v3-last h3 { font: 600 18px/1.2 var(--pc-font-display); margin: 5px 0 4px; }
.v3-last p { font-size: 16px; color: var(--pc-chu-mo); margin: 0; }
.v3-minibtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 700 14px/1 var(--pc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-chinh-chu); text-decoration: none; min-height: 44px; }
.v3-minibtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v3-next { background: linear-gradient(135deg, var(--pc-chinh-nen), var(--pc-nen-sau) 60%); border-color: var(--pc-vang-toi); }
.v3-next h3 { font: 700 18px/1.2 var(--pc-font-display); text-transform: uppercase; margin: 0; }
.v3-next p { font-size: 16px; color: var(--pc-chu-mo); margin: 6px 0 12px; }
.v3-hscroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.v3-disc { flex: 0 0 78%; scroll-snap-align: start; border-radius: 14px; border: 1px solid var(--pc-vien); background: var(--pc-nen-the); padding: 14px; display: grid; gap: 6px; min-height: 104px; align-content: start; }
.v3-disc .tg { font: 600 12px/1 var(--pc-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--pc-chu-mo-2); }
.v3-disc h3 { font: 600 16px/1.25 var(--pc-font-display); margin: 0; }
.v3-disc p { font-size: 14px; color: var(--pc-chu-mo); margin: 0; }

.v3-svc {
  appearance: none; text-align: left; width: 100%; color: inherit; cursor: pointer;
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start;
  background: var(--pc-nen-the); border: 1px solid var(--pc-vien); border-radius: 14px; padding: 14px; font: inherit;
}
.v3-svc .rd { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pc-vien-dam); margin-top: 2px; display: grid; place-items: center; }
.v3-svc[aria-checked="true"] { border-color: var(--pc-chinh); background: linear-gradient(180deg, var(--pc-chinh-nen), var(--pc-nen-the)); }
.v3-svc[aria-checked="true"] .rd { border-color: var(--pc-chinh); }
.v3-svc[aria-checked="true"] .rd::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pc-chinh); }
.v3-svc h3 { font: 600 16px/1.25 var(--pc-font-display); margin: 0; }
.v3-svc p { font-size: 14px; color: var(--pc-chu-mo); margin: 3px 0 0; }
.v3-svc .meta { font-size: 14px; color: var(--pc-chu-mo-2); margin-top: 6px; }
.v3-svc .price { display: grid; justify-items: end; gap: 2px; font: 700 18px/1 var(--pc-font-display); color: var(--pc-chinh-chu); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3-svc .price small { font: 500 12px/1 var(--pc-font); color: var(--pc-chu-mo-2); }

.v3-drop { border: 1.5px dashed var(--pc-vang-toi); border-radius: 14px; padding: 16px; display: grid; gap: 12px; background: rgba(var(--pc-chinh-rgb), .03); }
.v3-file { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.v3-file .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--pc-chinh-rgb), .12); display: grid; place-items: center; }
.v3-file .ic svg { width: 24px; height: 24px; stroke: var(--pc-chinh); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v3-file b { font: 600 16px/1.2 var(--pc-font-display); word-break: break-all; }
.v3-file small { display: block; color: var(--pc-chu-mo); font-size: 14px; }
.v3-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v3-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 16px; color: var(--pc-chu-mo); }
.v3-checks li b { color: var(--pc-chu); font-weight: 600; }
.v3-checks .i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; }
.v3-checks .i svg { width: 11px; height: 11px; stroke: #0E0E11; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.v3-checks .ok .i { background: var(--pc-thanh-cong); }
.v3-checks .warn .i { background: var(--pc-khong-chac); outline: 1px dashed var(--pc-khong-chac); outline-offset: 2px; }
.v3-checks .bad .i { background: var(--pc-loi); }
.v3-banner { border-radius: 12px; padding: 12px 14px; font-size: 16px; border: 1px solid; }
.v3-banner b { display: block; font: 700 14px/1.2 var(--pc-font-display); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; }
.v3-banner.ok { border-color: rgba(53, 214, 154, .4); background: rgba(53, 214, 154, .07); }
.v3-banner.ok b { color: var(--pc-thanh-cong); }
.v3-banner.warn { border: 1.5px dashed var(--pc-khong-chac); background: var(--pc-khong-chac-nen); }
.v3-banner.warn b { color: var(--pc-khong-chac-chu); }
.v3-banner.bad { border-color: rgba(255, 90, 95, .5); background: rgba(255, 90, 95, .07); }
.v3-banner.bad b { color: var(--pc-loi); }
.v3-guide summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 600 16px/1.2 var(--pc-font-display); list-style: none; }
.v3-guide summary::-webkit-details-marker { display: none; }
.v3-guide summary::after { content: "+"; margin-left: auto; color: var(--pc-chinh); font-size: 22px; }
.v3-guide[open] summary::after { content: "\2013"; }
.v3-guide ul { margin: 6px 0 0; padding-left: 18px; color: var(--pc-chu-mo); font-size: 16px; display: grid; gap: 6px; }
.v3-cost { display: grid; gap: 6px; border-top: 1px solid var(--pc-vien); padding-top: 12px; }
.v3-cost .r { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; }
.v3-cost .r b { font-variant-numeric: tabular-nums; text-align: right; }
.v3-cost .r.big b { font: 700 18px/1 var(--pc-font-display); color: var(--pc-chinh-chu); }
.v3-cost small { color: var(--pc-chu-mo-2); font-size: 14px; }
.v3-proc { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 10px 0; }
.v3-proc .v3-ring { width: 120px; height: 120px; }
.v3-proc .v3-ring svg { width: 120px; height: 120px; }
.v3-proc .v3-ring b { font-size: 28px; }
.v3-psteps { display: grid; gap: 10px; justify-items: start; width: 100%; }
.v3-psteps div { display: flex; gap: 10px; align-items: center; font-size: 16px; color: var(--pc-chu-mo-2); }
.v3-psteps div i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pc-vien); flex: none; display: grid; place-items: center; }
.v3-psteps .on { color: var(--pc-chu); }
.v3-psteps .on i { border-color: var(--pc-chinh); }
.v3-psteps .dn { color: var(--pc-chu-mo); }
.v3-psteps .dn i { background: var(--pc-chinh); border-color: var(--pc-chinh); }
.v3-psteps .dn i::after { content: ""; width: 5px; height: 9px; border: solid var(--pc-chu-tren-chinh); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

.v3-wallet { background: radial-gradient(120% 140% at 0% 0%, var(--pc-chinh-nen), var(--pc-nen-sau) 60%); border: 1px solid var(--pc-vang-toi); border-radius: 16px; padding: 18px; display: grid; gap: 6px; position: relative; overflow: hidden; }
html.sang .v3-wallet { background: radial-gradient(120% 140% at 0% 0%, var(--pc-chinh-nen), var(--pc-nen-the) 60%); }
.v3-wallet small { color: var(--pc-chu-mo); font-size: 16px; }
.v3-wallet .bal { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.v3-wallet .bal b { font: 700 48px/1 var(--pc-font-display); color: var(--pc-chinh-chu); text-shadow: 0 0 24px rgba(var(--pc-chinh-rgb), .35); }
.v3-wallet .bal span { font: 600 18px/1 var(--pc-font-display); color: var(--pc-chu-mo); }
.v3-wallet .coin { position: absolute; right: -10px; top: -10px; width: 110px; height: 110px; opacity: .16; }
.v3-wallet .coin svg { width: 100%; height: 100%; stroke: var(--pc-chinh); fill: none; stroke-width: 1.2; }
.v3-pack {
  appearance: none; text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--pc-nen-the); border: 1px solid var(--pc-vien); border-radius: 12px; padding: 12px 14px; min-height: 56px;
}
.v3-pack b { font: 700 18px/1.1 var(--pc-font-display); font-variant-numeric: tabular-nums; }
.v3-pack small { display: block; color: var(--pc-chu-mo-2); font-size: 14px; margin-top: 2px; }
.v3-pack .pr { color: var(--pc-chu); font-weight: 600; }
.v3-pack[aria-pressed="true"] { border-color: var(--pc-chinh); background: rgba(var(--pc-chinh-rgb), .08); }
.v3-hist { display: grid; gap: 0; }
.v3-hist .h { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--pc-vien); }
.v3-hist .h:last-child { border-bottom: 0; }
.v3-hist .h b { font: 600 16px/1.25 var(--pc-font-display); }
.v3-hist .h small { color: var(--pc-chu-mo-2); font-size: 14px; }
.v3-hist .h .a { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 16px/1 var(--pc-font-display); font-variant-numeric: tabular-nums; }
.v3-hist .plus { color: var(--pc-thanh-cong); }

/* ---- Màn Chào mừng ---- */
.v3-lang { position: relative; display: inline-flex; align-items: center; }
.v3-lang select {
  appearance: none; -webkit-appearance: none; font: 600 16px/1.2 var(--pc-font); color: var(--pc-chu);
  background: var(--pc-nen-the); border: 1px solid var(--pc-vien); border-radius: 22px;
  min-height: var(--pc-touch-min); min-width: 132px; max-width: 100%; padding: 0 38px 0 16px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--pc-chinh) 50%), linear-gradient(135deg, var(--pc-chinh) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.v3-lang select:focus-visible { outline: 2px solid var(--pc-chinh-chu); outline-offset: 2px; }
.v3-lang select option { background: var(--pc-nen-the); color: var(--pc-chu); }

/* ---- Trung tâm (Huấn luyện / Khám phá / Cá nhân) ---- */
.v3-subnav { display: flex; gap: 6px; overflow-x: auto; padding: 4px 12px 10px; scrollbar-width: none; }
.v3-subnav::-webkit-scrollbar { display: none; }
.v3-subnav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--pc-touch-min); padding: 0 12px; border-radius: 22px;
  border: 1px solid var(--pc-vien); color: var(--pc-chu-mo); text-decoration: none; font: 600 14px/1 var(--pc-font);
}
.v3-subnav a[aria-current] { background: var(--pc-chinh); border-color: var(--pc-chinh); color: var(--pc-chu-tren-chinh); }
.v3-subnav a:focus-visible { outline: 2px solid var(--pc-chinh-chu); outline-offset: 2px; }
.v3-hub { display: grid; gap: 10px; margin-top: 12px; }
.v3-hubitem { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; min-height: 72px; }
.v3-hubitem .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--pc-chinh-rgb), .1); }
.v3-hubitem .ic svg { width: 24px; height: 24px; stroke: var(--pc-chinh); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v3-hubitem .tx { display: grid; gap: 2px; min-width: 0; }
.v3-hubitem .tx b { font: 600 18px/1.25 var(--pc-font-display); }
.v3-hubitem .tx small { color: var(--pc-chu-mo); font-size: 16px; line-height: 1.3; }
.v3-hubitem .go svg { width: 22px; height: 22px; stroke: var(--pc-chinh); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v3-hubitem:not(.off):active { transform: scale(.99); }
.v3-hubitem:focus-visible { outline: 2px solid var(--pc-chinh-chu); outline-offset: 2px; }
.v3-hubitem.off { opacity: .8; }
.v3-hubitem.off:not(:has(.ic)) { grid-template-columns: 1fr auto; }
.v3-soon {
  font: 600 14px/1 var(--pc-font); font-style: normal; letter-spacing: .04em; color: var(--pc-chu-mo);
  border: 1px dashed var(--pc-vien-manh, #3a3a42); border-radius: 12px; padding: 6px 10px; white-space: nowrap;
}

.v3-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 40%, rgba(var(--pc-chinh-rgb), .16), transparent 70%), linear-gradient(180deg, var(--pc-nen-sau), var(--pc-nen));
  border: 1px solid var(--pc-vien); height: 350px;
}
.v3-hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); pointer-events: none; }
.v3-hero.gl::after { background: radial-gradient(115% 85% at 50% 48%, transparent 42%, rgba(0, 0, 0, .7)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px); }
.v3-hero canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.v3-gridfloor {
  position: absolute; left: -45%; right: -45%; bottom: -40px; height: 250px;
  transform: perspective(260px) rotateX(64deg);
  background-image: linear-gradient(rgba(var(--pc-chinh-rgb), .28) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--pc-chinh-rgb), .28) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 92%); mask-image: linear-gradient(to top, #000 25%, transparent 92%);
  animation: v3-gridmove 2.6s linear infinite;
}
@keyframes v3-gridmove { to { background-position: 0 34px; } }
.v3-floor { position: absolute; left: 50%; bottom: -2px; width: 232px; margin-left: -116px; transform: perspective(720px) rotateX(52deg); transform-origin: 50% 100%; filter: drop-shadow(0 0 14px rgba(var(--pc-chinh-rgb), .35)); }
.v3-floor svg { display: block; width: 100%; height: auto; overflow: visible; }
.v3-beam { position: absolute; left: 0; right: 0; height: 46px; background: linear-gradient(180deg, transparent, rgba(var(--pc-chinh-rgb), .28), transparent); animation: v3-beam 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes v3-beam { 0% { top: -12%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 105%; opacity: 0; } }
.v3-hero.gl .v3-floor, .v3-hero.gl .v3-gridfloor, .v3-hero.gl .v3-beam { display: none; }
.v3-cb { position: absolute; width: 16px; height: 16px; border: 2px solid var(--pc-chinh); opacity: .75; z-index: 2; }
.v3-cb.a { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.v3-cb.b { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.v3-cb.c { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.v3-cb.d { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.v3-hud2 {
  position: absolute; z-index: 2; font: 600 14px/1.2 var(--pc-font-display); letter-spacing: .06em; color: var(--pc-chu);
  background: rgba(var(--pc-overlay-rgb), .72); border-left: 2px solid var(--pc-chinh); padding: 6px 9px; border-radius: 0 6px 6px 0;
  opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s; max-width: 70%;
}
.v3-hud2.on { opacity: 1; transform: none; }
.v3-hud2 i { display: block; font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .12em; color: var(--pc-chinh); text-transform: uppercase; margin-bottom: 2px; }
#h1 { left: 12px; top: 64px; }
#h2 { right: 12px; top: 118px; border-left: 0; border-right: 2px solid var(--pc-chinh); border-radius: 6px 0 0 6px; text-align: right; }
#h3 { left: 12px; bottom: 48px; }
.v3-stat2 { position: absolute; z-index: 2; left: 34px; top: 14px; display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--pc-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-chinh); }
.v3-stat2 i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc-chinh); animation: v3-blink 1.2s steps(2) infinite; }
@keyframes v3-blink { 50% { opacity: .15; } }
.v3-hero-toggle { position: absolute; z-index: 3; right: 8px; bottom: 6px; appearance: none; border: 0; background: rgba(var(--pc-overlay-rgb), .72); color: var(--pc-chinh-chu); font: 600 12px/1 var(--pc-font-display); letter-spacing: .08em; padding: 0 12px; min-height: 44px; border-radius: 22px; cursor: pointer; }
.v3-eyebrow { font: 600 12px/1 var(--pc-font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--pc-chinh); }
.v3-lh1 { font: 700 28px/1.08 var(--pc-font-display); letter-spacing: .005em; margin: 8px 0 0; text-transform: uppercase; }
.v3-lh1 em { font-style: normal; color: var(--pc-chinh); text-shadow: 0 0 22px rgba(var(--pc-chinh-rgb), .4); }
.v3-lsub { color: var(--pc-chu-mo); font-size: 16px; margin: 10px 0 0; }
.v3-ctas { display: grid; gap: 10px; }
.v3-ctas .v3-btn { min-height: 52px; font-size: 16px; }
.v3-feats { display: grid; gap: 10px; }
.v3-feat { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--pc-vien); background: linear-gradient(180deg, var(--pc-nen-the), var(--pc-nen-sau)); }
.v3-feat .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--pc-chinh-rgb), .1); border: 1px solid var(--pc-vang-toi); display: grid; place-items: center; }
.v3-feat .ic svg { width: 22px; height: 22px; stroke: var(--pc-chinh); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v3-feat h3 { font: 600 16px/1.2 var(--pc-font-display); margin: 0; }
.v3-feat p { font-size: 14px; color: var(--pc-chu-mo); margin: 2px 0 0; }
.v3-how { display: grid; gap: 12px; }
.v3-flow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; position: relative; }
.v3-flow::before { content: ""; position: absolute; left: 16%; right: 16%; top: 21px; height: 2px; background: linear-gradient(90deg, var(--pc-vang-toi), var(--pc-chinh), var(--pc-vang-toi)); background-size: 200% 100%; animation: v3-flow 3s linear infinite; }
@keyframes v3-flow { to { background-position: -200% 0; } }
.v3-fs { display: grid; justify-items: center; gap: 8px; text-align: center; position: relative; font-size: 14px; color: var(--pc-chu-mo); }
.v3-fs .n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--pc-nen-sau); border: 2px solid var(--pc-chinh); font: 700 18px/1 var(--pc-font-display); color: var(--pc-chinh-chu); }
.v3-legal { text-align: center; color: var(--pc-chu-mo-2); font-size: 14px; padding-top: 4px; margin: 0; }

/* ---- Tài khoản ---- */
.v3-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.v3-row + .v3-row { border-top: 1px solid var(--pc-vien); padding-top: 10px; margin-top: 10px; }

/* ---- Chuyển động nhẹ phải tắt khi người dùng yêu cầu ---- */
@media (prefers-reduced-motion: reduce) {
  .v3-rise, .v3-ring .fg, .v3-track .band, .v3-track .pin, .v3-pulse, .v3-pbar i,
  .v3-gridfloor, .v3-beam, .v3-flow::before, .v3-stat2 i, .v3-xu.pop, .pc-collapsible-body { animation: none !important; }
  .pc-btn, .v3-sw, .v3-sw::after, .v3-hud2 { transition: none !important; }
}

/* Icon Lucide: góc nối tròn (24/10) */
.v3-nav svg, .v3-iconbtn svg, .v3-mark svg { stroke-linejoin: round; }

/* TASK-188: so lieu phu va dieu huong dung xanh lo. */
.v3-stat b, .v3-sum b, .v3-delta b, .v3-svc .price { color: var(--pc-phu-nhan); }
.v3-btn.ghost, .v3-minibtn, .v3-need .link { color: var(--pc-phu-nhan); }
.v3-nav a[aria-current], .v3-iconbtn[aria-current], .v3-eyebrow { color: var(--pc-phu-nhan); }
.v3-hubitem .ic svg, .v3-hubitem .go svg, .v3-feat .ic svg { stroke: var(--pc-phu-nhan); }
.v3-hud b, .v3-hud2 i, .v3-hero-toggle { color: var(--pc-phu-nhan); }
.v3-review .lab.mid, .v3-conf.mid { color: var(--pc-khong-chac-chu); }
.v3-xu { border-color: var(--pc-vien); }
.v3-xu b, .v3-xu svg { color: var(--pc-phu-nhan); stroke: currentColor; }
.v3-xu em { background: var(--pc-phu-nhan-nen); color: var(--pc-phu-nhan); }
.v3-btn.ghost { border-color: var(--pc-vien-dam); }
.v3-brand i { color: var(--pc-chu); }
.v3-mark { background: var(--pc-nen-the-2); }
.v3-mark svg { stroke: var(--pc-phu-nhan); }
.v3-mau, .v3-hubitem .v3-mau { background: var(--pc-phu-nhan-nen); color: var(--pc-phu-nhan); }
.v3-btn:not(.gold) { border-color: var(--pc-vien-dam); }
.v3-stat2 { color: var(--pc-phu-nhan); }
.v3-stat2 i { background: var(--pc-phu-nhan); }
.v3-cb { border-color: var(--pc-phu-nhan); }
.v3-feat .ic, .v3-hubitem .ic { background: var(--pc-phu-nhan-nen); border-color: var(--pc-vien); }
html.sang .v3-hud, html.sang .v3-hud2,
html.sang .v3-hero-toggle, html.sang .v3-badge3d { background: var(--pc-nen-the); }

/* TASK-215: an toan logo 1X; so deu cot va nhan chua du du lieu. */
.v3-brand, .pc-logo { padding: 9px; flex-shrink: 0; }
.pc-logo img { width: auto; height: 28px; min-width: 96px; display: block; }
.pc-body { font-variant-numeric: tabular-nums; }
.v3-conf.mid, .v3-conf.no, .v3-review .lab.mid, .v3-review .lab.warn { border: 1px dashed var(--pc-khong-chac); border-radius: var(--pc-radius-pill); padding: 2px 6px; }
.v3-chip:has(.st.warn), .v3-leg:has(.st.warn) { border: 1px dashed var(--pc-khong-chac); }
.v3-lh1 { font: var(--pc-size-h1); }
.v3-lh1 em { color: var(--pc-info); text-shadow: none; }
.v3-fs .n { border-color: var(--pc-vien-dam); color: var(--pc-info); }
.v3-flow::before { background: var(--pc-vien); animation: none; }
.v3-hero-toggle { color: var(--pc-chu-trang); }

.v3-card, .v3-feat { border-radius: var(--sl-radius-card); }

.pc-path-unknown { stroke: var(--pc-khong-chac); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: .2 1.5; }

.pc-btn, .v3-btn { border-radius: var(--sl-radius-button); }
.pc-badge, .v3-chip, .v3-mau, .v3-conf { border-radius: var(--sl-radius-chip); }

.v3-hud2 i { color: var(--pc-chu-trang); }

.v3-guide summary::after { color: var(--pc-info); }