/* Hồ sơ tác phẩm v3: hồ sơ nhanh gọn, khối "Tổng quan chuyên sâu" (pf-*), tiêu đề mục rõ ràng hơn.
   Nạp sau CSS nhúng của detail.v2.js (scripts/build-profiles.mjs chèn link + ?v= theo hash file này). */

/* ---------- Hero ---------- */
.anime-hero{min-height:420px}
.anime-hero .ah-title{text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.anime-hero .ah-poster{border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(255,33,119,.25),0 18px 50px rgba(0,0,0,.55),0 0 60px rgba(255,33,119,.12)}
.anime-hero .ah-synopsis{max-width:680px}

/* ---------- Hồ sơ nhanh ---------- */
.info-table.pf-quick{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);margin-bottom:14px}
.pf-quick .info-row{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--surf);padding:12px 16px;gap:4px;border-left:2px solid transparent;transition:border-color .2s,background .2s}
.pf-quick .info-row:hover{border-left-color:var(--acc)}
.pf-quick .ir-label{font-size:10.5px;letter-spacing:.16em;color:#8f8fa0}
.pf-quick .ir-val{font-size:15px;line-height:1.35;color:#f0f0f7}
.pf-names{margin:0 0 22px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.pf-names>summary{cursor:pointer;list-style:none;padding:11px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px;min-height:44px}
.pf-names>summary::-webkit-details-marker{display:none}
.pf-names>summary::after{content:"+";margin-left:auto;font-size:18px;color:var(--acc);line-height:1}
.pf-names[open]>summary::after{content:"\2212"}
.pf-names[open]>summary{border-bottom:1px solid var(--border)}
.pf-names .info-table{margin:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:rgba(255,255,255,.06)}

/* ---------- Tiêu đề mục chung ---------- */
.review-heading{display:flex;align-items:center;gap:12px;font-size:22px;letter-spacing:-.01em;margin:34px 0 14px;padding:0}
.review-heading::before{content:"";width:4px;height:1.15em;background:linear-gradient(180deg,var(--acc),var(--violet));flex:none}
.review-body>p{max-width:72ch}
.verdict-card{box-shadow:0 10px 40px rgba(0,0,0,.25)}

/* ---------- Khối Tổng quan chuyên sâu ---------- */
.pf-deep{margin:6px 0 34px;scroll-margin-top:80px}
.pf-deep section{scroll-margin-top:84px}
.pf-toc{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;margin:0 0 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pf-toc a{flex:none;font-size:12.5px;font-weight:600;color:var(--dim);text-decoration:none;padding:8px 14px;border:1px solid var(--border);background:rgba(255,255,255,.03);transition:all .2s;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center}
.pf-toc a:hover,.pf-toc a:focus-visible{color:#fff;border-color:var(--acc);background:rgba(255,33,119,.12);outline:none}
.pf-top{position:relative;padding:26px 28px 24px;margin:6px 0 8px;background:radial-gradient(120% 140% at 0% 0%,rgba(124,58,237,.22),transparent 60%),radial-gradient(90% 120% at 100% 100%,rgba(255,33,119,.14),transparent 60%),var(--surf);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.pf-top::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--acc),var(--violet))}
.pf-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:10px}
.pf-lead{font-size:19px;line-height:1.7;color:#f2f2f8;margin:0 0 20px;max-width:70ch}
.pf-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pf-fact{background:rgba(10,4,24,.55);border:1px solid rgba(255,255,255,.08);padding:12px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.pf-fact b{font-family:var(--fd);font-size:17px;line-height:1.25;color:#fff;font-weight:700;overflow-wrap:anywhere}
.pf-fact span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9a9aae}
.pf-h{display:flex;align-items:center;gap:12px;font-family:var(--fd);font-size:24px;line-height:1.2;letter-spacing:-.01em;color:#fff;margin:36px 0 16px}
.pf-h::before{content:"";width:4px;height:1.1em;background:linear-gradient(180deg,var(--acc),var(--violet));flex:none}
.pf-sub{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9a9aae;font-weight:700;margin:0 0 10px}
.pf-story p{font-size:17.5px;line-height:1.9;color:#dcdce6;margin:0 0 16px;max-width:72ch}

/* Điểm nổi bật */
.pf-hl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-hl-item{position:relative;background:var(--surf);border:1px solid var(--border);padding:18px 18px 18px 18px;overflow:hidden;transition:border-color .2s,transform .2s}
.pf-hl-item:hover{border-color:rgba(255,33,119,.5);transform:translateY(-2px)}
.pf-hl-n{position:absolute;right:12px;top:6px;font-family:var(--fd);font-weight:800;font-size:44px;line-height:1;color:rgba(255,255,255,.05)}
.pf-hl-item h3{font-family:var(--fd);font-size:16.5px;line-height:1.3;color:#fff;margin:0 0 8px;padding-right:44px}
.pf-hl-item p{font-size:15px;line-height:1.7;color:#c8c8d6;margin:0}

/* Nhân vật */
.pf-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pf-char{display:flex;gap:14px;background:var(--surf);border:1px solid var(--border);padding:16px;align-items:flex-start;--h:260}
.pf-av{flex:none;width:52px;height:52px;display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 70% 52%),hsl(calc(var(--h) + 40) 70% 38%));border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 6px 18px hsl(var(--h) 70% 40% / .35)}
.pf-char h3{font-family:var(--fd);font-size:16px;line-height:1.25;color:#fff;margin:0 0 4px}
.pf-role{display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(251,191,36,.3);padding:2px 8px;margin-bottom:8px}
.pf-char p{font-size:14.5px;line-height:1.65;color:#c8c8d6;margin:0}

/* Bắt đầu từ đâu */
.pf-start{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(135deg,rgba(0,242,255,.1),rgba(124,58,237,.12));border:1px solid rgba(0,242,255,.25);padding:20px 22px;margin-bottom:22px}
.pf-start-ic{flex:none;width:38px;height:38px;display:grid;place-items:center;background:var(--cyan);color:#06121a;font-size:14px;padding-left:2px;border-radius:50%}
.pf-start p{margin:0;font-size:17px;line-height:1.75;color:#f0f0f8}
.pf-order{list-style:none;counter-reset:o;margin:0;padding:0;display:grid;gap:0}
.pf-order li{counter-increment:o;position:relative;display:grid;grid-template-columns:1fr;gap:3px;padding:2px 0 18px 54px}
.pf-order li::before{content:counter(o);position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:15px;color:#fff;background:var(--surf2);border:1px solid rgba(255,33,119,.55);border-radius:50%}
.pf-order li::after{content:"";position:absolute;left:17px;top:40px;bottom:2px;width:2px;background:linear-gradient(180deg,rgba(255,33,119,.4),transparent)}
.pf-order li:last-child::after{display:none}
.pf-order b{font-family:var(--fd);font-size:16px;color:#fff}
.pf-order span{font-size:15px;line-height:1.65;color:#c8c8d6}

/* Hợp với ai */
.pf-aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-aud-col{background:var(--surf);border:1px solid var(--border);padding:18px 20px;border-top:3px solid var(--green)}
.pf-aud-col.no{border-top-color:var(--amber)}
.pf-aud-col h3{font-family:var(--fd);font-size:14px;letter-spacing:.06em;color:#fff;margin:0 0 12px}
.pf-aud-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pf-aud-col li{position:relative;padding-left:26px;font-size:15px;line-height:1.65;color:#d0d0dc}
.pf-aud-col li::before{content:"\2713";position:absolute;left:0;top:1px;font-weight:800;color:var(--green)}
.pf-aud-col.no li::before{content:"\2715";color:var(--amber)}

/* Mốc thời gian */
.pf-tl{list-style:none;margin:0;padding:0 0 0 6px;border-left:2px solid rgba(255,255,255,.1)}
.pf-tl li{position:relative;display:grid;grid-template-columns:104px 1fr;gap:14px;padding:0 0 18px 22px}
.pf-tl li::before{content:"";position:absolute;left:-8px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(255,33,119,.2)}
.pf-tl b{font-family:var(--fd);font-size:15px;color:var(--cyan)}
.pf-tl span{font-size:15px;line-height:1.65;color:#d0d0dc}

/* Hỏi đáp */
.pf-faq{display:grid;gap:8px}
.pf-faq details{background:var(--surf);border:1px solid var(--border)}
.pf-faq summary{cursor:pointer;list-style:none;padding:15px 48px 15px 18px;font-family:var(--fd);font-size:15.5px;font-weight:600;color:#fff;position:relative;min-height:48px;display:flex;align-items:center;line-height:1.4}
.pf-faq summary::-webkit-details-marker{display:none}
.pf-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--acc);line-height:1}
.pf-faq details[open] summary::after{content:"\2212"}
.pf-faq details[open]{border-color:rgba(255,33,119,.4)}
.pf-faq details p{margin:0;padding:0 18px 18px;font-size:15.5px;line-height:1.8;color:#cfcfdc}
.pf-src{font-size:13px;line-height:1.8;color:#9a9aae;margin:26px 0 0;padding-top:14px;border-top:1px solid var(--border)}
.pf-src a{color:var(--dim);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.pf-src a:hover{color:var(--acc)}

/* ---------- Thanh bên ---------- */
.anime-sidebar .sim-item{padding:8px;border:1px solid transparent;transition:border-color .2s,background .2s}
.anime-sidebar .sim-item:hover{border-color:rgba(255,33,119,.4);background:rgba(255,255,255,.03)}

/* ---------- Di động ---------- */
@media(max-width:768px){
  .anime-hero{min-height:0}
  .info-table.pf-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-top{padding:20px 18px}
  .pf-lead{font-size:16.5px;line-height:1.7}
  .pf-h{font-size:21px;margin-top:30px}
  .pf-hl,.pf-aud{grid-template-columns:1fr}
  .pf-chars{grid-template-columns:1fr}
  .pf-story p{font-size:16.5px;line-height:1.8}
  .pf-start{padding:16px}.pf-start p{font-size:16px}
  .pf-tl li{grid-template-columns:1fr;gap:2px}
  .pf-faq summary{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.pf-hl-item,.pf-quick .info-row,.pf-toc a{transition:none}.pf-hl-item:hover{transform:none}}

/* Cột chính là phần tử lưới: không để mục lục cuộn ngang (nowrap) kéo rộng cả trang trên điện thoại */
.anime-main,.anime-sidebar,.pf-deep{min-width:0}