*{margin:0;padding:0;box-sizing:border-box}
  body{font-family:Tahoma, "Segoe UI", system-ui, sans-serif;display:flex;justify-content:center;padding:20px 12px;color:#0F172A;min-height:100vh}
  .phone{width:410px;max-width:100%;background:#FFF;border-radius:42px;overflow:hidden;position:relative}
  .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:92px;height:26px;background:#0F172A;border-radius:20px;z-index:30}
  .scroll{height:880px;max-height:88vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  .scroll::-webkit-scrollbar{display:none}
  .header{padding:10px 0px 0px 7px;position:sticky;top:0;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);z-index:20;border-bottom:1px solid rgba(226,232,240,.8)}
  .toprow{display:flex;justify-content:space-between;align-items:center}
  .brand{display:flex;gap:10px;align-items:center}
  .logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#2563EB,#7C3AED);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;box-shadow:0 8px 16px rgba(37,99,235,.25)}
  .brand b{font-size:14px;font-weight:800}
  .brand i{font-style:normal;font-size:10px;letter-spacing:.6px;font-weight:700;color:#2563EB;text-transform:uppercase;display:block}
  .icon-btn{width:38px;height:38px;border-radius:12px;background:#F1F5F9;border:1px solid #E2E8F0;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .search{height:44px;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:14px;display:flex;align-items:center;padding:0 12px;gap:8px}
  .search input{flex:1;border:none;background:transparent;outline:none;font-size:13px;font-weight:500}
  .search input::placeholder{color:#94A3B8}
  .hero{margin:26px 5px 0;border-radius:22px;padding:16px 10px;color:#fff;display:flex;gap:12px;align-items:center;position:relative;overflow:hidden}
  .section{padding:10px 5px 0}
  .section-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .section-h h2{font-size:13px;font-weight:600;letter-spacing:-.2px}
  .section-h span{font-size:10px;color:#64748B;font-weight:500;background:#F1F5F9;padding:4px 8px;border-radius:999px;white-space:nowrap}
  .triple{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .tbtn{border-radius:18px;padding:14px 8px 12px;border:1px solid;text-align:center;cursor:pointer;transition:all .22s;position:relative;box-shadow:0 4px 14px rgba(15,23,42,.04)}
  .tbtn.active{transform:translateY(-2px);box-shadow:0 10px 22px rgba(37,99,235,.14);border-width:1.5px}
  .tbtn .ic{width:42px;height:42px;border-radius:14px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;box-shadow:none}
  .tbtn h3{font-size:12px;font-weight:800;line-height:1.25}
  .tbtn small{font-size:10px;opacity:.7;display:block;margin-top:3px;font-weight:600}
  .tbtn .check{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:8px;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;opacity:.45}
  .tbtn.active .check{opacity:.9}
  .tbtn.chinhquyen{background:linear-gradient(180deg,#EFF6FF,#DBEAFE);border-color:#BFDBFE;color:#1E3A8A}
  .tbtn.chinhquyen .ic{background:linear-gradient(135deg,#2563EB,#1D4ED8);color:#fff}
  .tbtn.chinhquyen.active{border-color:#2563EB;background:linear-gradient(180deg,#DBEAFE,#BFDBFE)}
  .tbtn.doanhnghiep{background:linear-gradient(180deg,#FFF7ED,#FFEDD5);border-color:#FED7AA;color:#7C2D12}
  .tbtn.doanhnghiep .ic{background:linear-gradient(135deg,#FB923C,#EA580C);color:#fff}
  .tbtn.doanhnghiep.active{border-color:#EA580C;box-shadow:0 12px 24px rgba(251,146,60,.18)}
  .tbtn.nguoidan{background:linear-gradient(180deg,#ECFDF5,#D1FAE5);border-color:#A7F3D0;color:#064E3B}
  .tbtn.nguoidan .ic{background:linear-gradient(135deg,#10B981,#059669);color:#fff}
  .tbtn.nguoidan.active{border-color:#059669;box-shadow:0 12px 24px rgba(16,185,129,.18)}
  .fade-in{animation:fadeIn .35s ease}
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  #view-default{display:block}
  #view-portal{display:none}
  #view-cat-detail{display:none}
  .hscroll{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding-bottom:6px}
  .hscroll::-webkit-scrollbar{display:none}
  .story-big{min-width:300px;max-width:300px;scroll-snap-align:start;background:#fff;border:1.5px solid #E2E8F0;border-radius:22px;overflow:hidden;cursor:pointer;transition:all .25s;box-shadow:0 4px 14px rgba(15,23,42,.06)}
  .story-big.active{border-color:#2563EB;box-shadow:0 12px 28px rgba(37,99,235,.18);transform:translateY(-2px)}
  .story-img{height:148px;position:relative;overflow:hidden}
  .story-img .bg{position:absolute;inset:0}
  .story-img .ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,23,42,.78) 0%,transparent 60%)}
  .story-img .badge{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800;display:flex;align-items:center;gap:4px;color:#0F172A}
  .story-img .bot{position:absolute;left:12px;right:12px;bottom:10px;color:#fff}
  .story-img .bot b{display:block;font-size:13px;line-height:1.3;font-weight:800;text-shadow:0 1px 6px rgba(0,0,0,.4)}
  .story-img .bot span{font-size:11px;opacity:.85;margin-top:3px;display:block}
  .story-body{padding:12px 14px}
  .story-body p{font-size:12px;line-height:1.5;color:#475569;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .story-stats{display:flex;gap:8px;margin-top:10px}
  .stat{flex:1;background:#F8FAFC;border:1px solid #F1F5F9;border-radius:10px;padding:7px 8px;text-align:center}
  .stat b{display:block;font-size:13px;font-weight:800}
  .stat i{display:block;font-style:normal;font-size:9px;color:#64748B;margin-top:2px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
  .related-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .related-head .line{width:3px;height:16px;background:#2563EB;border-radius:999px}
  .rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .rel-card{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:12px;display:flex;flex-direction:row;gap:8px;align-items:flex-start;cursor:pointer;transition:all .2s;min-height:88px;min-width:0}
  .rel-card:active{transform:scale(.97)}
  .rel-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
  .rel-card .rel-main{flex:1;min-width:0}
  .rel-card h4{font-size:12px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
  .rel-card p{font-size:10px;color:#64748B;margin-top:2px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rel-card .go{display:none}
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .cat-item{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:10px 6px 9px;text-align:center;cursor:pointer;transition:all .18s;position:relative;min-height:92px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .cat-item:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(15,23,42,.07)}
  .cat-item:active{transform:scale(.95)}
  .cat-ic{width:42px;height:42px;border-radius:12px;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(0,0,0,.04)}
  .cat-item b{font-size:10px;font-weight:550;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:26px;display:flex;align-items:center;justify-content:center;text-align:center}
  .cat-item.wide{grid-column:span 2;flex-direction:row;text-align:left;padding:12px 12px;gap:12px;min-height:74px}
  .cat-item.wide .cat-ic{margin:0;width:44px;height:44px}
  .cat-item.wide b{justify-content:flex-start;text-align:left;-webkit-line-clamp:2;min-height:auto;flex:1;font-size:11px}
  .cat-count{position:absolute;top:6px;right:6px;background:#2563eb;color:#fff;font-size:8px;font-weight:400;padding:2px 6px;border-radius:999px;min-width:22px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.15)}
  .cat-item.wide .cat-count{top:8px;right:8px;background:#EFF6FF;color:#2563EB;border:1px solid #BFDBFE;box-shadow:none}
  .cat-item.business .cat-count{background:#FFF7ED;color:#9A3412;border:1px solid #FED7AA}
  .cat-item.people .cat-count{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
  .faq-list{display:flex;flex-direction:column;gap:10px}
  .faq-item{background:#fff;border:1px solid #E2E8F0;border-radius:16px;overflow:hidden;transition:all .22s}
  .faq-item.open{border-color:#BFDBFE;box-shadow:0 8px 20px rgba(37,99,235,.10)}
  .faq-q{padding:14px;display:flex;justify-content:space-between;gap:12px;cursor:pointer;align-items:center}
  .faq-q h4{font-size:12.5px;font-weight:700;line-height:1.4;flex:1}
  .faq-q .arrow{width:28px;height:28px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .22s}
  .faq-item.open .arrow{background:#EFF6FF;color:#2563EB;transform:rotate(180deg)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .faq-item.open .faq-a{max-height:200px}
  .faq-a-inner{padding:0 14px 14px;font-size:12px;line-height:1.6;color:#475569}
  .faq-tag{display:inline-flex;font-size:10px;font-weight:700;padding:3px 7px;border-radius:999px;background:#EFF6FF;color:#2563EB;margin-bottom:6px}
  .cat-detail-top{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #E2E8F0;background:#fff;position:sticky;top:0;z-index:15}
  .back-btn{width:34px;height:34px;border-radius:11px;border:1px solid #E2E8F0;background:#F8FAFC;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
  .filter-chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 0;scrollbar-width:none}
  .filter-chips::-webkit-scrollbar{display:none}
  .chip{padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid #E2E8F0;background:#fff;white-space:nowrap;cursor:pointer;transition:all .2s}
  .chip.active{background:#2563EB;color:#fff;border-color:#2563EB}
  .prod-card{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:12px;display:flex;gap:12px;transition:all .2s;cursor:pointer}
  .prod-card:hover{border-color:#BFDBFE;box-shadow:0 8px 20px rgba(15,23,42,.06)}
  .prod-ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(0,0,0,.04)}
  .prod-main{flex:1;min-width:0}
  .prod-main h4{font-size:12.5px;font-weight:750;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .prod-provider{font-size:11px;color:#64748B;margin-top:2px;display:flex;align-items:center;gap:6px}
  .prod-desc{font-size:11px;color:#475569;margin-top:6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prod-foot{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .prod-tag{font-size:9px;font-weight:700;padding:3px 6px;border-radius:999px;background:#F1F5F9;color:#475569;border:1px solid #E2E8F0}
  .prod-tag.free{background:#ECFDF5;color:#065F46;border-color:#A7F3D0}
  .prod-tag.hot{background:#FEF2F2;color:#991B1B;border-color:#FECACA}
  .prod-action{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
  .prod-rating{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:700}
  .btn-use{background:#2563EB;color:#fff;border:none;padding:6px 12px;border-radius:999px;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap}
  .btn-use.light{background:#EFF6FF;color:#2563EB}
  .bnav{position:sticky;bottom:0;background:rgba(255,255,255,.95);backdrop-filter:blur(18px);border-top:1px solid #E2E8F0;display:flex;justify-content:space-around;padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:25}
  .navi{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:500;color:#334155;min-width:58px;padding:4px 0;border-radius:12px;cursor:pointer}
  .navi.active{color:#2563EB}
  .navi .ni{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1px solid transparent}
  .navi.active .ni{background:#EFF6FF;border-color:#BFDBFE}
  .toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(16px);background:#0F172A;color:#fff;font-size:12px;font-weight:650;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:all .25s ease;z-index:100;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.3)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#F1F5F9;border:1px solid #E2E8F0;font-size:11px;font-weight:600}

  #view-product-detail{display:none}
  .pd-feature{display:flex;gap:12px;background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:12px}
  .pd-feature-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .pd-step{display:flex;gap:12px;position:relative;padding-bottom:18px}
  .pd-step-line{position:absolute;left:15px;top:32px;bottom:-2px;width:2px;background:#E2E8F0}
  .pd-step:last-child .pd-step-line{display:none}
  .pd-step-num{width:32px;height:32px;border-radius:50%;background:#2563EB;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;position:relative;z-index:1}
  .pd-step.done .pd-step-num{background:#10B981}
  .pd-step.active .pd-step-num{background:#2563EB;box-shadow:0 0 0 4px rgba(37,99,235,0.15)}
  .pd-customer{min-width:180px;background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:12px;scroll-snap-align:start}
  .pd-image{min-width:220px;height:140px;border-radius:14px;border:1px solid #E2E8F0;overflow:hidden;position:relative;scroll-snap-align:start;background:#F8FAFC;cursor:pointer}
  .pd-image .img-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:700;color:#475569}
  .rating-bar{height:6px;background:#F1F5F9;border-radius:999px;overflow:hidden;flex:1}
  .rating-bar-fill{height:100%;background:#2563EB;border-radius:999px}

  #view-training{display:none}
  .train-card{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:12px;transition:all .2s;cursor:pointer}
  .train-card:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(15,23,42,0.07)}
  .train-progress{height:6px;background:#F1F5F9;border-radius:999px;overflow:hidden}
  .train-progress-fill{height:100%;background:#2563EB;border-radius:999px}
  .level-badge{font-size:9px;font-weight:800;padding:2px 6px;border-radius:999px}
  .level-basic{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
  .level-advanced{background:#FFF7ED;color:#9A3412;border:1px solid #FED7AA}
  .level-expert{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}


/* =========================================================
   Xã Số — mobile / Capacitor overrides
   ========================================================= */
:root{
  --app-max: 430px;
  --navy: #0F172A;
  --blue: #2563EB;
}
html, body{
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  background: #020617;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
body{
  display: flex;
  justify-content: center;
  align-items: stretch;
  min-height: 100dvh;
  font-family: Tahoma, "Segoe UI", system-ui, sans-serif;
  color: #0F172A;
}
.app{
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  height: 100svh;
  background: #FFF;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (min-width: 500px){
  body{
    background: radial-gradient(1200px 600px at 50% 0%, #1e3a8a 0%, #020617 55%);
    padding: 16px 0 !important;
    align-items: center;
  }
  .app{
    max-width: var(--app-max);
    height: min(920px, calc(100dvh - 32px));
    border-radius: 28px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.45);
  }
}
.scroll{
  flex: 1 1 auto;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.hscroll{
  display: flex !important;
  gap: 12px;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.hscroll > *{
  flex: 0 0 auto;
}
.header{
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0 12px !important;
}
.app-logo{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15,23,42,.14);
  flex-shrink: 0;
}
.brand{ gap: 10px; }
.brand > div{ min-width: 0; }
.bnav{
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto;
  display: flex !important;
  background: rgba(255,255,255,.96) !important;
  z-index: 40;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
.toast{
  position: absolute;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
button, .tbtn, .navi, .cat-item, .prod-card, .icon-btn, .chip, .faq-q,
.search-go, .btn-auth, .btn-use, .interest-chip, .cat-tile, .adv-yn button, .adv-pick, .back-btn, .star-btn{
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit !important;
}
input, select, textarea, button{
  font-family: inherit !important;
}

/* Splash */
#app-splash{
  position: absolute;
  inset: 0;
  z-index: 200;
  background: #0B1220 url('../assets/splash.jpg') center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: opacity .45s ease, visibility .45s ease;
}
#app-splash.hide{ opacity: 0; visibility: hidden; pointer-events: none; }
#app-splash .splash-foot{
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}

/* Video detail as a real screen */
#view-video-detail{
  display: none;
  min-height: 100%;
  background: #fff;
}
#vd-player{
  background: #0F172A;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  overflow: hidden;
}
#vd-player iframe,
#vd-player video,
.news-thumb iframe,
.news-thumb video.playing-src{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  object-fit: contain;
}

/* Home phóng sự cards */
.news-card{
  min-width: 260px;
  max-width: 280px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  cursor: pointer;
}
.news-thumb{
  height: 146px;
  position: relative;
  overflow: hidden;
  background: #0F172A;
}
.news-thumb img.news-poster,
.news-thumb video.news-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0F172A;
}
.news-thumb-ov{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.05) 30%, rgba(15,23,42,0.72) 100%);
  pointer-events: none;
}
.news-thumb.playing .news-thumb-ov,
.news-thumb.playing .play-hit,
.news-thumb.playing .news-badge,
.news-thumb.playing .news-dur,
.news-thumb.playing .news-sub,
.news-thumb.playing .news-poster{
  display: none;
}
.news-thumb.playing iframe,
.news-thumb.playing video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.news-badge{
  position: absolute;
  left: 12px;
  top: 12px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  z-index: 2;
}
.play-hit{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  z-index: 3;
}
.news-dur{
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 8px;
  z-index: 2;
}
.news-sub{
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 70px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  z-index: 2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-body{ padding: 10px 12px; }
.news-title{
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-meta{
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #64748B;
}
.news-meta .dot{
  width: 3px;
  height: 3px;
  background: #CBD5E1;
  border-radius: 50%;
}
.rel-vid{
  display: flex;
  gap: 10px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.rel-vid-thumb{
  width: 110px;
  height: 72px;
  background: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  overflow: hidden;
}
.rel-vid-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rel-vid-body{ padding: 8px 8px 8px 0; min-width: 0; }
.rel-vid-title{ font-size: 12px; font-weight: 800; line-height: 1.3; }
.rel-vid-dur{ font-size: 10px; color: #64748B; margin-top: 4px; }
.user-auth{
  position:absolute;inset:0;z-index:400 !important;background:rgba(15,23,42,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:18px 16px 88px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.user-auth-box{
  width:100%;max-width:420px;background:#fff;border-radius:18px;padding:18px 16px 14px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);margin:auto 0;max-height:none;
}
.user-auth-box label{display:block;font-size:11px;font-weight:800;margin:10px 0 4px}
.user-auth-box input,.user-auth-box select{width:100%;height:40px;border:1px solid #E2E8F0;border-radius:10px;padding:0 10px;font-size:13px;background:#fff}
.btn-auth{flex:1;height:42px;border:0;border-radius:12px;background:#2563EB;color:#fff;font-weight:800;cursor:pointer}
.story-more{margin-top:10px;display:inline-flex;align-items:center;gap:4px;background:#2563EB;color:#fff;font-size:11px;font-weight:800;padding:7px 12px;border-radius:999px}
.story-article p{margin:0 0 10px}
.story-article h2,.story-article h3{margin:12px 0 6px;font-size:15px}
#st-player iframe, #st-player video{width:100%;height:100%;border:0;display:block;background:#000}
.btn-auth.ghost{background:#F1F5F9;color:#0F172A;border:1px solid #E2E8F0}
#cd-player iframe, #cd-player video{width:100%;height:100%;border:0;display:block;background:#000}

/* xaso-round-ui */
.hint-zone{
  background: #0F172A;
  border: 0;
  border-radius: 24px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.22);
}
.hint-ic{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg,#2563EB,#06B6D4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hint-copy{flex:1;min-width:0}
.hint-title{font-size:12px;font-weight:800;color:#fff}
.hint-sub{font-size:11px;color:rgba(255,255,255,.7);margin-top:2px;line-height:1.4}
.st-sec-label{
  font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  color:#2563EB;margin:14px 0 8px;
}

/* ===== grid 12px — hết xô lệch trái/phải ===== */
:root{ --pad: 12px; }
.header{
  padding: calc(8px + env(safe-area-inset-top, 0px)) var(--pad) 0 var(--pad) !important;
}
.search{ margin: 10px 0 12px; }
.section{ padding: 12px var(--pad) 0 !important; }
.section-h{ margin-bottom: 10px; }
.hero{ margin: 0 !important; }
#view-portal > .hero{ margin: 25px var(--pad) 0 !important; }
.cat-detail-top{ padding: 12px var(--pad); }
.filter-chips{ padding: 10px var(--pad) 0; }
.toprow{ align-items: center; gap: 8px; }
.toprow > div:last-child{ flex-shrink: 0; }
.brand{ flex: 1; min-width: 0; }
.place-block{ min-width: 0; flex: 1; overflow: hidden; }
.place-block i{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .3px;
}
.place-row{ display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.place-block b#commune-name{
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-line{
  flex: 0 0 auto;
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}
#app-chrome,
#view-default, #view-portal, #view-training, #view-cat-detail,
#view-product-detail, #view-story-detail, #view-sanpham, #view-thidua,
#view-canhan, #view-phananh, #view-course-detail, #view-video-detail{
  width: 100%;
  max-width: 100%;
}
#view-story-detail, #view-course-detail, #view-sanpham,
#view-thidua, #view-canhan, #view-phananh{ display: none; }
.scroll{ overflow-x: hidden; }

#view-search{display:none;width:100%}
#search-results .prod-card{margin-bottom:8px}

#commune-tagline{text-transform:uppercase !important;letter-spacing:.6px !important;font-size:13px;font-weight:800}
.search-go{border:0;background:#2563EB;color:#fff;font-size:12px;font-weight:800;height:32px;padding:0 12px;border-radius:10px;cursor:pointer;flex-shrink:0}
.search{gap:8px}

.zone-head{margin:0 0 12px}
.zone-kicker{display:inline-flex;align-items:center;gap:6px;color:#2563EB;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase}
.zone-kicker svg{flex-shrink:0}
.zone-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.zone-title{margin:0;font-size:18px !important;font-weight:800;letter-spacing:-.4px;color:#0F172A;line-height:1.25}
.zone-more{font-size:12px;font-weight:800;color:#2563EB;white-space:nowrap;cursor:pointer}
.loc-ic,.wx-ic{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}
.loc-ic{color:#2563EB}
.wx-ic{color:#F59E0B}
.place-row{align-items:center}
.place-block b#commune-name{flex:1 1 auto}

.train-hero{background:linear-gradient(135deg,#0F172A 0%,#1E3A8A 55%,#2563EB);border-radius:24px;padding:16px 14px 14px;color:#fff;position:relative;overflow:hidden;cursor:pointer}
.train-hero-row{display:flex;gap:12px;align-items:center;position:relative}
.train-hero-ic{width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.train-hero-title{font-size:13.5px;font-weight:800;line-height:1.35}
.train-hero-meta{font-size:11px;opacity:.78;margin-top:4px;line-height:1.4}
.train-hero-go{flex-shrink:0;display:flex;align-items:center;opacity:.95}
.train-hero-stats{margin-top:12px;display:flex;gap:8px}
.train-stat{flex:1;background:rgba(15,23,42,.28);border-radius:14px;padding:10px 8px 9px}
.train-stat b{display:block;font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.1}
.train-stat span{display:block;font-size:10px;opacity:.78;margin-top:4px;font-weight:600}

#home-search{display:none !important}
#home-search.is-open{display:flex !important}
.news-card{min-width:268px;max-width:300px;border-radius:20px;box-shadow:0 8px 24px rgba(15,23,42,.08);border:0}
.news-thumb{height:168px}
.news-title-ov{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;z-index:2}
.news-title-ov b{display:block;font-size:13px;font-weight:800;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.news-title-ov small{display:block;margin-top:3px;font-size:11px;opacity:.9}
.news-excerpt{font-size:12.5px;line-height:1.45;color:#334155;margin:0 0 10px}
.news-stats{display:flex;gap:6px}
.news-stat{flex:1;background:#F1F5F9;border-radius:12px;padding:8px 4px;text-align:center}
.news-stat b{display:block;font-size:13px;font-weight:800;color:#0F172A}
.news-stat span{display:block;font-size:9px;font-weight:800;color:#64748B;letter-spacing:.3px;margin-top:2px}
.news-foot{margin-top:8px;font-size:11px;color:#64748B;display:flex;align-items:center;gap:4px}
.zone-kicker.red{color:#DC2626}
.zone-pill{background:#FEE2E2;color:#B91C1C;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px}
.hero-card{border-radius:22px;overflow:hidden;position:relative;min-height:168px;color:#fff}
.hero-card .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.15),rgba(15,23,42,.78))}

.smart-kicker{color:#0F766E}
.smart-feat{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.08);cursor:pointer}
.smart-photo{position:relative;height:180px;background:linear-gradient(135deg,#0F172A 0%,#0F766E 50%,#14B8A6 100%)}
.news-badge-light{position:absolute;left:12px;top:12px;z-index:2;background:rgba(255,255,255,.94);color:#0F172A;font-size:10px;font-weight:800;padding:5px 10px;border-radius:999px;letter-spacing:.2px}
.news-card .news-badge{background:rgba(255,255,255,.94);color:#0F172A;border-radius:999px;font-size:10px;padding:5px 10px}
.news-body{padding:12px 14px 14px}
.news-excerpt{color:#475569;font-size:12.5px;line-height:1.5;min-height:38px}
.news-stats{display:flex;gap:8px;margin-top:2px}
.news-stat{flex:1;background:#F1F5F9;border-radius:14px;padding:10px 6px 8px;text-align:center}
.news-stat b{font-size:15px;letter-spacing:-.3px}
.news-stat span{font-size:9px;letter-spacing:.4px}
.news-foot{margin-top:10px}
.zone-title{font-size:20px !important;font-weight:800;color:#0F172A}
.zone-pill{background:#FEE2E2;color:#BE123C}

.xtm-card{background:linear-gradient(to bottom right,#0f172a 0%,#1e3a8a 52%,#2563eb 100%);border-radius:24px;padding:20px 18px 16px;color:#fff;cursor:pointer;box-shadow:0 16px 36px rgba(15,23,42,.28);overflow:hidden;position:relative}
.xtm-inner{position:relative;z-index:1}
.xtm-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(42px)}
.xtm-orb-cyan{right:-40px;top:-56px;width:192px;height:192px;background:rgba(103,232,249,.28)}
.xtm-orb-violet{left:-48px;top:32%;width:160px;height:160px;background:rgba(167,139,250,.22)}
.xtm-orb-emerald{right:22%;bottom:-64px;width:160px;height:160px;background:rgba(110,231,183,.26)}
.xtm-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12);padding:4px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.3px}
.xtm-dot{width:7px;height:7px;border-radius:50%;background:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.28);position:relative}
.xtm-dot:after{content:"";position:absolute;inset:-3px;border-radius:50%;background:#34D399;opacity:.45;animation:xtmPing 1.6s ease-out infinite}
@keyframes xtmPing{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.1);opacity:0}}
.xtm-title{margin:12px 0 0;font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.35px;max-width:16rem}
.xtm-title em{font-style:normal;background:linear-gradient(90deg,#6ee7b7,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.xtm-desc{margin:8px 0 14px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.8);max-width:94%}
.xtm-cta{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#0F172A;font-size:12.5px;font-weight:800;padding:8px 14px;border-radius:999px}
.xtm-stats{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);border-radius:16px;backdrop-filter:blur(8px)}
.xtm-stats div{padding:10px 6px 11px;text-align:center}
.xtm-stats div+div{border-left:1px solid rgba(255,255,255,.15)}
.xtm-stats svg{display:block;margin:0 auto 4px;opacity:.75}
.xtm-stats b{display:block;font-size:16px;font-weight:800;letter-spacing:-.2px}
.xtm-stats span{display:block;font-size:9.5px;opacity:.75;margin-top:2px;font-weight:600}
.ps-card{min-width:268px;max-width:280px;scroll-snap-align:start;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.08);cursor:pointer;flex-shrink:0}
.ps-photo{position:relative;height:168px;background-size:cover;background-position:center;background-color:#1E3A8A}
.ps-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.05) 30%,rgba(15,23,42,.78) 100%)}
.ps-badge{position:absolute;left:12px;top:12px;z-index:2;background:rgba(255,255,255,.95);color:#0F172A;font-size:10px;font-weight:800;padding:5px 10px;border-radius:999px}
.ps-photo .play-hit{z-index:2}
.ps-ov{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;color:#fff}
.ps-ov b{display:block;font-size:13.5px;font-weight:800;line-height:1.3;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.ps-ov small{display:block;margin-top:4px;font-size:11px;opacity:.92}
.ps-body{padding:12px 14px 14px}
.ps-body p{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:#475569;min-height:38px}
#app-chrome .zone-kicker{font-size:10px;color:#2563EB}

.ps-photo img.ps-poster, .ps-photo video.ps-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;
}

/* số LƯỢT — thu nhỏ */
.news-foot{font-size:10px !important;font-weight:600}
.luot-stat b{font-size:11px !important;letter-spacing:0}
.luot-stat span{font-size:8px !important}
.stat.luot-stat b{font-size:11px !important}



/* ===== Portal page (prototype) ===== */
#view-portal > .hero{
  border-radius:24px;
  padding:20px 18px 18px !important;
  position:relative;
  overflow:hidden;
  min-height:118px;
  box-shadow:0 16px 36px rgba(15,23,42,.22);
}
#view-portal > .hero.portal-cq{background:linear-gradient(to bottom right,#0f172a 0%,#1e3a8a 52%,#2563eb 100%) !important}
#view-portal > .hero.portal-kt{background:linear-gradient(to bottom right,#7c2d12 0%,#ea580c 55%,#fb923c 100%) !important}
#view-portal > .hero.portal-nd{background:linear-gradient(to bottom right,#064e3b 0%,#059669 55%,#34d399 100%) !important}
#view-portal > .hero:before{
  content:"";position:absolute;right:-36px;top:-48px;width:160px;height:160px;border-radius:50%;
  background:rgba(165,243,252,.22);filter:blur(36px);pointer-events:none;
}
#portalHeroTitle{font-size:17px !important;font-weight:800;letter-spacing:-.3px;max-width:20rem}
#portalHeroDesc{font-size:11.5px !important;color:rgba(255,255,255,.8)}
.story-big{min-width:268px;max-width:280px;border:0;border-radius:20px;box-shadow:0 10px 28px rgba(15,23,42,.08)}
.story-img{height:168px}
.story-img .story-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.story-img .ov{background:linear-gradient(180deg,rgba(15,23,42,.05) 30%,rgba(15,23,42,.78) 100%)}
.story-img .badge{background:rgba(255,255,255,.94);border-radius:8px;font-size:10px;padding:5px 8px}
.story-read{
  position:absolute;right:10px;top:10px;z-index:3;
  background:rgba(255,255,255,.92);color:#334155;
  font-size:10px;font-weight:800;padding:5px 8px;border-radius:8px;
}
.story-more{display:none}
#portalStoryTitle{font-size:18px !important;font-weight:800}
#view-portal .section-h h2{font-size:13px;font-weight:800}
.sort-inp{width:58px;height:32px;border:1px solid #E2E8F0;border-radius:8px;padding:0 6px;font-size:12px;font-weight:800;text-align:center}
.sort-cell{white-space:nowrap}
.sort-cell .btn{padding:4px 7px}


/* interest + onboard */
.interest-picks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.interest-chip{border:1px solid #E2E8F0;background:#fff;color:#334155;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;cursor:pointer}
.interest-chip.on{background:#2563EB;color:#fff;border-color:#2563EB}
#home-suggest-scroll .sug-card{min-width:200px;max-width:220px;background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:12px;scroll-snap-align:start;cursor:pointer}
#onboard-modal{z-index:500 !important;align-items:flex-start;padding-top:28px}

/* Tạm ẩn mục Học kỹ năng số trên Home. JS bỏ class is-off khi XASO_HOME_TRAINING=true */
#home-zone-training.is-off{display:none !important}

/* portal category swipe 2x2 */
.cat-swipe-hint{font-size:11px;color:#64748B;margin-top:-6px;margin-bottom:10px;font-weight:500}
.cat-swipe-wrap{position:relative}
.cat-swipe-rail{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;touch-action:pan-x pan-y;padding:2px 2px 8px;
}
.cat-swipe-rail::-webkit-scrollbar{display:none}
.cat-page{
  flex:0 0 calc(100% - 18px);scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;
  min-height:0;
}
.cat-tile{
  appearance:none;-webkit-appearance:none;border:0;outline:0;cursor:pointer;
  border-radius:12px;padding:22px 12px 12px;min-height:76px;height:100%;width:100%;
  color:#fff;position:relative;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;
  font-family:Tahoma,"Segoe UI",system-ui,sans-serif;
  background:linear-gradient(135deg,#2563EB 0%,#1E3A8A 100%);
  box-shadow:none;transform:none;filter:none;
}
.cat-tile.cq{background:linear-gradient(135deg,#2563EB 0%,#1E3A8A 100%)}
.cat-tile.kt{background:linear-gradient(135deg,#EA580C 0%,#9A3412 100%)}
.cat-tile.xh{background:linear-gradient(135deg,#059669 0%,#064E3B 100%)}
.cat-tile:active{opacity:.92}
.cat-tile-ic{
  width:22px;height:22px;margin:0;padding:0;border-radius:0;
  background:transparent;color:#fff;order:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.cat-tile-ic svg{width:20px;height:20px;stroke:#fff}
.cat-tile b{
  order:2;flex:1;min-width:0;
  font-family:Tahoma,"Segoe UI",system-ui,sans-serif;
  font-size:12px;font-weight:700;line-height:1.3;color:#fff;
  text-align:right;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.cat-tile-count{
  display:block;position:absolute;top:6px;right:8px;
  font-family:Tahoma,"Segoe UI",system-ui,sans-serif;
  font-size:11px;font-weight:700;color:#fff;line-height:1;
  background:transparent;padding:0;border-radius:0;
}
.cat-swipe-fade{
  pointer-events:none;position:absolute;top:2px;right:0;bottom:8px;width:36px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 88%);
  transition:opacity .2s;
}
.cat-swipe-foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px;min-height:18px}
.cat-swipe-dots{display:flex;gap:6px;align-items:center}
.cat-dot{width:6px;height:6px;border-radius:999px;background:#E2E8F0;display:block;transition:all .2s}
.cat-dot.on{width:18px;background:#2563EB}
.cat-dot.on.kt{background:#EA580C}
.cat-dot.on.xh{background:#059669}
.cat-swipe-page{font-size:11px;font-weight:700;color:#64748B}

/* related products: 2 / row, swipe pages */
.rel-swipe-wrap{position:relative}
.rel-swipe-rail{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;touch-action:pan-x pan-y;padding:2px 2px 8px;
}
.rel-swipe-rail::-webkit-scrollbar{display:none}
.rel-page{
  flex:0 0 calc(100% - 18px);scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0;
}
.rel-swipe-fade{
  pointer-events:none;position:absolute;top:2px;right:0;bottom:8px;width:36px;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 88%);
  transition:opacity .2s;
}

.hint-tip{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:11px;line-height:1.45;color:rgba(255,255,255,.88);font-weight:500}
.hint-tip i{font-style:italic}
.hint-tip-ic{flex-shrink:0;width:18px;height:18px;border-radius:999px;background:rgba(251,191,36,.2);color:#FBBF24;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}

/* portal advisor (thay AI box) */
#portal-ai-box.is-off{display:none !important}
.adv-box{margin-top:16px;background:linear-gradient(180deg,#F8FAFC,#EEF2FF);border:1px solid #E0E7FF;border-radius:18px;padding:14px}
.adv-ask{display:flex;flex-direction:column;gap:12px}
.adv-ask-q{font-size:13px;font-weight:800;color:#1E3A8A;line-height:1.45}
.adv-ask-sub{font-size:11px;color:#64748B;margin-top:4px;font-weight:600}
.adv-yn{display:flex;gap:8px}
.adv-yn button{flex:1;height:40px;border:0;border-radius:12px;font-weight:800;cursor:pointer;font-size:13px}
.adv-yes{background:#2563EB;color:#fff}
.adv-no{background:#fff;color:#334155;border:1px solid #E2E8F0 !important}
.adv-picks{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.adv-pick{height:42px;border:0;border-radius:12px;font-weight:800;cursor:pointer;color:#fff;font-size:13px}
.adv-pick.cq{background:linear-gradient(135deg,#38BDF8,#3B82F6)}
.adv-pick.kt{background:linear-gradient(135deg,#FDBA74,#FB923C)}
.adv-pick.xh{background:linear-gradient(135deg,#6EE7B7,#10B981)}
.adv-head{font-size:12px;font-weight:800;color:#1E3A8A;margin-bottom:8px}
.adv-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.adv-scroll::-webkit-scrollbar{display:none}
.adv-card{min-width:196px;max-width:220px;background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:12px;scroll-snap-align:start;cursor:pointer;flex-shrink:0}
.adv-card b{display:block;font-size:12.5px;font-weight:800;line-height:1.3;color:#0F172A}
.adv-card small{display:block;margin-top:4px;font-size:11px;color:#64748B}
.adv-empty{font-size:12px;color:#64748B;padding:6px 0}

/* Ẩn GPS / vị trí tự động trên header (giống thời tiết) */
.place-row, #commune-name, .loc-ic, #weather-text, #weather-icon{display:none !important}

/* Home: nới khoảng cách giữa các zone */
#home-zone-gates{
  padding-top: 28px !important;   /* header → Cấp dịch vụ */
  padding-bottom: 0 !important;
}
#home-zone-news{
  padding-top: 32px !important;   /* 3 nút Cổng → Phóng sự */
  padding-bottom: 16px !important;
}
#home-zone-hero{
  padding-top: 20px !important;   /* Phóng sự → Hero */
  padding-bottom: 16px !important;
}
#home-zone-suggest{
  padding-top: 20px !important;   /* Hero → Gợi ý */
  padding-bottom: 120px !important;
}

/* Home titles + scroll indicators */
#home-zone-gates .zone-title{font-size:18px !important}
#home-zone-news .zone-title{font-size:19px !important}
#home-zone-gates .zone-head{margin-bottom:15px !important} /* +5px */
#home-zone-news .zone-head{margin-bottom:15px !important}  /* +3px */

#news-scroll, #home-suggest-scroll{
  scrollbar-width: none !important;
}
#news-scroll::-webkit-scrollbar,
#home-suggest-scroll::-webkit-scrollbar{display:none !important}

.hs-ind{
  display:flex;gap:6px;justify-content:center;align-items:center;
  margin-top:10px;min-height:10px;
}
.hs-dash{
  width:6px;height:6px;border-radius:999px;background:#E2E8F0;
  display:block;transition:all .25s;
}
.hs-dash.on{width:20px;background:#2563EB}
.hs-dot{
  width:6px;height:6px;border-radius:50%;background:#E2E8F0;
  display:block;transition:all .25s;
}
.hs-dot.on{background:#2563EB;transform:scale(1.25)}

/* Portal: khoảng cách giữa các zone */
#portal-zone-stories{
  padding-top: 25px !important;   /* Hero → Câu chuyện thành công */
  padding-bottom: 0 !important;
}
#portal-zone-related{
  padding-top: 20px !important;   /* Câu chuyện → Sản phẩm liên quan */
  padding-bottom: 0 !important;
}
#portal-zone-cats{
  padding-top: 25px !important;   /* Sản phẩm liên quan → Danh mục */
  padding-bottom: 0 !important;
}
#portal-zone-faq{
  padding-top: 25px !important;   /* Danh mục → Câu hỏi thường dùng */
  padding-bottom: 120px !important;
}
#view-portal #portal-advisor{
  margin-top: 25px !important;    /* Câu hỏi → Gợi ý */
}

/* Be Vietnam Pro — local (nhãn cổng) */
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/bv-400-vi.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/bv-400-lat.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/bv-700-vi.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/bv-700-lat.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;font-weight:800;font-display:swap;
  src:url("../assets/fonts/bv-800-vi.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:"Be Vietnam Pro";
  font-style:normal;font-weight:800;font-display:swap;
  src:url("../assets/fonts/bv-800-lat.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122;
}

.viewing-chip{
  display:none;
  font-family:"Be Vietnam Pro", Tahoma, "Segoe UI", sans-serif;
  font-size:10px;font-weight:700;line-height:1.3;
  color:#1E3A8A;background:transparent !important;
  padding:0;margin:0;white-space:nowrap;letter-spacing:0;
}
.viewing-chip.is-on{display:inline-block}

.pz-head{margin:0 0 10px}
.pz-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Be Vietnam Pro", Tahoma, "Segoe UI", sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--portal-ink,#1E3A8A);
}
.pz-kicker svg{flex-shrink:0}
.pz-title-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;
}
.pz-name{
  margin:0;
  font-family:"Be Vietnam Pro", Tahoma, "Segoe UI", sans-serif;
  font-size:18px;font-weight:700;color:#000;line-height:1.25;letter-spacing:-.2px;
}
.pz-count{
  font-family:"Be Vietnam Pro", Tahoma, "Segoe UI", sans-serif;
  font-size:10px;font-weight:700;color:var(--portal-ink,#1E3A8A);
  white-space:nowrap;
}
#view-portal.tone-cq, .app.tone-cq{ --portal-ink:#1E3A8A; }
#view-portal.tone-kt, .app.tone-kt{ --portal-ink:#C2410C; }
#view-portal.tone-xh, .app.tone-xh{ --portal-ink:#047857; }
#view-portal .hs-dot.on{ background: var(--portal-ink,#1E3A8A); }
#adv-scroll{ scrollbar-width:none !important; }
#adv-scroll::-webkit-scrollbar{ display:none !important; }


/* Chỉ zone logo neo trên cùng — 3 nút cổng cuộn cùng nội dung */
#app-chrome{
  flex: 0 0 auto;
  width: 100%;
  background: #fff;
  z-index: 30;
  border-bottom: 1px solid rgba(226,232,240,.85);
}
#app-chrome .header{
  position: relative !important;
  top: auto !important;
  border-bottom: 0;
}


/* list pages + news actions */
.list-stack{display:flex;flex-direction:column;gap:12px}
.list-stack .ps-card,.list-stack .story-big{min-width:0;max-width:none;width:100%}
.vd-byline{display:flex;gap:8px;margin-top:8px;align-items:center;justify-content:space-between}
.vd-byline-left{display:flex;gap:8px;align-items:center;min-width:0}
.vd-acts{display:flex;gap:6px;flex-shrink:0}
.vd-act{
  appearance:none;border:1px solid #E2E8F0;background:#F8FAFC;color:#0F172A;
  border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;cursor:pointer;
  font-family:inherit;
}
.vd-act.on{background:#FEE2E2;border-color:#FECACA;color:#BE123C}
#vd-products .rel-card{margin-bottom:0}

/* Video san pham: lop overlay trang tri khong duoc chan click vao player */
#pd-video-wrap > div:not(#pd-video-thumb){ pointer-events:none; }
#pd-video-wrap video, #pd-video-wrap iframe{ pointer-events:auto; }
/* Poster video: cham de phat, vuot doc van muot */
.media-poster > img, .media-poster > video{ pointer-events:none; }