/* ==========================================================================
   FORELY APP — STANDALONE VISUAL REFRESH
   --------------------------------------------------------------------------
   Lớp này chỉ đổi cách Forely được trình bày. Không đổi route, dữ liệu, API,
   xác thực, cơ chế Points, dự đoán, khảo sát hay vận hành Kho quà.
   Nguồn thiết kế: Forely App-standalone.dc.html (23/08/2026).
   ========================================================================== */

/* Cầu nối: app cũ dùng token --f-*, bản standalone dùng token thương hiệu.
   Ánh xạ ở đây giúp toàn bộ component hiện hữu cùng đi theo một hệ màu. */
:root{
  --f-primary:var(--btn);
  --f-primary-hover:var(--btn-hover);
  --f-primary-soft:var(--accent-tint);
  --f-primary-border:var(--accent-tint-2);
  --f-secondary:var(--text-strong);
  --f-secondary-deep:var(--section);
  --f-bg-canvas:var(--bg);
  --f-bg-surface:var(--surface);
  --f-bg-subtle:var(--surface-2);
  --f-bg-hover:var(--ghost-hover);
  --f-bg-selected:var(--accent-tint);
  --f-bg-inverse:var(--section);
  --f-text-primary:var(--text);
  --f-text-secondary:var(--text-body);
  --f-text-tertiary:var(--text-soft);
  --f-text-link:var(--link);
  --f-border:var(--border);
  --f-border-strong:var(--border-strong);
  --f-border-focus:var(--accent-line);
  --f-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-font-display:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;
  --f-elev-0:none;
  --f-elev-1:none;
  --f-elev-2:none;
  --f-elev-3:none;
  --f-elev-4:none;
  --f-radius-sm:8px;
  --f-radius-md:8px;
  --f-radius-lg:12px;
  --f-radius-xl:14px;
  --f-stat-ink:var(--text-strong);
}
html[data-theme="dark"]{
  --f-primary:var(--btn);
  --f-primary-hover:var(--btn-hover);
  --f-primary-soft:var(--accent-tint);
  --f-primary-border:var(--accent-tint-2);
  --f-secondary:var(--btn-hover);
  --f-secondary-deep:var(--section);
  --f-bg-canvas:var(--bg);
  --f-bg-surface:var(--surface);
  --f-bg-subtle:var(--surface-2);
  --f-bg-hover:var(--ghost-hover);
  --f-bg-selected:var(--accent-tint);
  --f-bg-inverse:var(--section);
  --f-text-primary:var(--text);
  --f-text-secondary:var(--text-body);
  --f-text-tertiary:var(--text-soft);
  --f-text-link:var(--link);
  --f-border:var(--border);
  --f-border-strong:var(--border-strong);
  --f-border-focus:var(--accent-line);
}

/* Nền, nhịp chữ và vùng đọc */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-font);
}
.wrap{
  max-width:1440px !important;
  padding-left:32px;
  padding-right:32px;
}
main.wrap{
  padding-top:26px;
  padding-bottom:80px;
}
h1,h2,h3,h4,.hero-h1,.mtitle{
  font-family:var(--f-font-display);
  font-weight:500;
  letter-spacing:-.03em;
  color:var(--text-strong);
}
h1,.hero-h1{
  font-size:clamp(26px,2.71vw,38px);
  line-height:1.12;
}
h2{
  font-size:21px;
  line-height:1.22;
}
.hero-h1 em{
  color:var(--accent-text);
  font-style:normal;
}
.meta{
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-muted);
}
.q{
  font-size:14px;
  line-height:1.4;
  font-weight:600;
  color:var(--text);
}
.big,
#t-home .big,
#stBal,#stBets,#stEarned,
.pf-stat .v{
  font-family:var(--f-font-display);
  font-size:34px;
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.12;
  color:var(--text-strong);
}
#stBal{color:var(--accent-text)}
.num,.fp,#fpBal,.wallet,#stLocked,#stQuality{
  font-family:var(--f-font);
  letter-spacing:normal;
}

/* Header gọn, phẳng, lấy đúng nhịp của bản standalone */
header{
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  box-shadow:none;
}
header.fx-scrolled{
  background:var(--header-bg);
  box-shadow:none;
}
header .hbar{
  max-width:1504px !important;
  min-height:52px;
  gap:10px !important;
  padding:12px 32px !important;
}
.logo{
  font-family:var(--f-font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--logo-ink);
}
.logo:hover{color:var(--logo-ink)}
.logo span{color:var(--accent-text)}
header .hnav .tabs{gap:2px}
header .hnav .tab{
  padding:7px 10px !important;
  border-radius:8px;
  color:var(--text-soft);
  font-size:13.5px !important;
  font-weight:600 !important;
  line-height:1.2;
}
header .hnav .tab:hover{
  background:var(--ghost-hover);
  color:var(--text-strong);
}
header .hnav .tab.on{
  background:var(--btn) !important;
  color:var(--on-btn) !important;
  box-shadow:none;
}
header .hnav .tab::after{display:none}
.bizcta{
  padding:6px 11px;
  border:1.5px solid var(--btn);
  border-radius:8px;
  color:var(--btn);
  background:var(--surface);
}
.bizcta:hover{
  background:var(--btn);
  color:var(--on-btn);
}
.wallet{
  padding:6px 12px;
  background:var(--accent-tint);
  border:1px solid var(--accent-text);
  color:var(--accent-text);
  border-radius:999px;
  box-shadow:none;
  font-size:13.5px;
  font-weight:800;
}
.lout,
.hbtn{
  background:transparent;
  border-color:var(--border);
  border-radius:8px;
  color:var(--text-soft);
}
.lout:hover,
.hbtn:hover{
  background:var(--ghost-hover);
  border-color:var(--sel-line);
  color:var(--sel-ink);
}
.hbtn i{background:currentColor}
#fxTicker{
  background:var(--section);
  border-bottom:1px solid var(--section);
}

/* Thẻ: viền 1px, nền phẳng — không dùng bóng hoặc hiệu ứng bay */
.card,.stat-card,.panel,.box,.svc,.pricing-card,.fstep{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:none;
}
.card:hover,.stat-card:hover,.panel:hover,.box:hover,.svc:hover,.pricing-card:hover,.fstep:hover{
  transform:none;
  border-color:var(--border-strong);
  box-shadow:none;
}
.card.is-selected,.is-selected{
  border-color:var(--accent-line);
  background:var(--accent-tint);
  box-shadow:0 0 0 3px rgba(0,135,90,.14);
  transform:none;
}
.card.is-selected::before{box-shadow:inset 3px 0 0 var(--accent-line)}
.note,.preview{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text-muted);
}

/* Bộ lọc, chip và nút */
.btn{
  border-radius:8px;
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
  box-shadow:none;
}
.btn.bpri,button.primary{
  background:var(--btn);
  color:var(--on-btn);
  box-shadow:none;
}
.btn.bpri:hover:not(:disabled),button.primary:hover:not(:disabled){
  background:var(--btn-hover);
  box-shadow:none;
}
.btn.bsec,button.bsec{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text);
}
.btn.bsec:hover:not(:disabled),button.bsec:hover:not(:disabled){
  background:var(--ghost-hover);
  border-color:var(--sel-line);
  color:var(--sel-ink);
}
.chipbtn{
  border-radius:999px;
  background:var(--surface);
  border-color:var(--border);
  color:var(--text-soft);
}
.chipbtn:hover{
  border-color:var(--accent-line);
  background:var(--accent-tint);
  color:var(--accent-text);
}
.chipbtn.on{
  background:var(--btn);
  border-color:var(--btn);
  color:var(--on-btn);
  box-shadow:none;
}
main input,main select,main textarea,
.modal input,.modal select,.modal textarea,
.drawer input,.drawer select,.drawer textarea{
  background:var(--surface);
  border-color:var(--border);
  border-radius:8px;
  color:var(--text);
}
main input:focus,main select:focus,main textarea:focus,
.modal input:focus,.modal select:focus,.modal textarea:focus,
.drawer input:focus,.drawer select:focus,.drawer textarea:focus{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px rgba(0,135,90,.14);
}

/* Dự đoán: tấm thẻ rộng, thông tin dễ quét và biểu tượng phẳng */
#marketList{
  gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
#marketList .card,#hotMarket .card{
  padding:16px !important;
  border-radius:12px;
}
#marketList .q,#hotMarket .q{
  font-size:14px;
  line-height:1.4;
  margin-top:0;
}
#marketList .meta,#hotMarket .meta{
  font-size:12.5px;
}
.mk .mk-h{gap:12px}
.mk .mk-ic,
.mk .mk-bt:not(.anh){
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:none;
}
.mk .mk-ic svg,
.mk .mk-bt:not(.anh) svg{stroke:var(--accent)}
.mk .mk-bt:not(.anh){color:var(--accent)}
.mk .probwrap{
  height:4px;
  margin:6px 0 0;
  background:var(--surface-2);
}
.mk .probyes,.mk .probno{padding:0}
#marketList .btnrow .btn{border-radius:8px}

/* Bố cục cho các tab dữ liệu, khảo sát và Kho quà */
#surveyList,#voucherList,#newsList,#cdRoot{
  gap:14px;
}
#surveyList .card,#voucherList .card,#newsList .card,#cdRoot .card{
  border-radius:12px;
  box-shadow:none;
}
.rw-hero{
  border-radius:14px;
  box-shadow:none;
}
.rw-chips .chipbtn{margin-bottom:0}

/* Modal / drawer: cùng một ngôn ngữ với mẫu standalone */
.modal,.scrim{
  background:var(--scrim);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.mbox{
  max-width:460px;
  padding:26px;
  border:1px solid var(--border-strong);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 24px 70px var(--shadow-c);
}
.mtitle{
  font-size:19px;
  line-height:1.35;
  margin-bottom:6px;
}
.opt{
  border-radius:8px;
  border-width:2px;
  background:var(--surface);
}
.opt:hover{
  transform:none;
  border-color:var(--accent-line);
  background:var(--accent-tint);
}
.opt.sel{
  border-color:var(--accent-line);
  background:var(--accent-tint);
  color:var(--accent-text);
  box-shadow:none;
}
.opt.sel::after{
  background:var(--accent-line);
}
.drawer{
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:-18px 0 50px var(--shadow-c);
}

/* Footers và mobile: ưu tiên không gian đọc, không để lộ thanh cuộn ngang */
footer > .wrap{
  padding:38px 32px 26px !important;
}
@media(max-width:759px){
  .wrap{padding-left:16px;padding-right:16px}
  main.wrap{padding-top:20px;padding-bottom:86px}
  header .hbar{
    min-height:50px;
    gap:7px !important;
    padding:10px 16px !important;
  }
  .logo{font-size:18px}
  .hero-h1{font-size:28px}
  .big,#t-home .big,#stBal,#stBets,#stEarned{font-size:30px}
  #marketList{grid-template-columns:1fr}
  #marketList .card,#hotMarket .card{padding:14px !important}
  .mbox{padding:22px;max-height:calc(100vh - 32px)}
  footer > .wrap{padding:30px 16px 22px !important}
}
@media(max-width:440px){
  .wallet{padding:6px 9px;font-size:12.5px}
  header .hnav .tab{padding:7px 8px !important}
}

/* ==========================================================================
   FORELY MOBILE SHELL — 24/08/2026
   Header desktop co quá nhiều điểm chạm cho viewport điện thoại. Khối này
   giữ lại logo, số dư, thông báo, tìm kiếm và menu; các tác vụ phụ chuyển vào
   drawer để không sinh cuộn ngang hoặc nút nằm ngoài màn hình.
   ========================================================================== */
@media (max-width:759px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  body{position:relative}

  header{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  header .hbar{
    width:100%;
    max-width:none !important;
    min-width:0;
    box-sizing:border-box;
    flex-wrap:nowrap;
    gap:6px !important;
    padding:9px 12px !important;
  }

  /* Điều hướng đầy đủ, tài khoản, ngôn ngữ và giao diện vẫn có trong drawer.
     Không để các nút desktop tràn ngang trên mobile. */
  header .hnav,
  header .bizcta,
  header .uemail,
  header #adminLink,
  header #acctBtn,
  header #langBtn,
  header #themeBtn{
    display:none !important;
  }

  header .logo{
    flex:1 1 auto;
    min-width:0;
    white-space:nowrap;
    font-size:17px;
  }
  header .wallet{
    flex:0 0 auto;
    white-space:nowrap;
    padding:6px 8px;
    font-size:12px;
  }

  /* Ba điểm chạm còn lại vừa trong cả màn hình 320px: thông báo, tìm kiếm, menu. */
  header #bellBtn,
  header #searchBtn,
  header #hbtn{
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    height:36px;
    margin-right:0 !important;
    padding:0 !important;
    align-items:center;
    justify-content:center;
  }
  header #searchBtn,
  header #hbtn{display:inline-flex !important}

  /* Các panel đóng không được làm rộng layout; khi mở vẫn vừa viewport. */
  #acctPanel{
    width:min(390px,calc(100vw - 16px)) !important;
    max-width:calc(100vw - 16px);
  }

  .bnav{
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .bnav button{min-width:0}
}
@media (max-width:360px){
  header .hbar{padding-left:10px !important;padding-right:10px !important;gap:5px !important}
  header .wallet{padding:6px 7px;font-size:11.5px}
  header .logo{font-size:16px}
}



/* Năm tab sản phẩm đã chốt giữ nguyên trên desktop và mobile. Cộng đồng, tin
   tức và Portal nằm trong menu/điểm vào theo ngữ cảnh, không cạnh tranh với
   hành trình chính. Khi hẹp, chỉ thu gọn thông tin phụ của tài khoản. */
@media (min-width:760px) and (max-width:1180px){
  header .uemail{display:none !important}
}
@media (min-width:760px) and (max-width:900px){
  header #langBtn,
  header #themeBtn{display:none !important}
  html body header .hnav .tab{padding:6px 8px !important;font-size:12px !important}
}


/* ==========================================================================
   XÁC THỰC NHẬN VOUCHER — giao diện tương phản sáng/tối
   ========================================================================== */
.vv-card{
  margin-top:16px;
  padding:15px;
  border:1px solid var(--f-border-strong);
  border-radius:var(--f-radius-lg);
  background:var(--f-bg-subtle);
  color:var(--f-text-primary);
}
.vv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}
.vv-eyebrow{margin-bottom:3px;color:var(--f-primary);font-size:11px;font-weight:800;letter-spacing:.08em}
.vv-head h3{margin:0;color:var(--f-text-primary);font-size:var(--f-size-lg);line-height:1.25}
.vv-head p{margin:4px 0 0;color:var(--f-text-secondary);font-size:var(--f-size-sm);line-height:1.5}
.vv-badge{flex:0 0 auto;padding:5px 8px;border:1px solid var(--f-primary-border);border-radius:var(--f-radius-full);background:var(--f-primary-soft);color:var(--f-text-primary);font-size:11px;font-weight:800;white-space:nowrap}
.vv-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:15px}
.vv-step{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:9px;border:1px solid var(--f-border);border-radius:var(--f-radius-md);background:var(--f-bg-surface)}
.vv-step-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;border:1px solid var(--f-border-strong);border-radius:50%;color:var(--f-text-secondary);font-size:13px;font-weight:900;line-height:1}
.vv-step.is-ok .vv-step-icon{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok-ink)}
.vv-step b,.vv-step small{display:block;min-width:0}
.vv-step b{color:var(--f-text-primary);font-size:12px;line-height:1.25}
.vv-step small{margin-top:2px;color:var(--f-text-secondary);font-size:11px;line-height:1.35}
.vv-section{padding-top:13px;margin-top:13px;border-top:1px solid var(--f-border)}
.vv-section-title{margin-bottom:7px;color:var(--f-text-primary);font-size:var(--f-size-sm);font-weight:800}
.vv-helper{margin:0 0 9px;color:var(--f-text-secondary);font-size:12px;line-height:1.45}
.vv-form-row{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.vv-form-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px}
.vv-field{flex:1 1 190px;min-width:0}
.vv-field label{display:block;margin:0 0 4px;color:var(--f-text-secondary);font-size:12px;font-weight:800}
.vv-card input{box-sizing:border-box;width:100%;min-height:40px;padding:9px 10px;border:1px solid var(--f-border-strong);border-radius:var(--f-radius-md);background:var(--f-bg-surface);color:var(--f-text-primary);font:inherit;font-size:var(--f-size-body)}
.vv-card input::placeholder{color:var(--f-text-secondary);opacity:.9}
.vv-card input:focus{outline:3px solid var(--f-primary-soft);outline-offset:1px;border-color:var(--f-border-focus)}
.vv-phone-field{flex:1 1 190px}
.vv-otp-row{margin-top:9px}
.vv-otp-field{flex:1 1 135px;max-width:210px}
.vv-action-row{margin-top:9px}
.vv-complete{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--ok-line);border-radius:var(--f-radius-md);background:var(--ok-bg)}
.vv-complete-mark{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--ok-ink);color:var(--f-bg-canvas);font-weight:900;line-height:1}
.vv-complete span:nth-child(2){flex:1;min-width:0}
.vv-complete b,.vv-complete small{display:block}
.vv-complete b{color:var(--f-text-primary);font-size:12px}
.vv-complete small{margin-top:2px;color:var(--f-text-secondary);font-size:11px;line-height:1.35}
.vv-link-btn{margin-left:auto;padding:3px 0;border:0;background:transparent;color:var(--f-text-link);font:inherit;font-size:12px;font-weight:800;text-decoration:underline;cursor:pointer}
.vv-link-btn:hover{color:var(--f-text-primary)}
.vv-note{margin:13px 0 0;color:var(--f-text-secondary);font-size:11px;line-height:1.5}
.rw-closed-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 auto}
.rw-closed-actions .btn{width:auto;max-width:290px}
html[data-theme="dark"] .vv-card{box-shadow:none}
html[data-theme="dark"] .vv-badge{color:var(--f-text-primary)}
@media (max-width:520px){
  .vv-head{flex-direction:column}
  .vv-checks,.vv-form-grid{grid-template-columns:1fr}
  .vv-otp-field{max-width:none}
  .vv-form-row .btn{flex:1 1 140px}
}