/* TruyenVN V10 — visual upgrade for the unified WEB_UPLOAD. */

:root {
  --story-pink:#f2a5c0;
  --story-violet:#bea1ee;
  --story-mint:#7fd4c7;
  --story-surface:rgba(30,23,43,.83);
  --story-border:rgba(255,224,240,.11);
  --story-ease:cubic-bezier(.2,.78,.2,1);
}

body.page-shell {
  background:
    radial-gradient(circle at 9% 4%,rgba(243,164,193,.15),transparent 28rem),
    radial-gradient(circle at 92% 16%,rgba(194,161,239,.12),transparent 32rem),
    radial-gradient(circle at 52% 88%,rgba(131,216,202,.07),transparent 28rem),
    linear-gradient(155deg,#0d0a13 0%,#16101f 48%,#0e0c15 100%);
  background-attachment:fixed;
}
body.page-shell::before { opacity:.72; background-size:44px 44px; -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 72%); mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 72%); }

.site-header { inset:13px 0 auto; }
.navbar {
  width:min(1210px,calc(100% - 28px));
  min-height:68px;
  border-color:var(--story-border);
  border-radius:21px;
  background:rgba(19,14,27,.81);
  box-shadow:0 18px 54px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(17px) saturate(122%);
  backdrop-filter:blur(17px) saturate(122%);
}
.site-header.scrolled .navbar { background:rgba(16,12,23,.95); border-color:rgba(255,222,239,.16); }
.brand-mark { border-color:rgba(243,164,193,.25); border-radius:12px; background:linear-gradient(145deg,rgba(243,164,193,.23),rgba(194,161,239,.16)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 18px rgba(208,128,170,.12); }
.brand-text { font-size:1.08rem; letter-spacing:-.045em; }
.brand-text span { color:var(--story-pink); }

.nav-links > a,.dropbtn { border:1px solid transparent; border-radius:11px; font-size:.82rem; transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease; }
.nav-links > a:hover,.dropbtn:hover,.nav-links > a.active { border-color:rgba(255,224,240,.08); background:rgba(255,255,255,.055); transform:translateY(-1px); }
.nav-search { min-height:43px; border-radius:13px; background:rgba(255,255,255,.042); }
.nav-search:focus-within { box-shadow:0 0 0 4px rgba(243,164,193,.075); }
.dropdown-content { border-radius:17px; background:rgba(24,18,34,.985); box-shadow:0 24px 64px rgba(0,0,0,.39); }
.utility-menu { width:410px !important; padding:10px !important; gap:6px !important; }
.utility-menu-head { padding:6px 8px 10px !important; }
.utility-item { min-height:61px; border:1px solid transparent; border-radius:13px !important; background:rgba(255,255,255,.018); }
.utility-item:hover { border-color:rgba(255,224,240,.10); background:rgba(243,164,193,.065) !important; transform:translateX(2px); }

.site-main { padding-top:102px; }
.container { width:min(1210px,calc(100% - 32px)); }
.site-notice { border-radius:15px; border-color:rgba(255,224,240,.10); background:rgba(255,255,255,.035); }

.hero {
  min-height:448px;
  gap:13px;
  padding:11px;
  overflow:hidden;
  border:1px solid rgba(255,224,240,.11);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(43,26,48,.77),rgba(21,17,30,.92));
  box-shadow:0 29px 78px rgba(0,0,0,.31),inset 0 1px rgba(255,255,255,.035);
}
.hero-glass { border:0; border-radius:22px; background:radial-gradient(circle at 8% 8%,rgba(243,164,193,.12),transparent 18rem),rgba(255,255,255,.022); box-shadow:none; }
.hero-title { max-width:650px; font-size:clamp(2.3rem,5.2vw,4.55rem); line-height:.98; letter-spacing:-.06em; text-wrap:balance; }
.hero-desc { max-width:610px; color:#bbb2c4; line-height:1.75; }
.hero-img { min-height:424px; border-radius:21px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); transition:transform .45s var(--story-ease),filter .25s ease; }
.hero-img:hover { transform:scale(.994); filter:saturate(1.04) brightness(1.03); }
.btn-read { border:1px solid rgba(255,223,237,.27); border-radius:13px; color:#2a1220; background:linear-gradient(135deg,#f6bad0,#c9a8f1); box-shadow:0 13px 28px rgba(201,125,169,.16),inset 0 1px rgba(255,255,255,.46); }

.section-title { margin-top:34px; font-size:clamp(1.25rem,2.5vw,1.75rem); letter-spacing:-.035em; }
.glass-panel { border-color:rgba(255,224,240,.10); border-radius:22px; background:var(--story-surface); box-shadow:0 20px 54px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.035); -webkit-backdrop-filter:blur(12px) saturate(108%); backdrop-filter:blur(12px) saturate(108%); }
.grid-container,.scroll-container,.chapter-list,.shop-grid,.table-responsive { content-visibility:auto; contain-intrinsic-size:1px 650px; }
.card,.shop-item { contain:layout paint; border-color:rgba(255,224,240,.09); border-radius:16px; background:rgba(255,255,255,.035); box-shadow:0 10px 26px rgba(0,0,0,.13); transition:transform .18s var(--story-ease),border-color .18s ease,box-shadow .18s ease; }
.card:hover,.shop-item:hover { transform:translateY(-3px); border-color:rgba(243,164,193,.24); box-shadow:0 17px 35px rgba(0,0,0,.23); }
.card-img { transition:transform .3s var(--story-ease),filter .2s ease; }
.card:hover .card-img { transform:scale(1.025); filter:saturate(1.04); }

.site-footer { border-color:rgba(255,224,240,.08); background:rgba(9,7,13,.56); }

.site-loader {
  gap:10px;
  background:rgba(11,8,16,.70);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.site-loader::before {
  content:"";
  position:absolute;
  width:154px;
  height:132px;
  border:1px solid rgba(255,224,240,.14);
  border-radius:22px;
  background:rgba(25,18,35,.95);
  box-shadow:0 23px 60px rgba(0,0,0,.37),inset 0 1px rgba(255,255,255,.04);
}
.site-loader-ring,.site-loader-text { position:relative; z-index:2; }
.site-loader-ring { width:42px; height:42px; border-color:rgba(255,255,255,.09); border-top-color:var(--story-pink); border-right-color:var(--story-violet); }
.site-loader-text { color:#d8cadf; font-size:.66rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }

@media(max-width:980px) {
  body.page-shell { background-attachment:scroll; }
  .site-header { inset:9px 0 auto; }
  .navbar { width:calc(100% - 18px); min-height:60px; border-radius:18px; -webkit-backdrop-filter:blur(11px) saturate(108%); backdrop-filter:blur(11px) saturate(108%); }
  .nav-panel { top:78px; border-radius:17px; background:rgba(18,13,25,.987); }
  .site-main { padding-top:84px; }
  .utility-menu { width:100% !important; }
  .hero { min-height:0; grid-template-columns:1fr; padding:9px; border-radius:23px; }
  .hero-img { min-height:365px; order:-1; }
}

@media(max-width:720px) {
  .container { width:min(100% - 20px,1210px); }
  .hero-img { min-height:320px; border-radius:18px; }
  .hero-glass { padding:23px 18px; border-radius:18px; }
  .hero-title { font-size:clamp(2rem,10vw,3.1rem); }
  .glass-panel { width:100%; padding:16px; border-radius:18px; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
  .site-loader { -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
  .site-loader::before { width:138px; height:122px; }
}

@media(hover:none),(pointer:coarse) {
  .card:hover,.shop-item:hover,.nav-links>a:hover,.dropbtn:hover { transform:none; }
}

@media(prefers-reduced-motion:reduce) {
  .site-loader { display:none !important; }
  .card,.shop-item,.card-img,.hero-img { transition:none !important; }
}


/* ================================================================
   V39 PrimeMC / TruyenVN synced premium motion language
   ================================================================ */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:story-v39-old .16s ease both; }
::view-transition-new(root) { animation:story-v39-new .28s cubic-bezier(.16,.84,.2,1) both; }
@keyframes story-v39-old { to { opacity:.78; } }
@keyframes story-v39-new { from { opacity:.55; transform:translateY(5px); } to { opacity:1; transform:none; } }
.story-route-progress { position:fixed; z-index:200000; top:0; left:0; width:0; height:2px; opacity:0; pointer-events:none; background:linear-gradient(90deg,#f2a5c0,#bea1ee 58%,#7fd4c7); box-shadow:0 0 16px rgba(242,165,192,.38); transition:width .42s cubic-bezier(.2,.75,.2,1),opacity .16s ease; }
.story-route-progress.is-active { width:72%; opacity:1; }
.story-route-progress.is-done { width:100%; opacity:0; transition:width .16s ease,opacity .24s ease .08s; }
body.page-leaving .site-main,body.page-leaving .site-footer { opacity:.985 !important; transform:translate3d(0,1px,0) !important; transition:opacity .10s ease,transform .10s ease !important; }

.hero,.glass-panel,.card,.shop-item { position:relative; isolation:isolate; }
.hero::before,.glass-panel::after,.card::after,.shop-item::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:.55; background:radial-gradient(circle at var(--story-x,18%) var(--story-y,10%),rgba(242,165,192,.085),transparent 31%); }
.card,.shop-item { transition:transform .27s cubic-bezier(.16,.84,.2,1),border-color .22s ease,box-shadow .27s ease !important; }
.card:hover,.shop-item:hover { transform:translateY(-5px) scale(1.006) !important; }
.hero-img { transition:transform .38s cubic-bezier(.16,.84,.2,1),filter .24s ease !important; }
.btn-read,.btn,.btn-submit,.btn-buy,.btn-action { transition:transform .20s cubic-bezier(.16,.84,.2,1),filter .20s ease,box-shadow .22s ease !important; }
.btn-read:hover,.btn:hover,.btn-submit:hover,.btn-buy:hover,.btn-action:hover { transform:translateY(-2px); }
.reveal { transform:translate3d(0,6px,0) !important; transition-duration:.28s !important; }
.reveal.is-visible { transform:translate3d(0,0,0) !important; }
.site-loader { transition:opacity .15s ease,visibility 0s linear .15s !important; }

@media(prefers-reduced-motion:reduce) {
  .story-route-progress { display:none !important; }
  ::view-transition-old(root),::view-transition-new(root) { animation:none !important; }
}