/* Premium 3-column learning workspace adapted from the CiCC template contract. */
.sp-body{--sp-left-width:248px;--sp-right-width:352px;display:grid;grid-template-columns:var(--sp-left-width) minmax(600px,780px) var(--sp-right-width);gap:24px;align-items:start;width:min(100% - 32px,1560px);margin:0 auto;position:relative}
.course-layout.course-layout--single.sp-body{grid-template-columns:var(--sp-left-width) minmax(0,1fr) var(--sp-right-width)}
.sp-toc-sidebar{grid-column:1;position:sticky;top:104px;min-width:0;z-index:2}.sp-toc-sidebar nav{position:relative;padding:18px 14px;border:1px solid #dbe7ef;border-radius:20px;background:linear-gradient(180deg,#fff 0%,#f5fbfd 100%);box-shadow:0 18px 42px rgba(8,47,73,.08)}.sp-toc-sidebar nav:before{content:'';display:block;width:44px;height:4px;margin:0 0 13px;border-radius:99px;background:linear-gradient(90deg,#06b6d4,#7c3aed)}.sp-toc-sidebar h4{margin:0 0 13px;color:#082f49;font-size:.72rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.sp-toc-sidebar ul{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none}.sp-toc-sidebar li{margin:0}.sp-toc-sidebar a{display:block;padding:9px 10px;border-left:3px solid transparent;border-radius:8px;color:#60788a;font-size:.76rem;font-weight:650;line-height:1.35;text-decoration:none;transition:.2s ease}.sp-toc-sidebar a:hover{color:#075985;background:#ecfeff;border-left-color:#67e8f9;transform:translateX(2px)}.sp-toc-sidebar a.active{color:#075985;background:#e0f7ff;border-left-color:#06b6d4;font-weight:850}.sp-toc-sidebar .toc-subitem a{padding-left:22px;color:#8196a4;font-size:.7rem}
.sp-article{grid-column:2;min-width:0;max-width:780px;padding:clamp(24px,3vw,42px);border:1px solid rgba(148,163,184,.25);border-radius:26px;background:rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(15,23,42,.09)}.sp-article:after{content:'';display:block;height:1px;margin-top:36px;background:linear-gradient(90deg,transparent,#cdeaf2,transparent)}.sp-article .entry-content,.sp-article .post-content,.sp-article .course-content,.sp-article .cs-content-imported{min-width:0}.sp-article img{max-width:100%;height:auto}.sp-article table{display:block;max-width:100%;overflow-x:auto}.sp-article :is(h2,h3,h4){scroll-margin-top:var(--reading-anchor-offset,112px)}
.sp-sidebar{grid-column:3;min-width:0;display:flex;flex-direction:column;gap:16px;position:sticky;top:104px;z-index:2}.sp-widget{padding:22px;border:1px solid #dbe5ee;border-radius:22px;background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.09)}.sp-widget--ai{position:relative;overflow:hidden;color:#fff;background:radial-gradient(circle at 100% 0,rgba(34,211,238,.32),transparent 32%),linear-gradient(145deg,#041827 0%,#075985 64%,#0e7490 100%);border-color:rgba(103,232,249,.42);box-shadow:0 22px 50px rgba(7,89,133,.24)}.sp-widget--ai:after{content:'✦';position:absolute;right:18px;top:13px;color:rgba(165,243,252,.2);font-size:58px;line-height:1;pointer-events:none}.sp-widget--ecosystem{background:linear-gradient(180deg,#fff,#f8fbff)}.sp-widget h2{margin:6px 0 10px;color:#0f172a;font-size:1.12rem;line-height:1.2;letter-spacing:-.02em}.sp-widget--ai h2{color:#fff}.sp-ai-eyebrow{display:block;color:#0e7490;font-size:.62rem;font-weight:900;letter-spacing:.13em}.sp-widget--ai .sp-ai-eyebrow{color:#a5f3fc}.sp-ai-desc{margin:0 0 15px;color:#d8eff8;font-size:.78rem;line-height:1.55}.sp-ai__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sp-ai__btn{padding:10px 8px;border:1px solid rgba(165,243,252,.3);border-radius:10px;color:#fff;background:rgba(255,255,255,.1);font:inherit;font-size:.73rem;font-weight:800;cursor:pointer}.sp-ai__btn:hover,.sp-ai__btn:focus-visible{background:#06b6d4;border-color:#a5f3fc}.sp-ai__btn:disabled{opacity:.55;cursor:wait}.sp-ai-result{margin-top:14px;border-radius:12px;overflow:hidden;background:#fff;color:#0f172a}.sp-ai-result[hidden]{display:none}.sp-ai-result__head{display:flex;justify-content:space-between;padding:9px 11px;border-bottom:1px solid #e2e8f0;color:#075985;font-size:.72rem;font-weight:800}.sp-ai-result__body{max-height:320px;overflow:auto;padding:12px;font-size:.78rem;line-height:1.6;white-space:pre-wrap}.sp-ai-result__actions{display:flex;gap:7px;padding:0 11px 11px}.sp-ai-result__actions button,.sp-ai-open-chat{padding:7px 10px;border:1px solid #cbd5e1;border-radius:8px;color:#075985;background:#fff;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}.sp-ai-open-chat{width:100%;margin-top:14px;border-color:rgba(165,243,252,.4);color:#e0faff;background:rgba(255,255,255,.08)}.sp-ai-open-chat:hover{background:rgba(255,255,255,.18)}.sp-utility-link{display:block;padding:9px 0;border-top:1px solid #edf2f7;color:#475569;font-size:.75rem;font-weight:700;text-decoration:none}.sp-utility-link:hover{color:#075985}
.sp-reading-progress{position:fixed;top:0;left:0;width:0;height:4px;z-index:100000;background:linear-gradient(90deg,#06b6d4,#7c3aed,#f59e0b);box-shadow:0 0 16px rgba(6,182,212,.7);transition:width .08s linear}
body:has(.sp-body) .page-header:not(.single-hero),body:has(.sp-body) .cs-header{background:radial-gradient(circle at 85% 0,rgba(34,211,238,.28),transparent 32%),linear-gradient(125deg,#041827 0%,#075985 62%,#164e63 100%);color:#fff;border:0;position:relative;overflow:hidden}body:has(.sp-body) .page-header:not(.single-hero):after,body:has(.sp-body) .cs-header:after{content:'✦';position:absolute;right:8%;top:16%;color:rgba(165,243,252,.15);font-size:150px;line-height:1}body:has(.sp-body) .page-header:not(.single-hero) h1,body:has(.sp-body) .cs-header h1{position:relative;z-index:1;color:#fff;max-width:940px;letter-spacing:-.04em}body:has(.sp-body) .page-header:not(.single-hero) .container,body:has(.sp-body) .cs-header .container{position:relative;z-index:2}.post-single>.section,.single-fallback>.section,.course-content-section,.cs-detail{background:linear-gradient(180deg,#f7fbfd 0%,#eef6fa 100%)}.phan-he-reading-shell{padding-top:24px;padding-bottom:24px}
.sp-shell-resizer{position:absolute;top:0;bottom:0;width:14px;border:0;background:transparent;cursor:col-resize;z-index:5}.sp-shell-resizer--left{left:calc(var(--sp-left-width) - 7px)}.sp-shell-resizer--right{right:calc(var(--sp-right-width) - 7px)}.sp-shell-resizer:after{content:'⋮';position:absolute;top:50%;left:1px;width:12px;height:48px;border-radius:99px;color:#075985;background:#dff7ff;font:800 18px/44px Arial;transform:translateY(-50%);opacity:.65}.sp-shell-resizer:hover:after,.sp-shell-resizer.is-dragging:after{color:#fff;background:#06b6d4;opacity:1}
@media(max-width:1320px){.sp-body{--sp-left-width:220px;--sp-right-width:300px;grid-template-columns:var(--sp-left-width) minmax(0,1fr) var(--sp-right-width);gap:16px}.sp-article{max-width:none}}
@media(max-width:860px){.sp-body{display:flex;flex-direction:column;gap:16px;width:min(100% - 24px,780px)}.sp-toc-sidebar,.sp-article,.sp-sidebar{width:100%;max-width:none;position:static}.sp-toc-sidebar{order:1}.sp-article{order:2;padding:22px 18px;border-radius:20px}.sp-sidebar{order:3}.sp-ai__btns{grid-template-columns:repeat(4,1fr)}.sp-shell-resizer{display:none}}
@media(max-width:560px){.sp-ai__btns{grid-template-columns:1fr 1fr}.sp-widget{padding:18px;border-radius:17px}.sp-article{padding:20px 15px}.sp-toc-sidebar nav{padding:16px 12px}}

/* Final contrast guard: the legacy theme has broad widget selectors loaded on some templates. */
.sp-sidebar .sp-widget.sp-widget--ai h2{color:#fff!important}
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-desc{color:#d8eff8!important}
.sp-sidebar .sp-widget.sp-widget--ai strong{color:#fff!important}
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body p,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body li,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body strong,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body b,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body h1,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body h2,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body h3,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body h4,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body h5,
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-result__body h6 { color:#12324a!important; }
.sp-sidebar .sp-widget.sp-widget--ai .sp-ai-eyebrow{color:#a5f3fc!important}
.sp-toc-sidebar ul:empty:after{content:'Mục lục sẽ tự tạo từ các tiêu đề';display:block;padding:10px 10px 4px;color:#8aa0ad;font-size:.7rem;font-weight:600;line-height:1.45}
@media(max-width:860px){
  html,body{overflow-x:clip}
  .sp-body,.course-layout.course-layout--single.sp-body{display:flex!important;flex-direction:column!important;width:calc(100% - 24px)!important;max-width:780px!important;margin-inline:auto!important;gap:16px!important}
  .sp-toc-sidebar,.sp-article,.sp-sidebar{width:100%!important;max-width:100%!important;min-width:0!important;grid-column:auto!important;position:static!important}
  .sp-toc-sidebar{order:1}.sp-article{order:2}.sp-sidebar{order:3}
}

/* Final sticky correction: never give a sticky rail the full grid-row height. */
@media(min-width:861px){
  .sp-body{align-items:start}
  .sp-body>.sp-toc-sidebar,.sp-body>.sp-article,.sp-body>.sp-sidebar{align-self:start;min-height:0}
  .sp-toc-sidebar,.sp-sidebar{height:max-content;position:sticky;top:104px}
}
@media(max-width:420px){
  .course-single .course-hero-grid,.course-single .course-hero-grid>*{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;min-width:0!important}
  .course-single .course-hero-sidebar .sidebar-card{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;margin-inline:0!important}
  .course-single .course-hero-sidebar .info-row span{min-width:0!important;overflow-wrap:anywhere!important;word-break:break-word}
  .course-single .course-hero h1{font-size:clamp(24px,7.2vw,28px)!important;overflow-wrap:anywhere!important;word-break:normal}
}
.sp-ai-typing{display:inline-flex;gap:4px;align-items:center;height:12px}.sp-ai-typing i{display:block;width:5px;height:5px;border-radius:50%;background:#06b6d4;animation:sp-ai-bounce 1s infinite ease-in-out}.sp-ai-typing i:nth-child(2){animation-delay:.14s}.sp-ai-typing i:nth-child(3){animation-delay:.28s}@keyframes sp-ai-bounce{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.sp-ai-heading{display:block;margin:10px 0 5px;color:#075985;font-size:1.02em;font-weight:850;line-height:1.35}
.sp-ai-result__body{padding:9px 10px;font-size:.75rem;line-height:1.48}
.sp-ai-result__head{padding:7px 9px}
.sp-ai-result__actions{gap:5px;padding:0 9px 8px}
.sp-ai-result__actions button,.sp-ai-open-chat{padding:6px 8px}
.sp-utility-link{padding:7px 0;font-size:.72rem}
@media(min-width:861px){
  /* Sticky rails must remain shorter than the grid row; a full-height sticky
     element has no scroll range and therefore appears to drift away. */
  .sp-body{align-items:start}
  .sp-body>.sp-toc-sidebar,.sp-body>.sp-article,.sp-body>.sp-sidebar{align-self:start;min-height:0}
  .sp-toc-sidebar,.sp-sidebar{height:max-content;position:sticky;top:104px}
}

/* Reading-first density: reserve the visual weight for the article column. */
@media(min-width:861px){
  .sp-body{--sp-left-width:220px;--sp-right-width:320px;grid-template-columns:var(--sp-left-width) minmax(0,1fr) var(--sp-right-width);gap:20px;width:min(calc(100% - 32px),1800px);align-items:stretch}
  .course-layout.course-layout--single.sp-body{grid-template-columns:var(--sp-left-width) minmax(0,1fr) var(--sp-right-width)}
  .sp-body>.sp-toc-sidebar,.sp-body>.sp-article,.sp-body>.sp-sidebar{align-self:stretch;min-height:100%}
  .sp-toc-sidebar,.sp-sidebar{height:100%}
  .sp-toc-sidebar nav{padding:14px 11px;border-radius:16px}
  .sp-toc-sidebar nav:before{margin-bottom:10px}
  .sp-toc-sidebar h4{margin-bottom:9px}
  .sp-toc-sidebar a{padding:7px 8px;font-size:.72rem}
  .sp-article{max-width:none;padding:clamp(24px,2.6vw,38px);border-radius:22px}
  .sp-sidebar{gap:12px}
  .sp-widget{padding:16px;border-radius:18px}
  .sp-widget h2{font-size:1rem;margin:5px 0 8px}
  .sp-ai-desc{margin-bottom:11px;font-size:.74rem}
  .sp-ai__btns{gap:6px}
  .sp-ai__btn{padding:8px 6px;font-size:.69rem}
  .sp-ai-open-chat{margin-top:10px}
  .sp-shell-resizer{width:20px}
  .sp-shell-resizer--left{left:calc(var(--sp-left-width) + 1px)}
  .sp-shell-resizer--right{right:calc(var(--sp-right-width) + 1px)}
  .sp-shell-resizer:before{content:'';position:absolute;top:0;bottom:0;left:9px;width:2px;background:rgba(14,165,233,.18);border-radius:99px}
  .sp-shell-resizer:after{left:2px;width:16px;height:54px;border:2px solid #0ea5e9;color:#075985;background:#e0f7ff;box-shadow:0 3px 12px rgba(14,165,233,.35);font-size:20px;line-height:49px;opacity:1}
}

/* Natural full-width flow: use the real parent width; never hardcode viewport width. */
@media(min-width:861px){
  body:has(.sp-body) .course-content-section>.container,
  body:has(.sp-body) .cs-detail>.container,
  body:has(.sp-body) .post-single>.section>.container,
  body:has(.sp-body) .single-fallback>.section>.container{width:100%;max-width:none;padding-left:0;padding-right:0}
  body:has(.sp-body) .sp-body{width:100%;max-width:none;margin-left:0;margin-right:0}
}

/* Final sticky correction after all density rules. */
@media(min-width:861px){.sp-body{align-items:start}.sp-body>.sp-toc-sidebar,.sp-body>.sp-article,.sp-body>.sp-sidebar{align-self:start;min-height:0}.sp-toc-sidebar,.sp-sidebar{height:max-content;position:sticky;top:var(--reading-sticky-top,104px)}}

/* Archive contexts keep their own catalogue layout but still expose the same
   AI contract as reading templates. */
.archive-ai-context>.sp-utility-sidebar{width:min(100% - 32px,560px);margin:26px auto 0;display:flex;flex-direction:column;gap:12px;position:relative;top:auto}.archive-ai-context>.sp-utility-sidebar .sp-widget{width:100%}
@media(min-width:861px){.archive-ai-context>.sp-utility-sidebar{position:sticky;top:var(--reading-sticky-top,104px)}}
@media(max-width:560px){.archive-ai-context>.sp-utility-sidebar{width:calc(100% - 24px)}.archive-ai-context>.sp-utility-sidebar .sp-ai__btns{grid-template-columns:1fr 1fr}}