/* Bố cục: một tờ báo huyền học thập niên 60. Giấy báo ố vàng, mực nâu, mực đỏ in lệch nhẹ.
   Trang tối là "số báo đêm": nền nâu đen, chữ màu giấy. */
:root{
  --paper:#EADDBB; --paper-2:#DDCB9C; --ink:#2A170D; --brown:#6B4226; --body-2:#4A2A17;
  --red:#A53215; --gold:#D79A21;
  --deep:#2A170D; --on-deep:#EADDBB; --on-deep-2:#E0D2AE;
  --plate-paper:#EADDBB; --plate-ink:#2A170D; --plate-red:#B5391A;
  --misreg:rgba(181,57,26,.85); --head-shadow:rgba(181,57,26,.5);
  --vignette:rgba(110,70,25,.28); --grain-op:.5;
  --gut:clamp(18px,4vw,40px);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --cond:'Oswald','Arial Narrow',Arial,sans-serif;
  --body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1C110A; --paper-2:#2B1A0F; --ink:#EADDBB; --brown:#C4AE88; --body-2:#D9C9A4;
    --red:#EE7B55; --deep:#110A05;
    --misreg:rgba(238,123,85,.75); --head-shadow:rgba(238,123,85,.4);
    --vignette:rgba(0,0,0,.5); --grain-op:.16;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1C110A; --paper-2:#2B1A0F; --ink:#EADDBB; --brown:#C4AE88; --body-2:#D9C9A4;
  --red:#EE7B55; --deep:#110A05;
  --misreg:rgba(238,123,85,.75); --head-shadow:rgba(238,123,85,.4);
  --vignette:rgba(0,0,0,.5); --grain-op:.16;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
a:hover .hl{color:var(--red)}
a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

.page{position:relative;overflow:hidden;width:100%}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .18  0 0 0 0 .08  1.2 0 0 0 -.35'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.page::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 110px var(--vignette)}

.wrap{max-width:1240px;margin:0 auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* svg tô màu theo chủ đề */
.f-ink{fill:var(--ink)} .f-red{fill:var(--red)} .f-paper{fill:var(--paper)}
.s-ink{stroke:var(--ink)} .s-paper{stroke:var(--paper)}
.pf-paper{fill:var(--plate-paper)} .pf-ink{fill:var(--plate-ink)} .pf-red{fill:var(--plate-red)}
.ps-ink{stroke:var(--plate-ink)} .ps-paper{stroke:var(--plate-paper)} .ps-red{stroke:var(--plate-red)}

/* tai báo + tên báo */
.ears{border-bottom:1px solid var(--ink)}
.ears-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;padding-top:9px;padding-bottom:9px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.mast{padding-top:clamp(14px,3vw,30px);text-align:center}
.mast-link{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.4vw,32px)}
.mast-ico{flex:none;width:clamp(28px,6.4vw,92px);height:auto}
.mast-title{font-family:var(--display);font-weight:900;font-size:clamp(44px,11.5vw,150px);line-height:1.12;letter-spacing:-.01em;text-transform:uppercase;text-shadow:3px 2px 0 var(--misreg)}
.mast-tag{margin-top:4px;font-family:var(--cond);font-weight:600;font-size:clamp(12px,2.2vw,17px);letter-spacing:.34em;text-transform:uppercase;color:var(--brown)}
.mast-rule{height:6px;margin-top:14px;border-top:4px solid var(--ink);border-bottom:1px solid var(--ink)}

/* thanh menu */
.nav{overflow-x:auto;border-bottom:3px double var(--ink)}
.nav ul{display:flex;width:max-content;margin:0 auto}
.nav a{display:flex;align-items:center;min-height:46px;padding:0 clamp(14px,2.2vw,26px);border-right:1px solid var(--ink);font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav li:first-child a{border-left:1px solid var(--ink)}
.nav a:hover{background:var(--ink);color:var(--paper)}

/* tiêu đề mục */
.sec-head{display:flex;align-items:center;gap:16px}
.sec-head::before,.sec-head::after{content:"";flex:1 1 24px;height:5px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.sec-head h2{flex:0 1 auto;text-align:center;font-family:var(--display);font-weight:900;font-size:clamp(30px,6vw,60px);line-height:1.05;text-transform:uppercase;text-wrap:balance}
.sec-sub{margin:10px 0 34px;text-align:center;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
.deep .sec-head::before,.deep .sec-head::after{border-color:var(--gold)}
.deep .sec-sub{color:var(--gold)}

.dropcap::first-letter{float:left;font-family:var(--display);font-weight:900;font-size:3.5em;line-height:.82;padding:6px 8px 0 0;color:var(--red)}
.kick{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.mono-kick{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}

.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--red);font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.btn-line{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:2px solid var(--ink);font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.btn-line:hover{background:var(--ink);color:var(--paper)}

/* trang nhất */
.lead{padding-top:clamp(24px,4vw,40px);padding-bottom:clamp(40px,6vw,72px)}
.lead-flag{display:flex;align-items:center;gap:14px}
.lead-flag::before,.lead-flag::after{content:"";flex:1 1 16px;border-top:2px solid var(--ink)}
.lead-flag span{font-family:var(--cond);font-weight:700;font-size:clamp(13px,2.4vw,16px);letter-spacing:.28em;text-transform:uppercase;color:var(--red);text-align:center}
.lead-title{max-width:1080px;margin:18px auto 14px;text-align:center;font-family:var(--display);font-weight:900;font-size:clamp(32px,5.8vw,72px);line-height:1.05;letter-spacing:-.015em;text-shadow:2px 2px 0 var(--head-shadow);text-wrap:balance}
.deck{max-width:640px;margin:0 auto;text-align:center;font-style:italic;font-size:18px;color:var(--brown)}
.lead-rule{height:6px;margin-top:26px;border-top:1px solid var(--ink);border-bottom:3px solid var(--ink)}
.lead-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:36px 40px;margin-top:32px}

.toc-box{flex:1 1 240px;min-width:0;padding:18px 20px 14px;border:4px double var(--ink);background:var(--paper-2)}
.toc-box h2{padding-bottom:8px;border-bottom:2px solid var(--ink);text-align:center;font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.22em;text-transform:uppercase}
.toc a{display:flex;align-items:baseline;gap:8px;min-height:44px;padding:6px 0;font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25}
.toc .dots{flex:1;min-width:12px;border-bottom:2px dotted var(--ink)}
.toc .no{font-family:var(--mono);font-size:13px}
.toc-note{padding-top:8px;border-top:1px solid var(--ink);font-style:italic;font-size:14px;color:var(--brown)}

.story{flex:1.2 1 300px;min-width:0;display:flex;flex-direction:column;gap:18px}
.story p{color:var(--ink)}
.story p+p{color:var(--body-2)}
.story-actions{display:flex;flex-wrap:wrap;gap:14px;padding-top:6px}

.plate{position:relative;flex:1.2 1 320px;min-width:0}
.plate-art{position:relative;overflow:hidden;aspect-ratio:1/1;max-width:100%;border:4px solid var(--plate-ink);outline:1px solid var(--plate-ink);outline-offset:4px;background:repeating-conic-gradient(from 0deg at 50% 50%,#D79A21 0deg 6deg,#E8B84A 6deg 12deg)}
.plate-art svg{position:absolute;inset:0;width:100%;height:100%}
.plate-dots{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.3;pointer-events:none;background-image:radial-gradient(#7A3B12 1px,transparent 1.5px);background-size:6px 6px}
.burst{position:absolute;top:-22px;right:-8px;display:flex;align-items:center;justify-content:center;width:clamp(84px,15vw,120px);height:clamp(84px,15vw,120px);background:var(--plate-red);color:var(--plate-paper);transform:rotate(12deg);font-family:var(--cond);font-weight:700;font-size:clamp(18px,3.2vw,26px);line-height:1;text-transform:uppercase;text-align:center;
  clip-path:polygon(100% 50%,86.7% 59.8%,93.3% 75%,76.9% 76.9%,75% 93.3%,59.8% 86.7%,50% 100%,40.2% 86.7%,25% 93.3%,23.1% 76.9%,6.7% 75%,13.3% 59.8%,0% 50%,13.3% 40.2%,6.7% 25%,23.1% 23.1%,25% 6.7%,40.2% 13.3%,50% 0%,59.8% 13.3%,75% 6.7%,76.9% 23.1%,93.3% 25%,86.7% 40.2%)}
figcaption{margin-top:14px;padding-top:6px;border-top:1px solid var(--ink);font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--brown)}
figcaption b{color:var(--ink)}

/* cung hoàng đạo */
.zodiac{background:var(--paper-2);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.zodiac .wrap{padding-top:22px;padding-bottom:24px}
.zodiac-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;padding-bottom:12px}
.zodiac-head h2{font-family:var(--display);font-weight:900;font-size:clamp(22px,4vw,32px);line-height:1.1}
.zodiac-head span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.zodiac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,96px),1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.zodiac-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:92px;padding:10px 4px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);text-align:center}
.zodiac-grid .g{font-family:'Noto Sans Symbols','Segoe UI Symbol','DejaVu Sans',serif;font-size:34px;line-height:1.1;color:var(--red)}
.zodiac-grid .n{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase}

/* các mục */
.sec{padding-top:clamp(48px,8vw,96px)}
.cols-4{columns:4 240px;column-gap:40px;column-rule:1px solid var(--ink)}
.item{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:30px}
.item .glyph{display:block;font-family:'Noto Sans Symbols 2','Segoe UI Symbol',serif;font-size:34px;line-height:1;color:var(--red)}
.item .kick{display:block;margin-top:8px}
.item h3{margin:6px 0 10px;font-family:var(--display);font-weight:800;font-size:27px;line-height:1.12}
.item .by{display:block;padding-bottom:8px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brown)}
.item p{margin-top:10px;font-size:15.5px;line-height:1.62}
.more{display:flex;justify-content:flex-end;padding-top:4px}

.deep{position:relative;overflow:hidden;margin-top:clamp(52px,8vw,96px);background-color:var(--deep);color:var(--on-deep);
  background-image:radial-gradient(1.4px 1.4px at 24px 34px,#EADDBB,transparent),radial-gradient(1px 1px at 120px 90px,rgba(234,221,187,.8),transparent),radial-gradient(1.6px 1.6px at 180px 20px,#D79A21,transparent),radial-gradient(1px 1px at 70px 130px,rgba(234,221,187,.6),transparent);
  background-size:200px 150px}
.deep-rings{position:absolute;inset:0;opacity:.55;background:repeating-radial-gradient(circle at 0% 100%,transparent 0 22px,rgba(215,154,33,.13) 22px 44px)}
.deep-moon{position:absolute;top:20px;right:max(6px,4vw);width:clamp(110px,20vw,260px);height:auto;opacity:.22}
.deep .wrap{position:relative;padding-top:clamp(44px,7vw,88px);padding-bottom:clamp(48px,8vw,96px)}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 56px}
.pick{display:flex;align-items:flex-start;gap:18px;padding:24px 0;border-top:1px dashed rgba(234,221,187,.55)}
.pick .no{flex:none;min-width:58px;font-family:var(--display);font-style:italic;font-weight:900;font-size:52px;line-height:.95;color:var(--gold)}
.pick .tx{display:flex;flex-direction:column;gap:6px;min-width:0}
.pick .t{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.2}
.pick .d{font-size:15.5px;line-height:1.62;color:var(--on-deep-2)}
.deep a:hover .hl{color:var(--gold)}

.feng-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:36px 44px}
.feature{flex:1.3 1 min(100%,340px);min-width:0;display:flex;flex-direction:column;gap:14px;padding:clamp(20px,3.4vw,36px);border:4px double var(--ink);background:var(--paper-2)}
.feature h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,4.6vw,42px);line-height:1.08}
.feature .go{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.compass{flex:1 1 min(100%,300px);min-width:0;max-width:460px}
.compass svg{display:block;width:100%;height:auto}
.cols-2{margin-top:40px;columns:2 340px;column-gap:48px;column-rule:1px solid var(--ink)}
.fitem{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;padding:18px 0 22px;border-top:2px solid var(--ink)}
.fitem .han{display:block;font-family:'Noto Serif TC','Songti SC','SimSun',serif;font-weight:900;font-size:22px;line-height:1;color:var(--red)}
.fitem h3{margin:8px 0 6px;font-family:var(--display);font-weight:800;font-size:25px;line-height:1.15}
.fitem p{font-size:15.5px;line-height:1.62;color:var(--body-2)}

.duo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px}
.panel{position:relative;overflow:hidden;flex:1 1 min(100%,460px);min-width:0;padding:clamp(24px,4vw,44px)}
.panel h2{margin:8px 0 20px;font-family:var(--display);font-weight:900;font-size:clamp(32px,5.4vw,50px);line-height:1.05}
.panel-mystery{background:var(--paper-2);border:3px dashed var(--ink)}
.panel-mystery .q{position:absolute;top:-26px;right:10px;font-family:var(--display);font-weight:900;font-size:220px;line-height:1;color:var(--red);opacity:.14;pointer-events:none}
.panel-story{border:4px double var(--ink)}
.panel-story h2{font-style:italic}
.row{position:relative;display:block;padding:18px 0}
.panel-mystery .row{border-top:2px solid var(--ink)}
.panel-story .row{border-top:1px solid var(--ink)}
.row .t{display:block;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2}
.row .d{display:block;margin-top:4px;font-size:15.5px;line-height:1.6;color:var(--body-2)}

.sages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:30px 18px}
.sage{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.oval{display:flex;align-items:center;justify-content:center;width:166px;height:272px;border-radius:50%;border:4px double #2A170D;background-image:radial-gradient(rgba(42,23,13,.38) 1px,transparent 1.6px);background-size:5px 5px;box-shadow:0 0 0 5px var(--paper),0 0 0 7px var(--ink);font-family:var(--display);font-style:italic;font-weight:900;font-size:52px;color:#2A170D}
.sage .nm{padding-top:8px;font-family:var(--display);font-style:italic;font-weight:700;font-size:19px;line-height:1.2}
.t1{background-color:#D79A21}.t2{background-color:#C9653B}.t3{background-color:#9A9540}.t4{background-color:#B58B5A}

/* rao vặt + chân trang */
.foot{position:relative;background:var(--deep);color:var(--on-deep)}
.foot .wrap{padding-top:clamp(36px,6vw,64px);padding-bottom:32px}
.orn{text-align:center;font-size:18px;letter-spacing:1em;color:var(--gold)}
.ad{position:relative;margin-top:28px;padding:clamp(22px,4vw,40px);background:var(--paper);color:var(--ink);border:5px double var(--ink);outline:2px solid var(--on-deep);outline-offset:5px}
.ad-tag{position:absolute;top:-14px;left:20px;padding:2px 12px;background:var(--plate-red);color:var(--plate-paper);font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.ad h2{margin:6px 0 18px;font-family:var(--display);font-weight:900;font-size:clamp(28px,5vw,44px);line-height:1.08}
.ad-cols{display:flex;flex-wrap:wrap;gap:28px 48px}
.ad-cols>div{flex:1 1 min(100%,280px);min-width:0;display:flex;flex-direction:column;gap:6px;font-size:15.5px;line-height:1.55}
.ad a{display:inline-block;padding:8px 0;color:var(--red);font-weight:600;overflow-wrap:anywhere}
.ad b{font-family:var(--cond);letter-spacing:.12em}
.foot-mast{margin-top:44px;text-align:center;font-family:var(--display);font-weight:900;font-size:clamp(34px,8vw,72px);line-height:1.1;text-transform:uppercase;color:var(--on-deep);text-shadow:3px 2px 0 var(--plate-red)}
.foot-copy{margin-top:14px;padding-top:14px;border-top:1px solid rgba(234,221,187,.5);text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:#C9B48E}

/* ===== Phần thêm cho CMS ===== */
.nav a.on{background:var(--ink);color:var(--paper)}
.mast-link{color:inherit}
.empty{padding:80px 0;text-align:center;font-style:italic;color:var(--brown)}

/* thẻ bài viết */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:34px 28px}
.card{display:flex;flex-direction:column;gap:0;min-width:0}
.card-img{display:block;aspect-ratio:16/10;overflow:hidden;border:3px solid var(--ink);background:var(--paper-2);margin-bottom:12px}
.card-img img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.18) contrast(1.02)}
.card-img.ph{display:flex;align-items:center;justify-content:center;font-size:56px;color:var(--red)}
.card .kick{display:block}
.card h3{margin:6px 0 8px;font-family:var(--display);font-weight:800;font-size:22px;line-height:1.18}
.card .by{display:block;padding-bottom:8px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brown)}
.card p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--body-2)}
.card:hover .hl{color:var(--red)}
.deep .card-img{border-color:var(--on-deep)}
.deep .card .by{border-color:rgba(234,221,187,.5);color:var(--gold)}
.deep .card p{color:var(--on-deep-2)}
.deep .card .kick{color:var(--gold)}
.deep:hover{}
.deep-sec{position:relative}
.plate-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate-art.noimg{display:flex;align-items:center;justify-content:center;font-size:120px;color:var(--plate-red)}

/* trang chuyên mục */
.cat-head{padding-top:clamp(28px,5vw,56px);padding-bottom:30px}
.cat-head h1{margin:14px 0 0;text-align:center;font-family:var(--display);font-weight:900;font-size:clamp(34px,6vw,64px);line-height:1.05;text-transform:uppercase;text-shadow:2px 2px 0 var(--head-shadow)}
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:48px 0 0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:2px solid var(--ink);font-family:var(--cond);font-weight:600;letter-spacing:.1em}
.pager a:hover,.pager .cur{background:var(--ink);color:var(--paper)}

/* trang bài viết */
.art{padding-top:clamp(24px,4vw,40px);padding-bottom:clamp(40px,6vw,72px)}
.art-meta{margin-top:20px;text-align:center;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.art-cover{max-width:980px;margin:30px auto 0}
.art-cover img{display:block;width:100%;height:auto;border:4px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;filter:sepia(.12)}
.art-body{max-width:720px;margin:40px auto 0;font-size:19px;line-height:1.75;overflow-wrap:break-word}
.art-body>p:first-of-type::first-letter{float:left;font-family:var(--display);font-weight:900;font-size:3.9em;line-height:.82;padding:6px 10px 0 0;color:var(--red)}
.art-body p{margin:0 0 1.15em}
.art-body h2{margin:1.8em 0 .5em;font-family:var(--display);font-weight:900;font-size:clamp(26px,4vw,36px);line-height:1.15}
.art-body h3{margin:1.6em 0 .4em;font-family:var(--display);font-weight:800;font-size:clamp(22px,3.4vw,28px);line-height:1.2}
.art-body h4{margin:1.4em 0 .4em;font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.art-body blockquote{margin:1.6em 0;padding:6px 0 6px 22px;border-left:5px solid var(--red);font-style:italic;font-size:1.08em;color:var(--brown)}
.art-body ul,.art-body ol{margin:0 0 1.2em;padding-left:1.4em}
.art-body ul{list-style:disc}.art-body ol{list-style:decimal}
.art-body li{margin:.3em 0}
.art-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.art-body figure{margin:1.8em 0}
.art-body img{display:block;max-width:100%;height:auto;margin:1.8em auto;border:3px solid var(--ink)}
.art-body figure img{margin:0 auto}
.art-body figcaption{text-align:center}
.art-body hr{margin:2em 0;border:0;border-top:3px double var(--ink)}
.art-end{max-width:720px;margin:36px auto 0;padding-top:16px;border-top:3px double var(--ink);text-align:center}
.related{padding-top:clamp(36px,6vw,64px)}

/* ===== Ảnh trong các khối kiểu báo ===== */
.item-img,.fitem-img,.feature-img{display:block;overflow:hidden;border:3px solid var(--ink);background:var(--paper-2)}
.item-img{aspect-ratio:16/10;margin-bottom:12px}
.fitem-img{aspect-ratio:21/9;margin-bottom:10px}
.feature-img{aspect-ratio:16/9;margin-bottom:6px}
.item-img img,.fitem-img img,.feature-img img,.pick-img img,.row-img img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.18) contrast(1.02)}
.pick{align-items:flex-start}
.pick .tx{flex:1}
.pick-img{flex:none;width:96px;aspect-ratio:4/3;overflow:hidden;border:2px solid var(--on-deep)}
@media (max-width:480px){.pick-img{width:72px}}
.row.has-img{display:flex;gap:14px;align-items:flex-start}
.row-img{flex:none;width:92px;aspect-ratio:4/3;overflow:hidden;border:2px solid var(--ink)}
.row .rt{flex:1;min-width:0;display:block}
.panel .go{display:inline-block;margin-top:14px;padding:6px 0;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.oval{overflow:hidden}
.oval img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.35) contrast(1.05)}

/* =====================================================================
   PHONG CÁCH THẬP NIÊN 60 × HUYỀN BÍ
   Sunburst · sọc retro · bán sắc (halftone) · in lệch màu · sao trời
   ===================================================================== */
:root{--teal:#2F7F78}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--teal:#5FB7AE}}
:root[data-theme="dark"]{--teal:#5FB7AE}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8) rotate(0)}50%{opacity:.85;transform:scale(1.25) rotate(25deg)}}
@keyframes wob{0%,100%{transform:rotate(12deg) scale(1)}50%{transform:rotate(7deg) scale(1.09)}}
@keyframes sway{0%{transform:rotate(-5deg)}100%{transform:rotate(5deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes psy{to{background-position:0 0,64px 0}}

/* ---- Đầu trang: mặt trời quay, trăng đung đưa ---- */
.mast-link .mast-ico:first-child{animation:spin 48s linear infinite}
.mast-link .mast-ico:last-child{animation:bob 6s ease-in-out infinite}
.mast-title{text-shadow:3px 3px 0 var(--head-shadow),6px 6px 0 rgba(215,154,33,.35)}

/* ---- Dải chữ chạy kiểu poster 60s ----  border-bottom:6px solid var(--red);
  box-shadow:0 6px 0 var(--gold),0 12px 0 var(--teal) */
.ticker{overflow:hidden;background:var(--ink);color:var(--paper);}

.ticker-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-half{display:flex;flex:none}
.ticker-half span{flex:none;padding:9px 0;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
.ticker-half b{color:var(--gold);font-weight:400;padding:0 .9em}
.ticker + main{padding-top:18px}

/* ---- Sọc retro 3 màu dùng làm dấu gạch dưới  background:linear-gradient(var(--red) 0 33.3%,var(--gold) 33.3% 66.6%,var(--teal) 66.6%) ---- */
.sec-sub::after,.cat-head h1::after{content:"";display:block;width:132px;height:12px;margin:14px auto 0;border-radius:0 0 8px 8px}
.cat-head h1::after{margin-top:20px;width:180px;height:14px}
/* .deep .sec-sub::after{background:linear-gradient(var(--gold) 0 33.3%,#EADDBB 33.3% 66.6%,var(--teal) 66.6%)} */
.sec-head h2{text-shadow:3px 3px 0 var(--head-shadow)}
.deep .sec-head h2{text-shadow:3px 3px 0 rgba(181,57,26,.8)}

/* ---- Trang nhất: bầu trời sao, mặt trời tỏa tia sau ảnh ---- */
.lead{position:relative}
.lead>:not(.cosmos){position:relative;z-index:1}
.cosmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:var(--gold)}
.cosmos i{position:absolute;font-style:normal;font-family:'Noto Sans Symbols 2','Segoe UI Symbol',serif;line-height:1;opacity:.15;animation:twinkle 5s ease-in-out infinite}
.cosmos i:nth-child(1){top:6%;left:3%;font-size:26px}
.cosmos i:nth-child(2){top:14%;left:46%;font-size:18px;animation-delay:1.2s;color:var(--red)}
.cosmos i:nth-child(3){top:4%;right:4%;font-size:34px;animation-delay:2.1s}
.cosmos i:nth-child(4){top:46%;left:1.5%;font-size:20px;animation-delay:.6s;color:var(--teal)}
.cosmos i:nth-child(5){top:58%;right:2%;font-size:28px;animation-delay:3s;color:var(--red)}
.cosmos i:nth-child(6){bottom:9%;left:40%;font-size:22px;animation-delay:1.8s}
.cosmos i:nth-child(7){bottom:4%;right:30%;font-size:16px;animation-delay:2.6s;color:var(--teal)}
.cosmos i:nth-child(8){top:30%;right:44%;font-size:14px;animation-delay:.2s}
.plate{isolation:isolate}
.plate::before{content:"";position:absolute;z-index:-1;inset:-16%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--gold) 0 4deg,transparent 4deg 12deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
  opacity:.5;animation:spin 120s linear infinite}
.plate-art{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.plate:hover .plate-art{transform:rotate(-1.2deg) scale(1.015);box-shadow:12px 12px 0 var(--red)}
.burst{animation:wob 3.6s ease-in-out infinite}
.lead-title a{background:linear-gradient(var(--red),var(--red)) 0 100%/0 .09em no-repeat;transition:background-size .5s}
.lead-title a:hover{background-size:100% .09em}
.toc-box{box-shadow:7px 7px 0 var(--red)}
.toc a{transition:padding-left .25s,color .25s}
.toc a:hover{padding-left:8px;color:var(--red)}

/* ---- Ảnh: ố vàng + chấm bán sắc, hover thì lên màu ---- */
.card-img,.item-img,.fitem-img,.feature-img,.row-img,.pick-img{position:relative;isolation:isolate}
.card-img::after,.item-img::after,.fitem-img::after,.feature-img::after,.row-img::after,.pick-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.32;transition:opacity .4s;
  background-image:radial-gradient(#7A3B12 1px,transparent 1.5px);background-size:5px 5px}
.card-img img,.item-img img,.fitem-img img,.feature-img img,.row-img img,.pick-img img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.card:hover .card-img img,.item:hover .item-img img,.fitem:hover .fitem-img img,.feature:hover .feature-img img,.row:hover .row-img img,.pick:hover .pick-img img{transform:scale(1.07);filter:sepia(0) saturate(1.15) contrast(1.05)}
.card:hover .card-img::after,.item:hover .item-img::after,.fitem:hover .fitem-img::after,.feature:hover .feature-img::after,.row:hover .row-img::after,.pick:hover .pick-img::after{opacity:.1}
.card-img,.item-img,.fitem-img,.feature-img{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card:hover .card-img,.item:hover .item-img,.fitem:hover .fitem-img,.feature:hover .feature-img{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--red)}
.card-img.ph{transition:transform .35s,box-shadow .35s}
.card-img.ph::after{display:none}

/* ---- Từng kiểu khối ---- */
/* .item .glyph{transition:transform .9s cubic-bezier(.2,.8,.2,1)} */
.item:hover .glyph{transform:rotate(360deg) scale(1.15)}
.item .glyph,.fitem .han,.pick .no{transform-origin:center}
.fitem .han{transition:transform .35s}
.fitem:hover .han{transform:scale(1.25) rotate(-6deg);transform-origin:left center}
.pick{transition:transform .3s,background .3s}
.pick:hover{transform:translateX(8px)}
.pick .no{display:block;transition:transform .35s,color .35s}
.pick:hover .no{transform:rotate(-8deg) scale(1.18);color:#EADDBB}
.deep-moon{animation:float 10s ease-in-out infinite}
.deep-rings{animation:psy 0s}
.compass svg{transform-origin:50% 50%;animation:sway 7s ease-in-out infinite alternate}
.compass:hover svg{animation-duration:1.8s}
.panel-mystery .q{animation:float 7s ease-in-out infinite}
.panel-mystery{background-image:radial-gradient(rgba(42,23,13,.16) 1px,transparent 1.6px);background-size:7px 7px}
.panel .row{transition:padding-left .25s}
.panel .row:hover{padding-left:10px}
.panel .go:hover{letter-spacing:.24em}
.sage{transition:transform .35s}
.sage:hover{transform:translateY(-6px)}
.sage .oval{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sage:hover .oval{transform:rotate(-5deg) scale(1.08)}
.zodiac-grid a{transition:background .25s,color .25s}
.zodiac-grid a:hover{background:var(--ink);color:var(--paper)}
.zodiac-grid .g{display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.zodiac-grid a:hover .g{transform:rotate(360deg) scale(1.3);color:var(--gold)}
.btn{transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--red)}
.feature .go,.more .btn-line{transition:letter-spacing .3s}
.feature:hover .go{letter-spacing:.24em}

/* ---- Hiện dần khi cuộn (chỉ bật khi có JS và không tắt chuyển động) ---- */
.js .rv{opacity:0;transform:translateY(26px) rotate(-.6deg);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .sec-head.rv{transform:scaleX(.9)}
.js .sec-head.rv.in{transform:none}

/* ---- Thanh tiến độ đọc bài ---- */
.progress{position:fixed;z-index:50;top:0;left:0;right:0;height:6px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red) 0 33%,var(--gold) 33% 66%,var(--teal) 66%)}

/* ---- Trang bài viết ---- */
.art-cover img{box-shadow:14px 14px 0 var(--red)}
.art .lead-flag span{position:relative}
.art-body blockquote{position:relative;padding-left:58px}
.art-body blockquote::before{content:"\201C";position:absolute;left:8px;top:-12px;font-family:var(--display);font-weight:900;font-size:78px;line-height:1;color:var(--red);opacity:.85}
.art-body hr{border:0;height:auto;text-align:center;line-height:1}
.art-body hr::before{content:"\2726  \2726  \2726";color:var(--gold);letter-spacing:.8em;font-size:20px}
.art-body h2{display:flex;align-items:center;gap:14px}
.art-body h2::after{content:"";flex:1;height:10px;min-width:24px;background:linear-gradient(var(--red) 0 33%,var(--gold) 33% 66%,var(--teal) 66%);opacity:.9}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
}
@media (max-width:640px){
  .ticker-half span{font-size:12px;letter-spacing:.26em}
  .pick:hover{transform:none}
  .plate::before{inset:-10%}
}

@media (max-width:640px){
  .nav{overflow:visible}
  .nav ul{width:auto;flex-wrap:wrap;justify-content:center;border-left:1px solid var(--ink)}
  .nav li{flex:1 1 auto}
  .nav a{
    justify-content:center;text-align:center;
    min-height:42px;padding:0 12px;
    font-size:13px;letter-spacing:.08em;
    border-top:1px solid var(--ink);
  }
  .nav li:first-child a{border-left:0}
}