/* =====================================================================
   H'NEW – Tin cậy · Nhân văn · Chính xác (giao dien mobile)
   - Toan trang BI KHOA truot; chi .screen cuon doc ben trong
   - Theme: DO / DEN – Phong cach bao chi cong nghe hien dai
   - Background PNG phia sau toan bo giao dien
   - Header la ANH PNG, cac nut de len tren
   - Hero: chieu cao co dinh, anh scale full chieu cao, bi an chieu ngang
   - Hieu ung vien neon CHAY + CHOP (tone DO)
   ===================================================================== */

:root {
  --maxw: 440px;
  --bg: #0a0a0a;
  --red: #e31e24;
  --red2: #c41a1f;
  --red-glow: rgba(227, 30, 36, .35);
  --blue: #3b82f6;
  --green: #22c55e;
  --cyan: #4dd8e0;
  --line: rgba(227, 30, 36, .30);
  --glow: rgba(227, 30, 36, .18);
  --neon: #e31e24;
  --card: rgba(18, 18, 18, .85);
  --card2: #1a1a1a;
  --txt: #f0f0f0;
  --muted: #999;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0;
  color: var(--txt);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  touch-action: none;
  background: var(--bg) url("public/bg-app.png") center top / cover no-repeat;
}
a { text-decoration: none; color: inherit; }
button { border: 0; font: inherit; color: inherit; cursor: pointer; background: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.app { position: relative; width: min(100vw, var(--maxw)); height: 100%; margin: 0 auto; }
.screen {
  height: 100%;
  padding: 0 11px calc(86px + env(safe-area-inset-bottom));
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.screen::-webkit-scrollbar { width: 0; height: 0; }

/* ===== khung the chung ===== */
.card, .card-banner {
  position: relative;
  border: 1.5px solid var(--line);
  background-color: var(--card);
  box-shadow: 0 0 12px var(--glow), inset 0 0 18px rgba(227,30,36,.04);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  overflow: hidden;
}

/* Nut chung */
.btn-red {
  height: 28px; border-radius: 7px; padding: 0 14px;
  background: var(--red);
  color: #fff; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 0 12px var(--red-glow);
  border: none;
}
.btn-red.btn-sm { height: 24px; font-size: 9px; padding: 0 10px; }
.btn-overlay {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
}

/* ======================= HEADER: ANH PNG + overlay ======================= */
.hero-head { position: relative; }
.hero-head-img { width: 100%; height: auto; display: block; }

/* Hamburger menu */
.menu-btn {
  position: absolute; top: 3.5%; left: 2%; z-index: 3;
  display: grid; gap: 5px; align-content: center; width: 26px; height: 30px;
}
.menu-btn span {
  width: 22px; height: 2.4px; border-radius: 99px;
  background: #f0f0f0; box-shadow: 0 0 8px var(--red-glow);
}

/* Logo on header */
.header-logo {
  position: absolute; top: 3%; left: 50%; transform: translateX(-50%); z-index: 3;
  height: 28px; width: auto;
  filter: drop-shadow(0 0 6px var(--red-glow));
}

/* Search + Bell */
.header-right {
  position: absolute; top: 3%; right: 2%; z-index: 3;
  display: flex; gap: 6px; align-items: center;
}
.icon-btn {
  position: relative; width: 32px; height: 32px;
  display: grid; place-items: center;
}
.icon-btn svg { width: 20px; height: 20px; color: #f0f0f0; filter: drop-shadow(0 0 4px var(--red-glow)); }
.bell-badge {
  position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 99px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  line-height: 15px; text-align: center; box-shadow: 0 0 8px var(--red-glow);
}

/* ======================= CATEGORY TABS ======================= */
.cat-tabs {
  display: flex; gap: 4px; padding: 6px 0;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 6px;
  font-size: 10px; font-weight: 700; color: var(--muted);
  background: var(--card2); border: 1px solid transparent;
  white-space: nowrap;
}
.tab.active {
  color: #fff; background: var(--red);
  box-shadow: 0 0 10px var(--red-glow);
}
.hot-tag {
  font-size: 7px; font-weight: 800; color: #fff;
  background: var(--red); border-radius: 3px; padding: 1px 4px;
  margin-left: 3px; vertical-align: super;
}

/* ======================= HERO SECTION ======================= */
/*
  Layout: hero-left (banner lon) + hero-right (4 card nho)
  Chieu cao co dinh:
    - Moi card nho: 50px
    - 3 khoang cach gap: 6px
    - Tong hero-right: 4*50 + 3*6 = 218px
    - hero-banner (banner lon): 218px (bang voi 4 card + gap)
    - hero-left them hero-dots phia duoi nen tong cao hon 1 chut
  Chieu ngang co dinh.
  Anh scale full chieu cao, bi an chieu ngang neu can.
*/
.hero-section {
  display: flex; gap: 8px;
  margin-top: 8px;
  align-items: flex-start;
}

/* Hero banner lon (trai) – chieu cao 152px (70% cua 218px) */
.hero-left { flex: 0 0 auto; width: auto; display: flex; flex-direction: column; }
.hero-banner {
  position: relative; border-radius: 12px; overflow: hidden;
  height: 152px; width: auto;
}
.hero-banner img {
  height: 100%; width: auto;
  display: block;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%);
}
.hero-overlay .btn-red { width: max-content; }
.hero-dots { display: flex; gap: 5px; justify-content: center; margin-top: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #555; }
.dot.active { background: var(--red); box-shadow: 0 0 6px var(--red-glow); }

/* 4 card nho (phai) – chieu cao tong hop la 152px */
.hero-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hero-small {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 35px;
  padding: 3px;
  background: rgba(18, 18, 18, 0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  overflow: hidden;
}
.hs-img-wrapper {
  flex: 0 0 29px;
  height: 29px;
  border: 1px solid var(--red);
  border-radius: 5px;
  overflow: hidden;
}
.hs-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hs-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hs-tag {
  font-size: 6px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}
.hs-tag-red { color: var(--red); background: none !important; }
.hs-tag-blue { color: var(--blue); background: none !important; }
.hs-title {
  font-size: 7.5px;
  font-weight: 700;
  color: #f0f0f0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-time {
  font-size: 5.5px;
  color: #888;
  margin-top: 1px;
  line-height: 1;
}

/* ======================= SERVICE ICONS ROW ======================= */
.svc-row {
  display: flex; gap: 8px; padding: 10px 0;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.svc-row::-webkit-scrollbar { display: none; }
.svc-item {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 56px;
}
.svc-item img {
  width: 42px; height: 42px; border-radius: 12px; object-fit: cover;
  border: 1.3px solid var(--line); background: var(--card2);
  box-shadow: 0 0 8px var(--glow);
}
.svc-item span, .svc-label { font-size: 7.5px; font-weight: 700; color: #ddd; text-align: center; white-space: nowrap; }
.svc-tag {
  display: inline-block; font-size: 6px; font-style: normal; font-weight: 800;
  color: #fff; background: var(--red); border-radius: 3px; padding: 0 3px;
  margin-left: 2px; vertical-align: super;
}
.svc-tag.new { background: var(--green); }

/* ======================= TECH BANNER ======================= */
.tech-full {
  margin-top: 6px; position: relative;
  overflow: hidden; border-radius: 12px;
}
.tech-full img { width: 100%; display: block; }
/* ======================= TIN NOI BAT + THOI TIET ======================= */
.news-weather {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sec-title {
  font-size: 10px; font-weight: 900; color: #fff; letter-spacing: .3px;
}
.red-dot::before {
  content: ""; display: inline-block; width: 4px; height: 14px;
  background: var(--red); border-radius: 2px; margin-right: 5px; vertical-align: middle;
}
.see-all { font-size: 8px; color: var(--red); font-weight: 700; }

/* News cards (cuon ngang) */
.news-cards {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.news-cards::-webkit-scrollbar { display: none; }
.news-card {
  flex: 0 0 140px; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
}
.news-card img { width: 100%; height: 84px; object-fit: cover; }
.news-tag {
  position: absolute; top: 4px; left: 4px; z-index: 3;
  font-size: 6px; font-weight: 800; padding: 2px 5px; border-radius: 3px;
  color: #fff;
}
.tag-red { background: var(--red); }
.tag-blue { background: var(--blue); }
.tag-green { background: var(--green); }
.news-info { padding: 5px 6px; }
.news-info p { font-size: 7px; font-weight: 700; line-height: 1.3; color: #eee; }
.news-info small { font-size: 6px; color: var(--muted); }

/* Weather card */
.weather-card {
  padding: 8px; display: flex; flex-direction: column; gap: 5px;
}
.weather-card .sec-title { font-size: 9px; }
.wt-main { display: flex; align-items: center; justify-content: space-between; }
.wt-left { display: flex; flex-direction: column; }
.wt-city { font-size: 8px; color: var(--muted); }
.wt-temp { font-size: 24px; font-weight: 900; line-height: 1; color: #fff; }
.wt-status { font-size: 7.5px; color: var(--muted); }
.wt-icon { width: 46px; height: 46px; object-fit: contain; }
.wt-details { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.wt-row {
  display: flex; justify-content: space-between; font-size: 7.5px; color: #ccc;
  padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.wt-row b { font-weight: 700; }
.weather-card .btn-red { margin-top: 5px; width: 100%; }

/* ======================= VIDEO H'NEW + DOC NHIEU ======================= */
.video-read {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

/* Video Block */
.video-block-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.video-thumb-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.video-thumb-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  border: 1.5px solid #fff;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(227, 30, 36, 0.4);
  z-index: 3;
}
.play-btn svg {
  fill: currentColor;
}
.video-dur {
  position: absolute; bottom: 6px; right: 6px; z-index: 3;
  font-size: 7px; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.75); padding: 2px 5px; border-radius: 3px;
}
.video-content-container {
  padding: 8px 10px;
  background: var(--card);
}
.video-title {
  font-size: 9px; font-weight: 700; color: #fff; line-height: 1.35;
  margin-bottom: 5px;
}
.video-meta-row {
  display: flex; justify-content: space-between; align-items: center;
}
.video-time {
  font-size: 7.5px; color: var(--muted);
}
.btn-bookmark {
  color: var(--muted);
  display: flex; align-items: center;
  cursor: pointer;
}
.btn-bookmark svg {
  stroke: currentColor;
}

/* Doc nhieu */
.read-list { counter-reset: r; display: flex; flex-direction: column; gap: 6px; }
.read-list li {
  display: flex; align-items: center; gap: 6px;
  counter-increment: r;
  position: relative; padding-left: 18px;
}
.read-list li::before {
  content: counter(r);
  position: absolute; left: 0; top: 0;
  font-size: 14px; font-weight: 900; color: var(--red);
  line-height: 1; min-width: 14px;
}
.read-list li img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: 0 0 36px; }
.read-list li p { font-size: 7.5px; font-weight: 700; line-height: 1.3; }
.read-list li small { font-size: 6.5px; color: var(--muted); }
/* ======================= NEWSLETTER ======================= */
.newsletter {
  margin-top: 10px; padding: 10px;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.nl-left strong { font-size: 8px; font-weight: 900; color: #fff; line-height: 1.3; }
.nl-left small { font-size: 6.5px; color: var(--muted); }
.nl-right { flex: 1; display: flex; gap: 4px; }
.nl-input {
  flex: 1; height: 24px; border-radius: 5px; padding: 0 8px;
  background: var(--card2); border: 1px solid var(--line);
  color: #fff; font-size: 8px; outline: none;
}
.nl-input::placeholder { color: #666; }

/* ======================= BOTTOM NAV ======================= */
.bottom-nav {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-around; align-items: flex-end;
  background: linear-gradient(180deg, rgba(10,10,10,.84), rgba(6,6,6,.98));
  border-top: 1px solid rgba(227,30,36,.25);
  padding: 7px 4px calc(10px + env(safe-area-inset-bottom));
  backdrop-filter: blur(10px);
}
.nav-item {
  position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px; color: #555; font-size: 8.5px;
  font-weight: 700; letter-spacing: .2px;
}
.nav-item svg { width: 20px; height: 20px; color: currentColor; }
.nav-item.active { color: var(--red); }
.nav-item.active svg { filter: drop-shadow(0 0 6px var(--red-glow)); }
.nav-center { position: relative; flex: 0 0 auto; }
.nav-center-logo {
  width: 56px; height: 56px; margin-top: -26px; border-radius: 50%;
  background: url("public/nav-center-btn.png") center / cover no-repeat;
  filter: drop-shadow(0 0 12px var(--red-glow));
  display: block;
}

/* =====================================================================
   HIEU UNG VIEN NEON CHAY + CHOP (tone DO)
   ===================================================================== */
@property --neon-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.card, .card-banner, .btn-red { position: relative; }

.card::after, .card-banner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--neon-a),
    transparent 0deg 55deg,
    rgba(227,30,36,.35) 80deg,
    var(--neon) 104deg,
    #ffffff 118deg,
    var(--neon) 132deg,
    rgba(200,20,20,.5) 156deg,
    transparent 185deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: neon-run 2.8s linear infinite;
  pointer-events: none; z-index: 5;
  filter: drop-shadow(0 0 4px var(--neon));
}

.card, .card-banner { animation: neon-blink 2.8s ease-in-out infinite; }

@keyframes neon-run { to { --neon-a: 360deg; } }
@keyframes neon-blink {
  0%, 100% { box-shadow: 0 0 10px var(--glow), inset 0 0 16px rgba(227,30,36,.04); }
  50%      { box-shadow: 0 0 18px rgba(227,30,36,.40), inset 0 0 20px rgba(227,30,36,.08); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card-banner { animation: none; }
  .card::after, .card-banner::after { animation: none; }
}