/* =========================================================
   CUSTOM.CSS — CLEAN & CONSOLIDATED (COMPACT FINAL)
   ========================================================= */

/* -------------------- QUICK CONFIG -------------------- */
:root{
  --player-w: 455px;
  --player-h: 520px;
  --player-right: 2rem;
  --stack-gap: 0rem;
  --wrapper-left: 2rem;
  --gap: 1.2rem;
}

/* Avoid horizontal scroll on 100vw layouts */
html, body{ overflow-x: clip; }

/* -------------------- BACKGROUND -------------------- */
body{
  background: url("../images/bground/background.jpg") no-repeat center/cover fixed;
}

/* -------------------- LAYOUT (overlay/card) -------------------- */
.page-content{ display:flex; justify-content:flex-start; }

.page-content .wrapper{
  width: calc(100vw - var(--player-w) - var(--player-right) - var(--wrapper-left));
  max-width: none !important;
  margin: 2rem var(--gap) 2rem var(--wrapper-left);
  background: rgba(0,0,0,.98);
  padding: 2.5rem;
  border-radius: 1.2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.8);
  overflow: hidden;
  box-sizing: border-box;
  font-size: 1.08rem;
  line-height: 1.7;
}

/* Normalize nested wrappers inside overlay */
.page-content .wrapper :is(.wrapper, .site-header .wrapper, .site-footer .wrapper, .page-header .wrapper, .dash-header .wrapper){
  width:100% !important; max-width:none !important;
  margin:0 !important; padding:0 !important; box-sizing:border-box;
}

/* Transparent bars inside overlay */
.page-content .wrapper :is(.site-header, .page-header, .dash-header, .site-footer){
  background:transparent !important; box-shadow:none !important; border:0 !important;
}

/* -------------------- TYPOGRAPHY -------------------- */
.page-content .wrapper h1{ font-size:2.2rem; }
.page-content .wrapper h2{ font-size:1.6rem; letter-spacing:.2px; margin-bottom:1rem; }
.page-content .wrapper h3{ font-size:1.25rem; }

.page-content .wrapper :is(.tag,.post-tag,.label){
  font-size:.92rem; padding:.25rem .6rem; border-radius:.6rem;
}
.page-content .wrapper :is(.post-meta,.post__meta){ font-size:.95rem; }

/* Header avatar */
.page-content .wrapper :is(header,.site-header,.dash-header) img{
  width:72px; height:72px; object-fit:cover; border-radius:12px; margin-right:12px;
}
.page-content .wrapper :is(header,.site-header,.dash-header) p{ font-size:1.02em; }

/* -------------------- SPOTIFY & SCHEDULE -------------------- */
#spotify-player-wrapper{
  position:fixed; bottom:2rem; right:var(--player-right);
  width:var(--player-w); height:var(--player-h);
  background:rgba(0,0,0,.7);
  border-radius:0 0 1rem 1rem;
  box-shadow:0 4px 16px rgba(0,0,0,.6);
  overflow:hidden; z-index:1000;
}
#spotify-player-wrapper iframe{ width:100%; height:100%; border:0; }

#schedule-bar{
  position:fixed !important; right:var(--player-right);
  bottom:calc(2rem + var(--player-h) + var(--stack-gap));
  width:var(--player-w); height:230px;
  background:rgba(0,0,0,.85);
  border-radius:1rem 1rem 0 0;
  box-shadow:0 6px 16px rgba(0,0,0,.6);
  overflow:hidden; z-index:1000;
}
#schedule-bar iframe{ width:100%; height:100%; border:0; }

/* Mobile */
@media (max-width:600px){
  #spotify-player-wrapper, #schedule-bar{ display:none !important; }
  .page-content .wrapper{ width:100%; margin:1rem; max-width:none; }
}

/* -------------------- SWUP FADE -------------------- */
.transition-fade{ transition:opacity .2s ease; }
html.is-changing .transition-fade{ opacity:0; }

/* -------------------- WARNING MODAL -------------------- */
#warning-modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.9); z-index:1300; backdrop-filter:blur(2px); padding:0;
}
#warning-modal img{
  display:block; width:min(96vmin, calc(100vw - 16px)) !important;
  height:auto !important; max-height:calc(100vh - 16px) !important;
  object-fit:contain !important; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.6);
}
@media (orientation:portrait){
  #warning-modal{ padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  #warning-modal img{
    width:min(92vmin, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px)) !important;
    max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
  }
}
body.warn-lock{ overflow:hidden !important; cursor:not-allowed !important; user-select:none !important; }

/* -------------------- SEARCH BOX -------------------- */
.recent-articles .recent-header{
  display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; padding-right:2rem;
}
.recent-articles .recent-header h2{ margin:0; font-size:2rem; color:#4e8cff; }
#article-search{
  width:clamp(350px,60%,800px); padding:.6rem 1rem; font-size:1rem;
  border:1px solid #ccc; border-radius:.5rem; background:#f5f5f5; color:#4e8cff;
  transition:border-color .2s, box-shadow .2s;
}
#article-search::placeholder{ color:#a0a0a0; }
#article-search:focus{ outline:none; border-color:#4e8cff; box-shadow:0 0 0 3px rgba(78,140,255,.3); }
.article-item.hidden{ opacity:0; height:0; margin:0; padding:0; overflow:hidden; transition:opacity .3s, height .3s; }
#articles-list{ list-style:none; padding:0; margin:0; }
#articles-list > li{ margin:0 0 1.25rem 0; }
#articles-list > li::marker, #articles-list > li::before{ content:none !important; }

/* -------------------- WELCOME MODAL -------------------- */
#welcome-overlay, #welcome-modal{ opacity:0; pointer-events:none; display:none; transition:opacity .25s cubic-bezier(.4,0,.2,1); }
#welcome-overlay.active{ opacity:1; pointer-events:auto; display:block; }
#welcome-modal.active{ opacity:1; pointer-events:auto; display:flex; }

#welcome-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:92vw; max-width:1080px; max-height:calc(100vh - 8vh);
  padding:4.25rem 4.25rem 3.5rem; background:rgba(0,0,0,.95);
  border-radius:1.4rem; box-shadow:0 16px 36px rgba(0,0,0,.8);
  z-index:2000; display:flex; flex-direction:column; align-items:center; gap:1.5rem; overflow:auto;
}
.welcome-card{ display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; }
.welcome-avatar{ width:280px; height:280px; border-radius:50%; object-fit:cover; }
.welcome-card h1{ font-size:clamp(3.6rem, 2.4rem + 2.6vw, 5.4rem); margin:0; line-height:1.04; }
.welcome-card p { font-size:clamp(1.18rem, 1.05rem + .40vw, 1.50rem); margin:.5rem 0; line-height:1.4; }

.welcome-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 2rem; list-style:none; padding:0; margin:1.35rem 0 0; }
.welcome-links a{
  display:inline-flex; align-items:center; gap:.5rem; font-size:1.34rem;
  color:#4e8cff !important; fill:currentColor; text-decoration:none; transition:color .15s;
}
.welcome-links a:hover{ color:#75aaff !important; fill:#75aaff; text-decoration:underline; }
.svg-icon{ display:inline-flex; vertical-align:middle; margin-right:.4em; width:1.2em; height:1.2em; }
.svg-icon svg{ width:1.2em; height:1.2em; display:block; }

#welcome-close{ position:absolute; top:.5rem; right:.75rem; background:none; border:none; font-size:3.2rem; color:#ccc; cursor:pointer; }
#welcome-close:hover{ color:#fff; }

:root[data-theme="light"] #welcome-modal{ background:rgba(255,255,255,.98) !important; box-shadow:0 16px 36px rgba(0,0,0,.2) !important; }
:root[data-theme="light"] #welcome-modal :is(p,li,small){ color:#111 !important; }
:root[data-theme="light"] #welcome-close{ color:#666 !important; }
:root[data-theme="light"] #welcome-close:hover{ color:#000 !important; }

@media (max-width:480px){ #welcome-modal{ width:92vw; max-width:none; padding:2rem; } .welcome-avatar{ width:150px; height:150px; } .welcome-links a{ font-size:1.12rem; } }
@media (max-height:600px){ #welcome-modal{ padding:2.25rem; } .welcome-avatar{ width:170px; height:170px; } }
@media (min-width:1400px){ #welcome-modal{ max-width:1200px; } .welcome-avatar{ width:320px; height:320px; } .welcome-card h1{ font-size:clamp(3.9rem,2rem+3.2vw,5.8rem); } }

/* -------------------- ABOUT PILL -------------------- */
.about-btn{
  font: 500 1rem/1.13 inherit;
  color:inherit; background:rgba(255,255,255,.17);
  border:0; border-radius:.7rem; padding:.28em 1.1em; margin-left:1rem;
  cursor:pointer; transition:background .18s, color .18s; display:inline-block;
}
.about-btn:hover, .about-btn:focus{ background:rgba(255,255,255,.28); }

/* -------------------- SOCIAL ICONS -------------------- */
:root:not([data-theme="light"]) .social_links a,
:root:not([data-theme="light"]) header .social_links a,
:root:not([data-theme="light"]) .dash-header .social_links a{
  color:#fff !important; background:transparent !important; transition:color .17s;
}
:root:not([data-theme="light"]) .social_links a:hover,
:root:not([data-theme="light"]) header .social_links a:hover,
:root:not([data-theme="light"]) .dash-header .social_links a:hover{ color:#4e8cff !important; }

/* -------------------- LIGHT THEME OVERRIDES -------------------- */
:root[data-theme="light"]{
  --text-main:#222; --text-dim:#5b5b5b; --overlay-bg:rgba(255,255,255,.92);
  --title-pink:#ff4da6; --title-pink-h:#cc0077;
  --tag-bg:#e8f5ee; --tag-text:#2a915a; --tag-border:#c6ead7;
  --icon:#111; --icon-hover:#2a66d4;
  --search-bg:#f5f7fb; --search-bd:#d9dfeb; --search-ph:#9aa6b2;
}
:root[data-theme="light"] .page-content .wrapper{ background:var(--overlay-bg) !important; color:var(--text-main) !important; }
:root[data-theme="light"] .page-content .wrapper :is(p,li){ color:var(--text-main) !important; }
:root[data-theme="light"] .page-content .wrapper :is(.post-meta,.post__meta){ color:var(--text-dim) !important; }

:root[data-theme="light"] .page-content .wrapper :is(.post-link, .post-title a, h1.post-title a, .posts .post-title a),
:root[data-theme="light"] a.post-link{ color:var(--title-pink) !important; text-decoration:none !important; }
:root[data-theme="light"] .page-content .wrapper :is(.post-link, .post-title a, h1.post-title a, .posts .post-title a):hover,
:root[data-theme="light"] a.post-link:hover{ color:var(--title-pink-h) !important; text-decoration:underline !important; }

:root[data-theme="light"] .site-title{ color:#111 !important; font-weight:700; }
:root[data-theme="light"] .site-title a{ color:inherit !important; text-decoration:none !important; }
:root[data-theme="light"] .site-title a:hover{ opacity:.85; }
:root[data-theme="light"] .site-title :is(::after, > span, .chevron, a > span){ color:#4e8cff !important; }
:root[data-theme="light"] .recent-articles .recent-header h2{ color:#2a66d4 !important; }

:root[data-theme="light"] .page-content .wrapper :is(.tag,.post-tag,.label){
  background:var(--tag-bg) !important; color:var(--tag-text) !important;
  border:1px solid var(--tag-border) !important; box-shadow:none !important; background-clip:padding-box !important;
}
:root[data-theme="light"] #article-search{ background:var(--search-bg) !important; border:1px solid var(--search-bd) !important; color:var(--text-main) !important; }
:root[data-theme="light"] .social_links a,
:root[data-theme="light"] header .social_links a,
:root[data-theme="light"] .dash-header .social_links a{ color:var(--icon) !important; background:transparent !important; }
:root[data-theme="light"] .social_links a:hover,
:root[data-theme="light"] header .social_links a:hover,
:root[data-theme="light"] .dash-header .social_links a:hover{ color:var(--icon-hover) !important; }

/* Dark guard */
:root:not([data-theme="light"]) .page-content .wrapper{ background:rgba(0,0,0,.98) !important; }

/* About pill light tweak */
:root[data-theme="light"] .about-btn{ background:rgba(0,0,0,.08) !important; color:#111 !important; box-shadow:0 1px 2px rgba(0,0,0,.05); }
:root[data-theme="light"] .about-btn:hover{ background:rgba(0,0,0,.14) !important; }

/* Remove header/footer pill in light */
:root[data-theme="light"] :is(.site-header, .site-header .wrapper, .site-footer, .site-footer .wrapper){
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
:root[data-theme="light"] :is(.site-header, .site-footer)::before,
:root[data-theme="light"] :is(.site-header, .site-footer)::after{ content:none !important; }

/* -------------------- FOOTER CREDIT -------------------- */
:root :is(.site-footer, .site-footer a){ color:rgba(255,255,255,.70) !important; text-decoration:none !important; }
.site-footer a:hover, .site-footer a:focus-visible{ opacity:.85; }

/* -------------------- MOBILE header & search -------------------- */
@media (max-width:600px) and (orientation:portrait){
  .recent-articles .recent-header{ flex-wrap:wrap !important; gap:.6rem 1rem !important; padding-right:0 !important; }
  #article-search, .recent-articles .recent-header input[type="search"]{ flex:0 0 85% !important; width:85% !important; max-width:85% !important; min-width:0 !important; box-sizing:border-box !important; }
  .site-header .wrapper, .dash-header .wrapper{ display:flex !important; align-items:center !important; gap:6px !important; flex-wrap:nowrap !important; overflow:visible !important; }
  .site-title{ margin-right:auto !important; }
  .about-btn{ font-size:13px !important; padding:.22em .65em !important; border-radius:.55rem !important; margin:0 4px 0 8px !important; display:inline-flex !important; flex:0 0 auto !important; }
  ul.social_links{ display:inline-flex !important; align-items:center !important; gap:3px !important; flex-wrap:nowrap !important; white-space:nowrap !important; margin:0 !important; padding:0 !important; }
  ul.social_links li{ margin:0 !important; padding:0 !important; flex:0 0 auto !important; }
  ul.social_links a{ width:30px; height:30px; line-height:30px; font-size:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; }
}

/* Landscape phones */
@media (orientation:landscape) and (max-height:480px){
  #spotify-player-wrapper, #schedule-bar{ display:block !important; position:fixed !important; right:10px; z-index:1000; }
  #spotify-player-wrapper{ width:360px !important; height:420px !important; bottom:12px !important; }
  #schedule-bar{ width:360px !important; height:170px !important; bottom:calc(12px + 420px + 8px) !important; }
  .page-content .wrapper{ margin-right:calc(360px + 24px) !important; max-width:none !important; }
  #article-search, .recent-articles .recent-header input[type="search"]{ width:60% !important; max-width:60% !important; }
}

/* -------------------- READ TIME CHIP -------------------- */
.post-meta-inline{ margin-top:.25rem; font-size:.95rem; opacity:.9; }
.post-meta-inline .reading-time{
  display:inline-block; padding:.15rem .5rem; border:1px solid rgba(0,0,0,.10);
  border-radius:999px; font-size:.82rem; line-height:1; opacity:.85;
}
@media (prefers-color-scheme:dark){ .post-meta-inline .reading-time{ border-color:rgba(255,255,255,.20); } }

/* -------------------- CODE COPY BUTTON -------------------- */
pre{ position:relative; }
pre > code{ display:block; }
.copy-btn{
  position:absolute; top:.5rem; right:.5rem;
  padding:.25rem .5rem; font-size:.75rem; line-height:1;
  border:1px solid rgba(0,0,0,.15); border-radius:.4rem;
  background:rgba(255,255,255,.75); cursor:pointer; user-select:none;
}
.copy-btn:hover{ filter:brightness(1.03); }
.copy-btn:active{ transform:translateY(1px); }
.copy-btn.done{ background:#c8f7c5; }
@media (prefers-color-scheme:dark){
  .copy-btn{ background:rgba(20,20,20,.75); color:#eee; border-color:rgba(255,255,255,.2); }
  .copy-btn.done{ background:#1b3f1b; }
}

/* -------------------- HERO IMAGE -------------------- */
picture.hero, .hero picture, img.hero{ display:block; max-width:100%; }
picture.hero img{ width:100%; height:auto; border-radius:12px; }

/* -------------------- SHARE BAR -------------------- */
:root{ --share-size:34px; --share-radius:10px; --share-icon-size:18px; }
.share, .share-bar, .post-share{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.share-label{ margin-right:.25rem; font-weight:600; opacity:.9; }
.share a, .share .share-btn, .share-bar a, .share-bar .share-btn, .post-share a, .post-share .share-btn, .share__btn, .share-buttons .btn, .share__copy{
  width:var(--share-size); height:var(--share-size);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--share-radius);
  border:1.5px solid var(--share-border, #cbd5e1);
  background:var(--share-bg, #fff);
  color:var(--share-fg, #334155);
  text-decoration:none; outline:0; transition:.15s ease;
}
:root[data-theme="light"]{ --share-bg:#fff; --share-fg:#334155; --share-border:#cbd5e1; }
:root:not([data-theme="light"]){ --share-bg:transparent; --share-fg:#e5e7eb; --share-border:rgba(255,255,255,.22); }
.share :is(a,.share-btn,.share__btn,.share__copy,.share-buttons .btn):hover{
  transform:translateY(-1px); color:var(--link-color, #2a66d4);
  border-color:var(--link-color, #2a66d4); box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.share :is(svg){ width:var(--share-icon-size); height:var(--share-icon-size); pointer-events:none; }
/* Copy link highlight */
:is(.share,.share-bar,.post-share) a[title*="copy" i],
:is(.share,.share-bar,.post-share) a[aria-label*="copy" i],
:is(.share,.share-bar,.post-share) a:last-child{
  --copy-c:#475569; border-color:var(--copy-c) !important; color:var(--copy-c) !important;
  background:color-mix(in srgb, var(--copy-c) 10%, transparent);
}
:root:not([data-theme="light"]) :is(.share,.share-bar,.post-share) a[title*="copy" i],
:root:not([data-theme="light"]) :is(.share,.share-bar,.post-share) a[aria-label*="copy" i],
:root:not([data-theme="light"]) :is(.share,.share-bar,.post-share) a:last-child{
  --copy-c:#a8b3cf; background:color-mix(in srgb, var(--copy-c) 14%, transparent);
}
:is(.share,.share-bar,.post-share) a[title*="copy" i]:hover,
:is(.share,.share-bar,.post-share) a[aria-label*="copy" i]:hover,
:is(.share,.share-bar,.post-share) a:last-child:hover{
  background:var(--copy-c) !important; color:#fff !important; border-color:var(--copy-c) !important;
}

/* -------------------- BACK-TO-TOP -------------------- */
#back-to-top, .back-to-top, .to-top{
  position:fixed; right:1rem; bottom:1rem; pointer-events:auto;
  z-index:1500 !important; 
}
#spotify-player-wrapper, #schedule-bar{ z-index:1000 !important; }

/* TABLES — Single layer, consistent in Light/Dark, no wrapper box */

/* Theme tokens for tables (and a border width) */
:root[data-theme="light"]{
  --tbl-bw: 1.5px;
  --tbl-b:  #9aa4b2;
  --tbl-bg: #ffffff;
  --tbl-head:#eef2f6;
  --tbl-stripe:#f8fafc;
}
:root:not([data-theme="light"]){
  --tbl-bw: 1px;
  --tbl-b:  rgba(255,255,255,.18);
  --tbl-bg: rgba(255,255,255,.02);
  --tbl-head:rgba(255,255,255,.06);
  --tbl-stripe:rgba(255,255,255,.04);
}

/* Kill wrapper decoration to avoid “double layer” */
.page-content .wrapper .post-content :is(.table-scroll, .md-table){
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; border-radius:0 !important;
}
.page-content .wrapper .post-content :is(.table-scroll, .md-table)::before,
.page-content .wrapper .post-content :is(.table-scroll, .md-table)::after{ content:none !important; }

/* The table itself is the only element with border */
.page-content .wrapper :is(.post-content, article, .markdown-body, .entry-content, .content) table{
  width:100%;
  border-collapse:collapse !important; border-spacing:0 !important;
  background:var(--tbl-bg) !important;
  border:var(--tbl-bw) solid var(--tbl-b) !important;
  border-radius:10px !important;
  overflow:hidden;               
  font-size:.96rem;
  margin:.5rem 0 1.25rem;
}

.page-content .wrapper :is(.post-content, article, .markdown-body, .entry-content, .content) :is(th,td){
  border:var(--tbl-bw) solid var(--tbl-b) !important;
  padding:.6rem .8rem !important;
  vertical-align:top;
  background:var(--tbl-bg) !important;
}
.page-content .wrapper :is(.post-content, article, .markdown-body, .entry-content, .content) thead th{
  background:var(--tbl-head) !important;
  font-weight:600 !important;
}

.page-content .wrapper :is(.post-content, article, .markdown-body, .entry-content, .content)
  :is(.table-scroll, .md-table) > table > tbody > tr:first-child > :is(th,td){
  background:var(--tbl-head) !important; font-weight:600 !important;
}

.page-content .wrapper :is(.post-content, article, .markdown-body, .entry-content, .content)
  tbody tr:nth-child(odd) > *{ background:var(--tbl-stripe) !important; }

.page-content .wrapper :is(.post-content, article, .markdown-body, .entry-content, .content) table code{
  white-space:pre-wrap; word-break:break-word;
}
/* ==== HARD FIX cho LIGHT ==== */
html[data-theme="light"] .page-content .wrapper :is(.table-scroll, .md-table){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[data-theme="light"] .page-content .wrapper
  :is(.table-scroll > table, .md-table > table, table){
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #9aa4b2 !important;  
  border-radius: 10px !important;
  overflow: hidden;
  font-size: .96rem;
  margin: .5rem 0 1.25rem;
}

html[data-theme="light"] .page-content .wrapper :is(th,td){
  border: 1.5px solid #9aa4b2 !important;
  padding: .6rem .8rem !important;
  vertical-align: top;
  background: #ffffff !important;
}

html[data-theme="light"] .page-content .wrapper thead th{
  background: #eef2f6 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .page-content .wrapper tbody tr:nth-child(odd) > *{
  background: #f8fafc !important;
}

/* ===== Subscribe — bell + modal (compact) ===== */

/* Header spacing */
.site-header .header-controls{ gap:12px !important; flex-wrap:nowrap; white-space:nowrap; }
.site-header .header-controls > *{ margin:0 !important; }

/* Bell */
.sub-bell{
  --btn-size:34px;
  width:var(--btn-size); height:var(--btn-size);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid #cbd5e1; background:#fff; color:#0a0a0a;
  cursor:pointer; transition:transform .12s, background-color .14s, color .14s, border-color .14s, box-shadow .14s;
}
.sub-bell .bell-ico{ display:block; }
.sub-bell:hover, .sub-bell.is-active, .sub-bell[aria-expanded="true"]{
  background:#4e8cff; color:#fff; border-color:#4e8cff; transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(78,140,255,.25);
}
.sub-bell:focus{ outline:none; }
.sub-bell:focus-visible{ box-shadow:0 0 0 3px rgba(78,140,255,.35); }
:root[data-theme="light"] .sub-bell{ background:#000; color:#fff; border-color:#000; }
:root[data-theme="light"] .sub-bell:hover, :root[data-theme="light"] .sub-bell:focus-visible{ background:#2a66d4; border-color:#2a66d4; }
@media (max-width:600px){ .sub-bell{ --btn-size:30px; border-radius:7px; } }

/* Modal shell */
body.modal-open{ overflow:hidden; }
.subscribe-modal[hidden]{ display:none !important; }
.subscribe-modal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.subscribe-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px); }

/* Size tokens */
:root{ --sub-dialog-w:min(980px,92vw); --sub-ava:84px; --sub-gap:18px; }
@media (min-width:1100px){ :root{ --sub-ava:96px; } }

/* Dialog */
.subscribe-dialog{
  position:relative; display:grid; grid-auto-rows:auto; row-gap:var(--sub-gap);
  width:var(--sub-dialog-w); max-height:min(84vh,720px); overflow:auto;
  padding:28px 26px 22px; border-radius:18px; border:1px solid #1f2937;
  background:#0f172a; color:#e5e7eb; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
:root[data-theme="light"] .subscribe-dialog{ background:#fff; color:#0f172a; border-color:#0f172a; }

/* Close */
.subscribe-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; border:1px solid currentColor; background:transparent; color:#cbd5e1;
  transition:transform .12s, background-color .14s, color .14s, border-color .14s;
}
.subscribe-close svg path{ fill:currentColor; }
.subscribe-close:hover, .subscribe-close:focus-visible{ transform:translateY(-1px); background:#4e8cff; color:#fff; border-color:#4e8cff; }
:root[data-theme="light"] .subscribe-close{ color:#0f172a; background:#fff; border-color:#0f172a; }
:root[data-theme="light"] .subscribe-close:hover, :root[data-theme="light"] .subscribe-close:focus-visible{ background:#2a66d4; color:#fff; border-color:#2a66d4; }

/* Hero */
.sub-hero{ display:grid; grid-template-columns:var(--sub-ava) 1fr; align-items:center; column-gap:16px; }
.sub-ava{ width:var(--sub-ava); height:var(--sub-ava); border-radius:16px; object-fit:cover; display:block; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.sub-head h3{ margin:0 0 6px; font-size:clamp(1.15rem,.9rem + .6vw,1.5rem); }
.sub-tagline{ margin:0 0 2px; opacity:.95; font-size:1rem; }
.sub-extra{ margin:0; opacity:.85; font-size:.95rem; }

/* Form */
.subscribe-form{ display:flex; align-items:center; gap:12px; }
.subscribe-form input[type="email"]{
  flex:1 1 auto; min-width:360px; height:48px; padding:0 14px; font-size:16px;
  border-radius:12px; border:1px solid #334155; background:#0b1220; color:#e5e7eb;
}
.subscribe-form input[type="email"]::placeholder{ color:#94a3b8; }
.subscribe-form input[type="email"]:focus{ outline:none; border-color:#4e8cff; box-shadow:0 0 0 3px rgba(78,140,255,.25); }
:root[data-theme="light"] #subscribe-modal .subscribe-form input[type="email"]{
  background:#f8fafc !important; color:#0f172a !important; border-color:#c7d2fe !important;
}

/* Button */
.subscribe-btn{
  height:48px; padding:0 18px; border-radius:12px; font-weight:600; cursor:pointer;
  border:1px solid #4e8cff; background:#4e8cff; color:#fff; transition:transform .12s, filter .14s;
}
.subscribe-btn:hover, .subscribe-btn:focus-visible{ transform:translateY(-1px); filter:brightness(1.06); }
:root[data-theme="light"] .subscribe-btn{ background:#2a66d4; border-color:#2a66d4; }

/* Footer */
.sub-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.sub-digest{ display:inline-flex; align-items:center; gap:10px; opacity:.95; }
.sub-digest input{ width:16px; height:16px; }
.sub-notnow{ color:#a9c1ff; text-decoration:underline; opacity:.95; }
.sub-notnow:hover, .sub-notnow:focus-visible{ color:#cfe0ff; text-decoration:none; }
:root[data-theme="light"] #subscribe-modal .sub-notnow{ color:#0f172a !important; opacity:1 !important; }
:root[data-theme="light"] #subscribe-modal .sub-notnow:hover, 
:root[data-theme="light"] #subscribe-modal .sub-notnow:focus-visible{ color:#2a66d4 !important; text-decoration:underline; }

:root[data-theme="light"] #article-search,
:root[data-theme="light"] .recent-articles .recent-header input[type="search"]{
  color:#0f172a !important;          
  background:#ffffff !important;      
  border-color:#cbd5e1 !important;
}
:root[data-theme="light"] #article-search::placeholder,
:root[data-theme="light"] .recent-articles .recent-header input[type="search"]::placeholder{
  color:#6b7280 !important;          
}

.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:600px){
  .subscribe-dialog{ width:92vw; padding:20px; border-radius:14px; }
  .sub-ava{ width:64px; height:64px; border-radius:12px; }
  .subscribe-form{ flex-direction:column; }
  .subscribe-btn{ width:100%; }
}

/* ==== Subscribe email autofill (Chrome/Safari/Firefox) ==== */

#subscribe-modal input[type="email"]:-webkit-autofill,
#subscribe-modal input[type="email"]:-webkit-autofill:hover,
#subscribe-modal input[type="email"]:-webkit-autofill:focus,
#subscribe-modal input[type="email"]:-webkit-autofill:active {
  transition: background-color 9999s ease-out 0s;
}

:root[data-theme="light"] #subscribe-modal input[type="email"]:-webkit-autofill,
:root[data-theme="light"] #subscribe-modal input[type="email"]:-webkit-autofill:hover,
:root[data-theme="light"] #subscribe-modal input[type="email"]:-webkit-autofill:focus,
:root[data-theme="light"] #subscribe-modal input[type="email"]:-webkit-autofill:active {
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a;
  box-shadow: 0 0 0 1000px #f8fafc inset !important;
  -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
  border-color: #c7d2fe !important;
}

:root:not([data-theme="light"]) #subscribe-modal input[type="email"]:-webkit-autofill,
:root:not([data-theme="light"]) #subscribe-modal input[type="email"]:-webkit-autofill:hover,
:root:not([data-theme="light"]) #subscribe-modal input[type="email"]:-webkit-autofill:focus,
:root:not([data-theme="light"]) #subscribe-modal input[type="email"]:-webkit-autofill:active {
  -webkit-text-fill-color: #e5e7eb !important;
  caret-color: #e5e7eb;
  box-shadow: 0 0 0 1000px #0b1220 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0b1220 inset !important;
  border-color: #334155 !important;
}

#subscribe-modal input[type="email"]:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
  -moz-text-fill-color: currentColor !important;
}
:root[data-theme="light"] #subscribe-modal input[type="email"] { --autofill-bg:#f8fafc; }
:root:not([data-theme="light"]) #subscribe-modal input[type="email"] { --autofill-bg:#0b1220; }

#subscribe-modal input[type="email"] { background-clip: padding-box; }

.toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px);
  padding:.65rem .9rem; border-radius:.75rem; z-index:10000;
  border:1px solid #334155; box-shadow:0 8px 30px rgba(0,0,0,.35);
  background:rgba(15,23,42,.98); color:#e5e7eb;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  font-size:.95rem; line-height:1.25;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast[data-type="err"]{ background:#7f1d1d; border-color:#ef4444; color:#fff; }
:root[data-theme="light"] .toast{ background:#111827; color:#fff; border-color:#111827; }

.subscribe-dialog .subscribe-form + .subscribe-form { display: none !important; }

#sub-toast { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

.sub-foot {
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.sub-manage {
  margin-left:auto; font-size:.9rem; opacity:.8;
}
.sub-manage:hover { opacity:1; text-decoration:underline; }
.subscribe-modal .sub-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}
.subscribe-modal .sub-foot .sub-actions {
  display: flex;
  gap: 1rem;
}

.subscribe-dialog .sub-foot{
  display:flex;
  align-items:center;
  gap:.75rem;             
}

.subscribe-dialog .sub-actions{
  margin-left:auto;        
  display:flex;
  align-items:center;
  gap:.75rem;           
}

.subscribe-dialog .sub-notnow{
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 520px){
  .subscribe-dialog .sub-foot{ flex-wrap:wrap; row-gap:.5rem; }
  .subscribe-dialog .sub-actions{ width:100%; justify-content:flex-end; }
}
/* Chân modal: label bên trái, 2 link bên phải */
.subscribe-dialog .sub-foot{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap; /* gọn gàng trên mobile */
}

/* Nhóm 2 link nằm cạnh nhau, đẩy về bên phải */
.subscribe-dialog .sub-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.75rem;   /* khoảng cách giữa 2 link */
}

/* Dùng đúng style của "Not now" cho cả 2 link */
.subscribe-dialog .sub-notnow{
  font: inherit;
  color: inherit;             /* theo theme hiện tại (light/dark) */
  text-decoration: underline; /* giống Not now */
  cursor: pointer;
}

/* Mobile: 2 link chuyển xuống hàng, vẫn canh phải */
@media (max-width: 520px){
  .subscribe-dialog .sub-actions{
    width:100%;
    justify-content:flex-end;
  }
}