:root{

  --raw-lav:#F4E7FB;    --raw-blush:#F3DCDC;  --raw-coral:#F5BCBA;
  --raw-orchid:#E3AADD; --raw-violet:#C8A8E9; --raw-peri:#C3C7F3;
  --raw-ink:#3E2F56;    --raw-ink2:#7A6795;
  --raw-night:#120C22;  --raw-night2:#1B1233; --raw-night3:#2B1E4C;
  --raw-paper:#F6EFFB;

  --bg:#FAF6FD;
  --bg-tint:
    radial-gradient(120% 70% at 10% -4%, #FFF6FB 0%, rgba(255,246,251,0) 52%),
    radial-gradient(90% 55% at 94% 2%, #EFE4FC 0%, rgba(239,228,252,0) 58%),
    radial-gradient(120% 60% at 50% 104%, #FBEDF1 0%, rgba(251,237,241,0) 60%);
  --surface:rgba(255,255,255,.72);
  --surface-solid:#FFFFFF;
  --surface-sunken:#F2EAF9;

  --text:#3E2F56;
  --text-muted:#6A587F;

  --text-faint:#7B6595;
  --text-invert:#FFFFFF;

  --btn-ink:#3A2A52;

  --accent:#E3AADD;
  --accent-ink:#7A52B8;
  --accent-ink-hover:#653F9E;
  --accent-2:#C8A8E9;
  --accent-3:#F5BCBA;
  --accent-wash:rgba(227,170,221,.14);

  --line:rgba(122,103,149,.18);
  --line-strong:rgba(122,103,149,.34);
  --sel-bg:rgba(200,168,233,.34);

  --ok:#2F7D62;  --ok-wash:rgba(47,125,98,.10);
  --warn:#9A6520; --warn-wash:rgba(154,101,32,.10);
  --bad:#B2415F; --bad-wash:rgba(178,65,95,.10);

  --shadow-sm:0 2px 8px rgba(94,72,133,.07);
  --shadow-md:0 10px 28px rgba(94,72,133,.12);
  --shadow-lg:0 24px 60px rgba(94,72,133,.18);

  --font-label:"Oswald",system-ui,sans-serif;
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Be Vietnam Pro",system-ui,"Segoe UI","Noto Sans",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;

  --fs-2xs:11px;
  --fs-xs:clamp(11.5px,.70rem + .12vw,12.5px);
  --fs-sm:clamp(13px,.79rem + .16vw,14.5px);

  --fs-base:clamp(15.5px,.94rem + .2vw,16.5px);
  --fs-md:clamp(18px,1.06rem + .38vw,20.5px);
  --fs-h4:clamp(17px,1.02rem + .34vw,19.5px);
  --fs-h3:clamp(20px,1.14rem + .62vw,25px);
  --fs-h2:clamp(24px,1.32rem + .95vw,32px);

  --fs-h1:clamp(27px,1.5rem + 1.35vw,40px);
  --fs-display:clamp(36px,1.7rem + 3.3vw,68px);


  --lh-tight:1.20;
  --lh-title:1.26;

  --lh-body:1.65;
  --lh-ui:1.5;

  --ls-label:.22em;
  --ls-tight:-.01em;



  --measure:54ch;
  --measure-wide:82ch;

  --measure-ui:1100px;

  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px;  --s7:32px;  --s8:40px;  --s9:56px;  --s10:72px;
  --s11:96px; --s12:128px;
  --gutter:clamp(18px,5vw,32px);

  --glass-blur:18px;
  --glass-sat:1.45;

  --glass-fill:linear-gradient(163deg,rgba(255,255,255,.42),rgba(255,255,255,.17));

  --glass-edge:rgba(122,103,149,.15);
  --glass-ring:rgba(255,255,255,.75);
  --glass-spec:rgba(255,255,255,.95);
  --glass-spec2:rgba(255,255,255,.10);
  --glass-drop:0 10px 34px rgba(94,72,133,.14);
  --glass-drop-lift:0 18px 48px rgba(94,72,133,.22);

  --glow:0 10px 24px rgba(140,100,200,.16);
  --glow-manh:0 16px 40px rgba(140,100,200,.24);
  --chu-bong:none;
  --glass-tint:linear-gradient(130deg,var(--accent-2),var(--accent) 58%,var(--accent-3));

  --spring:cubic-bezier(.34,1.42,.64,1);
  --ease-glass:cubic-bezier(.22,1,.36,1);

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --dur-fast:.18s; --dur:.28s; --dur-slow:.5s;
  --ease:cubic-bezier(.4,.9,.3,1);
  --header-h:64px;

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#120C22;
    --bg-tint:radial-gradient(125% 85% at 50% 38%, #2B1E4C 0%, #1B1233 54%, #120C22 100%);
    --surface:rgba(255,255,255,.065);
    --surface-solid:#241839;
    --surface-sunken:rgba(255,255,255,.05);

    --text:#F6EFFB;
    --text-muted:rgba(246,239,251,.72);
    --text-faint:rgba(246,239,251,.62);
    --text-invert:#2A1E44;

    --accent:#E3AADD;
    --accent-ink:#EFC2E9;
    --accent-ink-hover:#F8DDF4;
    --accent-2:#C8A8E9;
    --accent-3:#F5BCBA;
    --accent-wash:rgba(227,170,221,.13);

    --line:rgba(227,170,221,.20);
    --line-strong:rgba(227,170,221,.38);
    --sel-bg:rgba(200,168,233,.30);

    --ok:#7FD3B0;  --ok-wash:rgba(127,211,176,.11);
    --warn:#E7BE7E; --warn-wash:rgba(231,190,126,.11);
    --bad:#F5A8B8; --bad-wash:rgba(245,168,184,.11);

    --btn-ink:#3A2A52;
    --shadow-sm:0 2px 10px rgba(8,3,20,.34);
    --shadow-md:0 12px 32px rgba(8,3,20,.46);
    --shadow-lg:0 26px 64px rgba(8,3,20,.58);

    --glass-fill:linear-gradient(163deg,rgba(255,255,255,.072),rgba(255,255,255,.028));
    --glass-edge:rgba(227,170,221,.15);
    --glass-ring:rgba(227,170,221,.26);
    --glass-spec:rgba(255,255,255,.42);
    --glass-spec2:rgba(255,255,255,.05);
    --glass-drop:0 12px 38px rgba(8,3,20,.46);
    --glass-drop-lift:0 20px 54px rgba(8,3,20,.62);

    --glow:0 12px 30px rgba(120,80,180,.50);
    --glow-manh:0 20px 48px rgba(140,95,205,.62);

    --chu-bong:0 4px 30px rgba(0,0,0,.5);
    --glass-sat:1.25;

    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --bg:#120C22;
  --bg-tint:radial-gradient(125% 85% at 50% 38%, #2B1E4C 0%, #1B1233 54%, #120C22 100%);
  --surface:rgba(255,255,255,.065);
  --surface-solid:#241839;
  --surface-sunken:rgba(255,255,255,.05);

  --text:#F6EFFB;
  --text-muted:rgba(246,239,251,.72);
  --text-invert:#2A1E44;

  --text-faint:rgba(246,239,251,.62);

  --accent:#E3AADD;
  --accent-ink:#EFC2E9;
  --accent-ink-hover:#F8DDF4;
  --accent-2:#C8A8E9;
  --accent-3:#F5BCBA;
  --accent-wash:rgba(227,170,221,.13);

  --line:rgba(227,170,221,.20);
  --line-strong:rgba(227,170,221,.38);
  --sel-bg:rgba(200,168,233,.30);

  --ok:#7FD3B0;  --ok-wash:rgba(127,211,176,.11);
  --warn:#E7BE7E; --warn-wash:rgba(231,190,126,.11);
  --bad:#F5A8B8; --bad-wash:rgba(245,168,184,.11);

  --btn-ink:#3A2A52;
  --shadow-sm:0 2px 10px rgba(8,3,20,.34);
  --shadow-md:0 12px 32px rgba(8,3,20,.46);
  --shadow-lg:0 26px 64px rgba(8,3,20,.58);

  --glass-fill:linear-gradient(163deg,rgba(255,255,255,.072),rgba(255,255,255,.028));
  --glass-edge:rgba(227,170,221,.15);
  --glass-ring:rgba(227,170,221,.26);
  --glass-spec:rgba(255,255,255,.42);
  --glass-spec2:rgba(255,255,255,.05);
  --glass-drop:0 12px 38px rgba(8,3,20,.46);
  --glass-drop-lift:0 20px 54px rgba(8,3,20,.62);
  --glow:0 12px 30px rgba(120,80,180,.50);
  --glow-manh:0 20px 48px rgba(140,95,205,.62);
  --chu-bong:0 4px 30px rgba(0,0,0,.5);
  --glass-sat:1.25;

  color-scheme:dark;
}

:root[data-theme="calm"]{

  --raw-suoi:#9FD3EA;   --raw-reu:#A8DED6;   --raw-troi:#BAD9F4;
  --raw-suong:#E5F0F8;  --raw-da:#1F3A45;    --raw-tham:#10637F;

  --bg:#F1F7FB;

  --bg-tint:
    radial-gradient(120% 70% at 10% -4%, #ECF6FC 0%, rgba(236,246,252,0) 52%),
    radial-gradient(90% 55% at 94% 2%, #D8EAFA 0%, rgba(216,234,250,0) 58%),
    radial-gradient(120% 60% at 50% 104%, #DCEFEC 0%, rgba(220,239,236,0) 60%);
  --surface:rgba(255,255,255,.70);
  --surface-solid:#FFFFFF;
  --surface-sunken:#E5F0F8;

  --text:#1F3A45;
  --text-muted:#44626E;
  --text-faint:#4E6D79;
  --text-invert:#FFFFFF;

  --btn-ink:#1F3A45;

  --accent:#9FD3EA;
  --accent-ink:#10637F;
  --accent-ink-hover:#0B566E;
  --accent-2:#A8DED6;
  --accent-3:#BAD9F4;
  --accent-wash:rgba(159,211,234,.16);

  --line:rgba(31,58,69,.16);
  --line-strong:rgba(31,58,69,.30);
  --sel-bg:rgba(159,211,234,.38);

  --ok:#1F6B57;  --ok-wash:rgba(31,107,87,.10);
  --warn:#8A5E18; --warn-wash:rgba(138,94,24,.10);
  --bad:#A83B54; --bad-wash:rgba(168,59,84,.10);

  --shadow-sm:0 2px 8px rgba(28,68,90,.07);
  --shadow-md:0 10px 28px rgba(28,68,90,.12);
  --shadow-lg:0 24px 60px rgba(28,68,90,.18);

  --glass-fill:linear-gradient(163deg,rgba(255,255,255,.42),rgba(255,255,255,.17));
  --glass-edge:rgba(28,68,90,.14);
  --glass-ring:rgba(255,255,255,.75);
  --glass-spec:rgba(255,255,255,.95);
  --glass-spec2:rgba(255,255,255,.10);
  --glass-drop:0 10px 34px rgba(28,68,90,.13);
  --glass-drop-lift:0 18px 48px rgba(28,68,90,.20);

  --glow:0 10px 24px rgba(52,140,180,.17);
  --glow-manh:0 16px 40px rgba(52,140,180,.25);

  --chu-bong:none;

  --glass-sat:1.35;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}

[hidden]{display:none !important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--s5));
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

:root{
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background-color:var(--line-strong);
  border-radius:99px;

  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background-color:var(--accent-ink)}
::-webkit-scrollbar-corner{background:transparent}

body{
  position:relative;
  min-height:100dvh;
  background-color:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-variant-ligatures:common-ligatures;
  overflow-x:hidden;
}

body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background-image:var(--bg-tint);
  pointer-events:none;
}

::selection{background:var(--sel-bg);color:var(--text)}

img,svg,video,canvas,iframe{display:block;max-width:100%}
img,video{height:auto}

input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}

a{color:var(--accent-ink);text-decoration:none}
a:hover{color:var(--accent-ink-hover)}

:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
:focus:not(:focus-visible){outline:none}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-title);
  letter-spacing:var(--ls-tight);
  text-wrap:balance;
}

h1,h2{text-shadow:var(--chu-bong)}

p,li,dd{text-wrap:pretty}

ul,ol{padding-left:1.15em}

hr{border:none;height:1px;background:var(--line)}

code,kbd,samp,pre{font-family:var(--font-mono);font-size:.88em}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.sr-only.focusable:focus-visible{
  position:fixed;top:var(--s3);left:var(--s3);z-index:200;
  width:auto;height:auto;clip:auto;clip-path:none;
  padding:var(--s3) var(--s5);background:var(--surface-solid);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  box-shadow:var(--shadow-md);
}

.glass,
.site-head,
.card,
.btn,
.ovp,
.bo,
.bo-quote,
.prose pre .copy-btn{
  position:relative;
  isolation:isolate;
  background:var(--glass-fill);
  box-shadow:
    inset 0 0 0 1px var(--glass-edge),
    var(--glass-drop);
}

@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .glass,.site-head,.card,.btn,.ovp,.bo,.bo-quote,.prose pre .copy-btn{
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}

.glass::before,
.site-head::before,
.card::before,
.btn::before,
.ovp::before,
.bo::before,
.bo-quote::before,
.prose pre .copy-btn::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg,
    var(--glass-spec) 0%,
    var(--glass-spec2) 34%,
    transparent 58%,
    var(--glass-spec2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.glass--tint,.btn:not(.btn--ghost){
  background:var(--glass-tint);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30), var(--glass-drop);
}
.glass--tint::before,.btn:not(.btn--ghost)::before{
  background:linear-gradient(150deg,rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.22) 40%,transparent 72%);
}

.glass--thin,.btn--ghost,.prose pre .copy-btn{
  --glass-blur:9px;
  box-shadow:inset 0 0 0 1px var(--glass-edge);
}

.glass--flat,.site-head{
  --glass-blur:22px;
  border-radius:0;
  box-shadow:0 1px 0 0 var(--line), 0 6px 20px -12px rgba(94,72,133,.5);
}
.glass--flat::before,.site-head::before{ padding:0 0 1px }

.lift,.card,.bo{
  transition:transform var(--dur) var(--ease-glass),
             box-shadow var(--dur) var(--ease-glass);
  will-change:transform;
}
@media (hover:hover){

  .lift:hover,.card:hover,.bo:not(.bo--chu):hover{
    transform:translateY(-3px);
    box-shadow:inset 0 0 0 1px var(--glass-edge), var(--glass-drop-lift);
  }
}
.press,.btn{
  transition:transform .34s var(--spring),
             box-shadow var(--dur) var(--ease-glass),
             filter var(--dur-fast) linear;
}
.press:active,.btn:active{ transform:scale(.965); transition-duration:.09s }
@media (hover:hover){ .press:hover,.btn:hover{ filter:brightness(1.06) saturate(1.06) } }

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sheen,.btn{ overflow:hidden }
  .sheen::after,.btn::after{
    content:"";position:absolute;inset:0;z-index:1;
    border-radius:inherit;pointer-events:none;
    background:linear-gradient(105deg,transparent 38%,
      rgba(255,255,255,.34) 50%,transparent 62%);
    translate:-130% 0;
    transition:translate .62s var(--ease-glass);
  }
  .sheen:hover::after,.btn:hover::after{ translate:130% 0 }
}

@media (prefers-reduced-motion:reduce){
  .lift:hover,.card:hover,.bo:not(.bo--chu):hover{ transform:none }
  .press:active,.btn:active{ transform:none }
  .sheen::after,.btn::after{ display:none }
}

.shell{display:flex;flex-direction:column;min-height:100dvh}
.shell > main{flex:1 0 auto}

.container{
  width:100%;max-width:var(--measure-ui);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.site-head{
  position:sticky;top:0;z-index:60;
  height:var(--header-h);
  display:flex;align-items:center;
}
.site-head .container{display:flex;align-items:center;gap:var(--s4)}

.brand{
  display:flex;align-items:center;gap:10px;
  color:var(--text);flex:0 1 auto;min-width:0;
}
.brand .logo{
  flex:none;width:30px;height:30px;overflow:visible;
  color:var(--accent-ink);
  transition:color var(--dur-fast);
}
.brand:hover .logo,.brand:focus-visible .logo{color:var(--accent-ink-hover)}

.lg-vc,.lg-ten path,.lg-noi{
  stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;
}
.lg-vc{stroke-dasharray:130;stroke-dashoffset:130}

.logo:not(.logo--dong) .lg-vc--1{animation:lg-ve .85s cubic-bezier(.65,0,.35,1) .1s forwards}
.logo:not(.logo--dong) .lg-vc--2{animation:lg-ve .85s cubic-bezier(.65,0,.35,1) .8s forwards}
.logo:not(.logo--dong) .lg-man{animation:lg-hien .7s ease-out 1.5s forwards}
.logo:not(.logo--dong) .lg-canh{stroke-opacity:.8;stroke-width:2}
@keyframes lg-ve{to{stroke-dashoffset:0}}
@keyframes lg-hien{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

.logo--dong{--lg-ck:27s}

:is(.logo--dong,.logo:not(.logo--dong)) :is(.lg-hoa,.lg-vc,.lg-ten,.lg-noi,
    .lg-man,.lg-bui,.lg-canh-g,.lg-vanh-g){
  transform-box:view-box;transform-origin:50% 50%;
}

.logo--dong .lg-bui circle{transform-box:fill-box;transform-origin:50% 50%}
.logo--dong .lg-hoa  {animation:lg-hoa   var(--lg-ck) linear      infinite}
.logo--dong .lg-vc--1{animation:lg-n1    var(--lg-ck) ease-in-out infinite}
.logo--dong .lg-vc--2{animation:lg-n2    var(--lg-ck) ease-in-out infinite}
.logo--dong .lg-ten  {animation:lg-ten   var(--lg-ck) ease-in-out infinite}
.logo--dong .lg-noi  {animation:lg-noi   var(--lg-ck) ease-in-out infinite}
.logo--dong .lg-man  {animation:lg-man   var(--lg-ck) ease-in-out infinite}
.logo--dong .lg-bui  {animation:lg-bui   var(--lg-ck) linear      infinite}

.logo--dong .lg-canh-g       {animation:lg-canh-g var(--lg-ck) linear infinite}
.logo--dong .lg-vanh-g--ngoai{animation:lg-vanh-n var(--lg-ck) linear infinite}
.logo--dong .lg-vanh-g--giua {animation:lg-vanh-g var(--lg-ck) linear infinite}
.logo--dong .lg-vanh-g--trong{animation:lg-vanh-t var(--lg-ck) linear infinite}

.logo--dong .lg-goc {animation:lg-nhay-goc  var(--lg-ck) ease-in-out infinite}
.logo--dong .lg-canh{animation:lg-nhay-canh var(--lg-ck) ease-in-out infinite}
.lg-ten,.lg-noi{opacity:0}

.lg-canh{stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.lg-vanh{stroke-width:.9;stroke-opacity:.42;stroke-linecap:round}
.lg-vanh--ngoai{stroke-dasharray:3 6}
.lg-vanh--giua {stroke-dasharray:2 5;stroke-width:.7;stroke-opacity:.28}
.lg-vanh--trong{stroke-dasharray:1.4 3.2}
.lg-man{opacity:0}
.lg-bui circle{opacity:0}

@keyframes lg-hoa{
  0%,5%      {opacity:1;transform:none}
  5.5%,57%   {opacity:1;transform:none}
  63%        {opacity:1;transform:rotate(30deg)   scale(1.02)}
  71%        {opacity:1;transform:rotate(126deg)  scale(1.05)}
  79%        {opacity:1;transform:rotate(334deg)  scale(1.09)}
  85%        {opacity:1;transform:rotate(610deg)  scale(1.14)}
  90.5%      {opacity:1;transform:rotate(1050deg) scale(1.20)}

  91.5%      {opacity:.36;transform:rotate(1128deg) scale(1.27)}
  93.5%      {opacity:0;transform:rotate(1280deg) scale(1.34)}
  94%        {opacity:0;transform:none}
  97%,100%   {opacity:1;transform:none}
}

@keyframes lg-nhay-goc{
  0%,61%     {opacity:1}
  67%        {opacity:.55}
  73%        {opacity:1}
  79%        {opacity:.55}
  85%        {opacity:1}
  88%,100%   {opacity:.85}
}
@keyframes lg-nhay-canh{

  0%,5%      {stroke-opacity:.8;stroke-width:2}
  5.5%,61%   {stroke-opacity:.5;stroke-width:1.5}
  67%        {stroke-opacity:1;stroke-width:2.6}
  73%        {stroke-opacity:.5;stroke-width:1.5}
  79%        {stroke-opacity:1;stroke-width:2.6}
  85%        {stroke-opacity:.5;stroke-width:1.5}
  88%,97%    {stroke-opacity:.8;stroke-width:2.1}
  100%       {stroke-opacity:.8;stroke-width:2}
}

@keyframes lg-canh-g{
  0%,58%     {transform:rotate(0deg)}
  67%        {transform:rotate(9deg)}
  75%        {transform:rotate(-11deg)}
  83%        {transform:rotate(15deg)}
  90.5%,100% {transform:rotate(0deg)}
}

@keyframes lg-vanh-n{
  0%,58%     {transform:rotate(0deg)}
  73%        {transform:rotate(20deg)}
  84%        {transform:rotate(96deg)}
  93.5%,100% {transform:rotate(260deg)}
}
@keyframes lg-vanh-g{
  0%,58%     {transform:rotate(0deg)}
  73%        {transform:rotate(-15deg)}
  84%        {transform:rotate(-74deg)}
  93.5%,100% {transform:rotate(-210deg)}
}
@keyframes lg-vanh-t{
  0%,58%     {transform:rotate(0deg)}
  73%        {transform:rotate(32deg)}
  84%        {transform:rotate(160deg)}
  93.5%,100% {transform:rotate(430deg)}
}

@keyframes lg-n1{
  0%,5%      {opacity:1;transform:none;stroke-dashoffset:0;stroke-opacity:1}
  5.5%,15%   {opacity:0;transform:rotate(-90deg);stroke-dashoffset:130;stroke-opacity:1}
  16%        {opacity:1;transform:rotate(-90deg);stroke-dashoffset:130;stroke-opacity:1}
  24%,32%    {opacity:1;transform:rotate(-90deg);stroke-dashoffset:52;stroke-opacity:1}
  38%,44%    {opacity:1;transform:none;stroke-dashoffset:0;stroke-opacity:1}

  47%,56%    {opacity:1;transform:none;stroke-dashoffset:0;stroke-opacity:.3}
  60%,100%   {opacity:1;transform:none;stroke-dashoffset:0;stroke-opacity:1}
}

@keyframes lg-n2{
  0%,5%      {opacity:1;transform:none;stroke-dashoffset:0}
  5.5%,43%   {opacity:0;transform:none;stroke-dashoffset:130}
  44%        {opacity:1;transform:none;stroke-dashoffset:130}
  49%,50%    {opacity:1;transform:none;stroke-dashoffset:52}
  58%,100%   {opacity:1;transform:rotate(180deg);stroke-dashoffset:0}
}

@keyframes lg-ten{
  0%,5%      {opacity:0;transform:scaleX(1)}
  8%,12%     {opacity:.95;transform:scaleX(1)}
  16%        {opacity:0;transform:scaleX(.04)}
  16.5%,100% {opacity:0;transform:scaleX(1)}
}

@keyframes lg-noi{
  0%,25%     {opacity:0;transform:rotate(-90deg) translate(16px,-16px) scale(.5)}
  29%,32%    {opacity:.92;transform:rotate(-90deg) translate(0,0) scale(1)}
  38%        {opacity:.92;transform:rotate(0deg) translate(0,0) scale(1)}
  39%        {opacity:0;transform:rotate(0deg) translate(0,0) scale(1)}
  39.5%,100% {opacity:0;transform:rotate(-90deg) translate(16px,-16px) scale(.5)}
}

@keyframes lg-man{
  0%,5%      {opacity:1;transform:scale(1)}
  5.5%,57%   {opacity:0;transform:scale(.6)}
  63%,90.5%  {opacity:1;transform:scale(1)}
  92%        {opacity:.35;transform:scale(1.06)}
  93.5%      {opacity:0;transform:scale(1.1)}
  94%        {opacity:0;transform:scale(.6)}
  97%,100%   {opacity:1;transform:scale(1)}
}

@keyframes lg-bui{
  0%,89.4%   {opacity:0}
  89.5%,97.5%{opacity:1}
  97.6%,100% {opacity:0}
}

.logo--dong .lg-bui circle{
  animation:lg-hat var(--lg-ck) cubic-bezier(.12,.62,.28,1) infinite;
  animation-delay:calc(var(--bt) * var(--lg-ck) * 0.010);
}

@keyframes lg-hat{
  0%,89.5%   {opacity:0;transform:translate(0,0) scale(1)}
  90.5%      {opacity:.95;transform:translate(0,0) scale(1)}
  93.5%      {opacity:.72}
  96.5%      {opacity:0;transform:translate(var(--bx),var(--by)) scale(.35)}
  96.6%,100% {opacity:0;transform:translate(0,0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .lg-vc{stroke-dashoffset:0;animation:none!important}
  .logo--dong .lg-hoa{opacity:1;transform:none;animation:none}
  .logo--dong .lg-man{opacity:1;transform:none;animation:none}

  .logo--dong :is(.lg-goc,.lg-canh,.lg-canh-g,.lg-vanh-g){
    animation:none;transform:none;opacity:1;
  }
  .logo--dong .lg-canh{stroke-opacity:.6;stroke-width:1.5}
  .lg-ke,.lg-bui{display:none}
}

.brand b{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:19px;line-height:1.15;letter-spacing:var(--ls-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.brand--logo b{display:none}
.brand--chu .logo{display:none}

.brand--logo .logo{width:36px;height:36px}
.nav{display:flex;align-items:center;gap:var(--s1);margin-left:auto;flex:none}
.nav a{
  padding:var(--s2) var(--s3);border-radius:var(--r-pill);
  font-family:var(--font-label);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  transition:color var(--dur-fast),background var(--dur-fast);
}
.nav a:hover{color:var(--text);background:var(--accent-wash)}
.nav a[aria-current="page"]{color:var(--accent-ink);background:var(--accent-wash)}

@media (max-width:640px){

  .nav .nav-text{display:none}

  .brand span{display:none}
  .brand b{font-size:17px}
}

.site-foot{
  margin-top:var(--s11);
  border-top:1px solid var(--line);
  padding-block:var(--s8) var(--s7);
}
.site-foot .container{
  display:flex;flex-wrap:wrap;gap:var(--s5);
  align-items:flex-end;justify-content:space-between;
}

@media (max-width:640px){
  .site-foot .container{
    flex-direction:column;align-items:flex-start;gap:var(--s5);
  }
  .site-foot .stamp{align-items:flex-start;text-align:left}
  .stamp-ky{padding-right:0;padding-left:3px}
}

.stamp{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-family:var(--font-label);font-size:10.5px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);line-height:1.7;text-align:right;
}
.stamp-ky{padding-right:3px}
.stamp-ban{
  color:var(--text-muted);font-weight:500;
  cursor:default;-webkit-tap-highlight-color:transparent;

  border-radius:var(--r-sm);padding:1px 3px;
  transition:color var(--dur-fast),background var(--dur-fast);
}

.stamp-ban:hover,.stamp-ban:focus-visible{
  color:var(--accent-ink);background:var(--accent-wash);outline:none;
}

.stamp-ban.go{animation:so-nhip .2s var(--ease-glass)}
@keyframes so-nhip{
  50%{color:var(--accent-ink);background:var(--accent-wash);transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){.stamp-ban.go{animation:none}}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-size:var(--fs-sm);color:var(--text-muted)}

.post-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  width:100%;max-width:var(--measure-ui);
  margin-inline:auto;

  padding-block:var(--s8) var(--s10);
}

.post-head,
.post-foot{
  width:min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline:auto;
}
.post-foot{margin-top:var(--s10)}

@media (min-width:1080px){
  .post-layout.khung-a{
    grid-template-columns:minmax(0,1fr) 260px;
    column-gap:var(--s8);
    padding-inline:var(--gutter);
  }

  .khung-a .post-head{grid-column:1;grid-row:1}
  .khung-a .prose    {grid-column:1;grid-row:2}
  .khung-a .post-foot{grid-column:1;grid-row:3}
  .khung-a .ben      {grid-column:2;grid-row:2}
}

.toc{font-size:var(--fs-sm);line-height:1.55}
.toc-title{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-faint);margin-bottom:var(--s3);
}
.toc ol{list-style:none;padding:0;margin:0;border-left:1px solid var(--line)}
.toc li{margin:0}
.toc li.lvl-3 a{padding-left:var(--s5)}
.toc a{
  display:block;padding:5px var(--s3);
  color:var(--text-muted);border-left:2px solid transparent;margin-left:-1px;
  transition:color var(--dur-fast),border-color var(--dur-fast);
}
.toc a:hover{color:var(--text)}
.toc a.active{color:var(--accent-ink);border-left-color:var(--accent)}

@media (min-width:1080px){

  .ben{position:sticky;top:calc(var(--header-h) + var(--s6));align-self:start;
    display:flex;flex-direction:column;gap:var(--s6)}
  .toc-box{
    max-height:calc(100dvh - var(--header-h) - var(--s9));overflow-y:auto}
  .toc-box summary{display:none}
  .toc-box[open],.toc-box{border:none;background:none;padding:0}
}

@media (max-width:1079px){
  .ben{display:contents}
  .prose    {order:1}
  .quote-tab{order:2;margin:var(--s9) var(--gutter) 0}
  .post-foot{order:3}
  .toc-box{
    margin:0 var(--gutter) var(--s7);
    border-radius:var(--r-md);
    padding:var(--s3) var(--s4);
  }
  .toc-box summary{
    cursor:pointer;list-style:none;
    font-family:var(--font-label);font-size:var(--fs-xs);font-weight:600;
    letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);
  }
  .toc-box summary::-webkit-details-marker{display:none}
  .toc-box summary::after{content:" ▾";color:var(--accent-ink)}
  .toc-box[open] summary::after{content:" ▴"}
  .toc-box .toc{margin-top:var(--s3)}
  .toc-box .toc-title{display:none}
}

.read-bar{
  position:fixed;top:var(--header-h);left:0;z-index:59;
  height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3));
  pointer-events:none;
}

.nav-cho{
  color:var(--text-faint);
  opacity:.5;
  cursor:default;
  padding:var(--s2) var(--s3);
  font-family:var(--font-label);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}
.site-foot .nav-cho{font-family:var(--font-body);font-size:var(--fs-sm);
  letter-spacing:0;text-transform:none;padding:0}

@media (min-width:1080px){

  .post-layout.khung-a{grid-template-columns:minmax(0,1fr) 260px;column-gap:var(--s8)}
}

.post-layout.khung-b{

  --measure:56ch;
  grid-template-columns:minmax(0,1fr);
  max-width:none;
  padding-inline:0;
}

.khung-b .prose > .post-cover{
  order:-1;
  grid-column:full;
  margin:calc(var(--s8) * -1) 0 var(--s9);
}
.khung-b .prose > .post-cover img{border-radius:0;max-height:62vh;object-fit:cover}
.khung-b .post-head{text-align:center}
.khung-b .post-head h1{margin-inline:auto}
.khung-b .post-head .crumbs,
.khung-b .post-head .meta-row,
.khung-b .post-head .tag-row{justify-content:center}
.khung-b .post-head .summary{margin-inline:auto}
.khung-b .toc-box{max-width:var(--measure);margin-inline:auto}
@media (min-width:1080px){
  .khung-b .toc-box{position:static;max-height:none;
    margin:0 auto var(--s7);border-radius:var(--r-md);padding:var(--s3) var(--s4)}
  .khung-b .toc-box summary{display:block}
  .khung-b .toc-box .toc-title{display:none}
  .khung-b .toc ol{border-left:1px solid var(--line)}
}

.post-layout.khung-c{
  max-width:var(--measure-ui);
  padding-inline:var(--gutter);
}
.khung-c .bang-anh{order:-1;margin-bottom:var(--s7)}

@media (min-width:900px){
  .post-layout.khung-c{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    column-gap:var(--s9);
    align-items:start;
  }

  .khung-c .bang-anh {grid-column:1;grid-row:1 / span 3;position:sticky;top:calc(var(--header-h) + var(--s6));margin-bottom:0}
  .khung-c .post-head{grid-column:2;grid-row:1}
  .khung-c .prose    {grid-column:2;grid-row:2}
  .khung-c .post-foot{grid-column:2;grid-row:3}

  .khung-c :is(.post-head,.post-foot){width:100%}
  .khung-c .prose{grid-template-columns:[full-start][wide-start][text-start] minmax(0,1fr) [text-end][wide-end][full-end]}
}

.khung-c .toc{display:none}

.eyebrow{display:flex;align-items:center;gap:var(--s3);margin-block:var(--s2) var(--s3)}
.eyebrow::before,.eyebrow::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent))}
.eyebrow::after{background:linear-gradient(90deg,var(--accent),transparent)}
.eyebrow i{width:5px;height:5px;background:var(--accent);
  transform:rotate(45deg);border-radius:1px;flex:none}

.label{
  font-family:var(--font-label);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--accent-ink);line-height:1.6;
}
.label--muted{color:var(--text-faint);font-weight:500}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:12px var(--s6);border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-label);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--btn-ink);

  box-shadow:inset 0 0 0 1px var(--glass-spec), var(--glass-drop), var(--glow);
  transition:box-shadow var(--dur) var(--ease-glass),
             transform .34s var(--spring);
}
.btn:hover{
  color:var(--btn-ink);
  box-shadow:inset 0 0 0 1px var(--glass-spec), var(--glass-drop-lift), var(--glow-manh);
}

.btn--ghost{color:var(--text-muted)}
.btn--ghost:hover{color:var(--text)}

.ico-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border-radius:var(--r-pill);
  color:var(--text-muted);
  transition:color var(--dur-fast),background var(--dur-fast),
             box-shadow var(--dur) var(--ease-glass),transform .34s var(--spring);
}

@media (hover:hover){
  .ico-btn:hover{
    color:var(--text);
    background:var(--glass-fill);
    box-shadow:inset 0 0 0 1px var(--glass-ring);
  }
}
.ico-btn:active{transform:scale(.9);transition-duration:.09s}
.ico-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.ico-btn svg.fill{fill:currentColor;stroke:none}

.tip{position:relative}
.tip::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;
  z-index:80;padding:6px 11px;border-radius:var(--r-sm);
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(14px) saturate(var(--glass-sat));
  backdrop-filter:blur(14px) saturate(var(--glass-sat));
  box-shadow:inset 0 0 0 1px var(--glass-ring),var(--glass-drop);
  color:var(--text-muted);
  font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:400;
  letter-spacing:0;text-transform:none;white-space:nowrap;line-height:1.4;
  opacity:0;translate:-50% -4px;pointer-events:none;
  transition:opacity var(--dur-fast),translate var(--dur) var(--ease-glass);
}
.tip:hover::after,.tip:focus-visible::after{opacity:1;translate:-50% 0}

@media (hover:none){
  .tip::after{content:none}
}

@media (hover:hover) and (max-width:1079px){
  .nav > :last-child.tip::after,
  .q-nut.tip::after{left:auto;right:0;translate:0 -4px}
  .nav > :last-child.tip:hover::after,
  .nav > :last-child.tip:focus-visible::after,
  .q-nut.tip:hover::after,
  .q-nut.tip:focus-visible::after{translate:0 0}
}

@media (hover:hover){
  .quote-tab .q-nut.tip::after,
  .hero-quote .q-nut.tip::after{left:auto;right:0;translate:0 -4px}
  .quote-tab .q-nut.tip:hover::after,
  .quote-tab .q-nut.tip:focus-visible::after,
  .hero-quote .q-nut.tip:hover::after,
  .hero-quote .q-nut.tip:focus-visible::after{translate:0 0}
}

.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px 6px;border-radius:var(--r-pill);
  background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--text-muted);font-size:var(--chip-fs,var(--fs-xs));
  line-height:1.45;white-space:nowrap;
  transition:color var(--dur-fast),box-shadow var(--dur-fast),
             background var(--dur-fast),transform .3s var(--spring);
}
a.tag:active{transform:scale(.94);transition-duration:.09s}
.tag::before{content:"#";color:var(--accent-ink);opacity:.8}
a.tag:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--accent),var(--glass-drop)}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--s2)}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);
}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs li{display:flex;align-items:center;gap:var(--s2);list-style:none}
.crumbs li + li::before{content:"/";color:var(--line-strong)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0;margin:0}

.card{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5);border-radius:var(--r-lg);
}
.card h3{font-size:var(--fs-h4);font-style:italic}

.card a.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card .meta{font-size:var(--fs-sm);color:var(--text-faint)}

.meta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);
  font-size:var(--fs-sm);color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.meta-row > * {display:inline-flex;align-items:center;gap:6px}

.meta-row .moc{color:var(--text-faint);font-variant-numeric:tabular-nums}
.meta-row .moc::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.5;margin-right:2px;
}

.meta-row .xem{color:var(--text-muted);font-variant-numeric:tabular-nums}

.meta-row > * + *::before{
  content:"·";
  margin-right:6px;
  color:var(--line-strong);
}
.meta-row .dot{display:none}

.meta-row > .badge + *::before,
.meta-row > .badge::before{content:none;margin:0}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 9px 3px;
  border-radius:var(--r-pill);font-family:var(--font-label);
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.badge--draft{background:var(--warn-wash);color:var(--warn)}

.theme-btn svg{fill:none;stroke:currentColor;display:none}
.theme-btn .i-sun{display:block}

:root[data-theme="dark"] .theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-moon{display:block}

:root[data-theme="calm"] .theme-btn .i-sun{display:none}
:root[data-theme="calm"] .theme-btn .i-giot{display:block}

@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .theme-btn .i-sun{display:none}
  :root:not([data-theme]) .theme-btn .i-moon{display:block}
}

.site-head,.site-foot,.stamp,.eyebrow,.toc{user-select:none}

.copy-nhac{
  position:fixed;left:50%;bottom:24px;translate:-50% 12px;z-index:200;
  max-width:min(420px, calc(100vw - 32px));
  padding:11px var(--s5);border-radius:var(--r-pill);
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(16px) saturate(var(--glass-sat));
  backdrop-filter:blur(16px) saturate(var(--glass-sat));
  box-shadow:inset 0 0 0 1px var(--glass-edge), var(--glass-drop-lift);
  color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-glass), translate .3s var(--ease-glass);
}
.copy-nhac.hien{opacity:1;translate:-50% 0}

.so-nen{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s5);
  background:rgba(16,12,26,.62);
  -webkit-backdrop-filter:blur(12px) saturate(.72);
  backdrop-filter:blur(12px) saturate(.72);
  opacity:0;transition:opacity .22s var(--ease-glass);
}
.so-nen.hien{opacity:1}

body.so-khoa{overflow:hidden}

.so-hop{
  width:min(600px,100%);max-height:min(74vh,620px);
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--surface-solid) 96%, var(--accent) 4%),
      var(--surface-solid) 62%);
  box-shadow:
    inset 0 0 0 1px var(--glass-spec),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 8px rgba(16,12,26,.16),
    0 26px 70px -12px rgba(16,12,26,.42);
  translate:0 12px;
  transition:translate .26s var(--spring);
}
.so-nen.hien .so-hop{translate:0 0}

.so-dau{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--accent-wash), transparent);
}
.so-dau .label{margin:0;flex:1}
.so-x,.so-lui{flex:none;width:30px;height:30px}
.so-x svg,.so-lui svg{width:15px;height:15px}

.so-cuon{overflow-y:auto;overscroll-behavior:contain;padding:var(--s3) var(--s5)}

.so-bang{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.so-bang tr{border-bottom:1px solid var(--line)}
.so-bang tr:last-child{border-bottom:none}
.so-bang td{padding:var(--s3) var(--s2);vertical-align:baseline}
.so-ver{
  font-family:var(--font-label);font-weight:600;letter-spacing:.04em;
  color:var(--accent-ink);white-space:nowrap;
}
.so-ngay,.so-dem{
  font-size:var(--fs-2xs);color:var(--text-faint);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.so-viec{color:var(--text-muted);line-height:1.5;position:relative;padding-right:var(--s5)}

.so-ver--lon{font-size:var(--fs-md);letter-spacing:.02em}
.so-build td{padding-block:var(--s4)}

.so-co{cursor:pointer;transition:background var(--dur-fast)}
.so-co:hover,.so-co:focus-visible{background:var(--accent-wash);outline:none}
.so-co:hover .so-ver,.so-co:focus-visible .so-ver{color:var(--accent-ink-hover)}
.so-mui{
  position:absolute;right:var(--s2);top:50%;translate:0 -50%;
  width:6px;height:6px;border-right:1.5px solid var(--line-strong);
  border-top:1.5px solid var(--line-strong);rotate:45deg;
  transition:translate var(--dur-fast),border-color var(--dur-fast);
}
.so-co:hover .so-mui{translate:2px -50%;border-color:var(--accent-ink)}

.so-y{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.so-y li{
  font-size:var(--fs-sm);line-height:1.62;color:var(--text-muted);
  padding-left:var(--s5);position:relative;
}
.so-y li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.so-y b{color:var(--text);font-weight:600}
.so-y code{
  font-family:var(--font-mono);font-size:.88em;
  background:var(--surface-sunken);padding:1px 5px;border-radius:var(--r-sm);
}

.so-trong{
  margin:var(--s6) 0;text-align:center;
  font-family:var(--font-label);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-faint);
}
.so-chan{
  margin:0;padding:var(--s3) var(--s5);
  border-top:1px solid var(--line);
  font-family:var(--font-label);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);
}

@media (max-width:560px){
  .so-nen{align-items:flex-end;padding:0}
  .so-hop{
    width:100%;max-height:82vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .so-bang td{padding:var(--s3) var(--s1)}
  .so-ngay{display:none}
}

.bang-anh{position:relative}
.ba-cuon{
  display:flex;gap:var(--s3);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  border-radius:var(--r-lg);

  scrollbar-width:none;
}
.ba-cuon::-webkit-scrollbar{display:none}
.ba-cuon:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ba-tam{
  flex:0 0 100%;min-width:0;margin:0;
  scroll-snap-align:start;
  position:relative;
}

.ba-tam img{
  width:100%;display:block;
  aspect-ratio:var(--ba-ti,4/5);
  max-height:min(64vh,620px);
  object-fit:contain;
  border-radius:var(--r-lg);
  background:var(--accent-wash);
}
.ba-tam figcaption{
  margin-top:var(--s3);
  font-size:var(--fs-sm);line-height:1.5;color:var(--text-faint);
  text-align:left;

  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden;min-height:2.6em;
}

.ba-dieu{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-top:var(--s4);
}
.ba-cham{display:flex;gap:6px}
.ba-cham button{
  width:7px;height:7px;padding:0;border:none;border-radius:50%;
  background:var(--line);cursor:pointer;
  transition:background var(--dur-fast),transform var(--dur-fast);
}
.ba-cham button[aria-current="true"]{background:var(--accent);transform:scale(1.35)}
.ba-cham button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ba-nut{display:flex;gap:6px}
.ba-nut button{
  width:30px;height:30px;padding:0;border:none;border-radius:50%;
  background:none;box-shadow:inset 0 0 0 1px var(--line);
  color:var(--text-muted);cursor:pointer;line-height:1;
  transition:color var(--dur-fast),box-shadow var(--dur-fast);
}
.ba-nut button:hover:not(:disabled),.ba-nut button:focus-visible{
  color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent);outline:none;
}
.ba-nut button:disabled{opacity:.3;cursor:default}

.ds-trang,.trang-chu{padding-block:var(--s9) var(--s11)}

.ds-dau{margin-bottom:var(--s6)}
.chu-dau{margin-bottom:var(--s8)}
.ds-dau h1,.chu-dau h1{
  font-size:var(--fs-h1);font-style:italic;
  line-height:var(--lh-tight);text-wrap:balance;margin:0;
}
.chu-dau h1{font-size:var(--fs-display)}
.ds-dan,.chu-dan{
  margin:var(--s3) 0 0;max-width:var(--measure);
  font-size:var(--fs-sm);color:var(--text-faint);
}
.chu-dan{font-size:var(--fs-md);color:var(--text-muted);line-height:1.6;margin-top:var(--s4)}

.ds-trong{
  margin:var(--s8) 0;font-size:var(--fs-sm);font-style:italic;color:var(--text-faint);
}

.ds-luoi{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  grid-auto-rows:1fr;
}
.the-bai{height:100%}

.the-bai{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5) var(--s5) var(--s4)}
.the-bai h3{
  margin:0;font-size:var(--fs-h4);font-style:italic;
  line-height:1.28;text-wrap:balance;
}
.the-bai h3 a{color:var(--text);text-decoration:none;background:none}
.the-bai:hover h3 a{color:var(--accent-ink)}
.the-tom{
  margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--text-muted);
  text-wrap:pretty;
}

.tag--tinh{cursor:inherit}
.the-bai .tag-row{margin-top:auto;padding-top:var(--s3)}

.the-tom{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;overflow:hidden;
}

.the-bai .tag-row{flex-wrap:nowrap;overflow:hidden}

.the-bai .meta-row .moc{display:none}

.chip-hang{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin-top:var(--s5);
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px 7px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--text-muted);text-decoration:none;
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  transition:color var(--dur-fast),background var(--dur-fast),
             box-shadow var(--dur-fast);
}
.chip:hover,.chip:focus-visible{
  color:var(--accent-ink);background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--accent);outline:none;
}
.chip--nay{
  color:var(--btn-ink);background:var(--glass-tint);

  box-shadow:inset 0 0 0 1px var(--glass-spec), var(--glow);
}
.chip--nay:hover{color:var(--btn-ink);background:var(--glass-tint)}
.chip-so{
  font-variant-numeric:tabular-nums;opacity:.6;font-weight:400;
}

.hero{
  position:relative;


  height:calc(100svh - var(--header-h));
  box-sizing:border-box;
  display:flex;flex-direction:column;
  overflow:hidden;
  margin-inline:calc(50% - 50vw);
}

.hero-danh{
  grid-column:2;grid-row:1;
  position:relative;overflow:hidden;min-width:0;
  container-type:inline-size;
  display:flex;flex-direction:column;justify-content:center;

  padding-bottom:clamp(48px,7vh,76px);
  margin:0;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-style:italic;font-weight:600;
  line-height:.78;letter-spacing:-.03em;
  color:var(--text);opacity:.17;



  --s1:44cqw;  --x1:-.22em;



  --s3:24.99cqw;  --x3:-.15em;  --ls3:.038em;

  --gap1:0em;


  --in-co:.24em;  --in-x:.08em;  --in-y:.12em;  --in-mo:.62;

  --nhip:.62s cubic-bezier(.22,.61,.36,1);
  transition:opacity var(--nhip);
}

:root[data-theme="dark"] .hero-danh{opacity:.22}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .hero-danh{opacity:.22}
}

.hd-hang{
  display:block;white-space:nowrap;
  transition:font-size var(--nhip),margin-left var(--nhip),
             margin-bottom var(--nhip),letter-spacing var(--nhip);
}
.hd-hang--1{font-size:var(--s1);margin-left:var(--x1);margin-bottom:var(--gap1)}
.hd-hang--3{font-size:var(--s3);margin-left:var(--x3);letter-spacing:var(--ls3,-.03em)}

.hd-con{
  display:inline-block;opacity:0;letter-spacing:-.58em;
  transition:opacity var(--nhip),letter-spacing var(--nhip);
}
.hd-in{
  display:inline-block;font-size:var(--in-co);opacity:var(--in-mo);
  letter-spacing:-.01em;
  translate:var(--in-x) var(--in-y);
  transition:font-size var(--nhip),translate var(--nhip),opacity var(--nhip);
}

.hero:hover .hero-danh,
.hero:focus-within .hero-danh{
  opacity:.96;

  --s1:25cqw;   --x1:.1em;    --gap1:.13em;

  --s3:21.92cqw; --x3:.135em;  --ls3:.038em;
  --in-co:.34em; --in-x:.42em; --in-y:0em; --in-mo:.72;
}
.hero:hover .hd-con,
.hero:focus-within .hd-con{opacity:1;letter-spacing:-.03em}

@media (hover:none) and (min-width:1001px){
  .hero-danh{
    opacity:.96;

  --s1:25cqw;   --x1:.1em;    --gap1:.13em;

  --s3:21.92cqw; --x3:.135em;  --ls3:.038em;
    --in-co:.34em; --in-x:.42em; --in-y:0em; --in-mo:.72;
  }
  .hd-con{opacity:1;letter-spacing:-.03em}
}

@media (prefers-reduced-motion:reduce){
  .hero-danh,.hd-hang,.hd-con,.hd-in{transition:none}
}

.hero-anh{
  position:absolute;z-index:0;
  right:clamp(2%,14vw,22%);bottom:0;
  height:min(78%,68vh);width:auto;max-width:44%;
  object-fit:contain;object-position:bottom center;
  pointer-events:none;user-select:none;
}
@media (max-width:1000px){

  .hero-anh{right:-6%;height:38%;max-width:66%;opacity:.42}
}

.nen-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.9;
}

.nen-boc > .nen-canvas{opacity:.42}

.hero-luoi{
  position:relative;z-index:1;flex:1;
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(0,2.1fr) minmax(250px,1.15fr);
  width:100%;max-width:1520px;margin-inline:auto;
  border-top:1px solid var(--line);
}
.hero-cot{
  display:flex;flex-direction:column;
  padding:var(--s6) var(--s6) var(--s7);
  min-width:0;

  min-height:0;
  border-left:1px solid var(--line);
}
.hero-cot:last-child{border-right:1px solid var(--line)}

.hero-cot--trai{grid-column:1;grid-row:1;justify-content:flex-end;gap:var(--s5)}

.hero-cot--giua{grid-column:2;grid-row:1;justify-content:flex-end;gap:var(--s5);align-items:flex-start}
.hero-cot--phai{grid-column:3;grid-row:1;justify-content:flex-start;gap:var(--s5)}

.hero-hoso{
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-muted);text-decoration:none;
  transition:color var(--dur-fast);
}
.hero-hoso:hover,.hero-hoso:focus-visible{color:var(--accent-ink);outline:none}

.hero-quote{
  padding:var(--s5) var(--s5) var(--s6);
  border-radius:var(--r-md);

  background:none;
  box-shadow:inset 0 0 0 1px var(--line);
  gap:var(--s2);
}
.hero-quote .q-chu{font-size:clamp(15px,.86rem + .42vw,19px);line-height:1.38}
.hero-quote .q-ai{font-size:12px}
.hero-quote .q-nut{bottom:var(--s2);right:var(--s2);width:26px;height:26px}
.hero-quote .q-nut svg{width:13px;height:13px}

@media (max-height:560px){.hero-quote{display:none}}

.hero-nhan{
  margin:0;
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-faint);
}
.hero-nhan--tren{margin-bottom:var(--s2)}

@media (max-height:680px){
  .hero-cot{padding-block:var(--s5)}
}

.hero-xuong{
  display:inline-flex;align-items:center;gap:var(--s3);
  margin-top:var(--s4);padding:10px var(--s5) 10px var(--s4);
  border-radius:var(--r-pill);text-decoration:none;background:none;
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted);
  transition:color var(--dur-fast),box-shadow var(--dur-fast);
}
.hero-xuong:hover,.hero-xuong:focus-visible{
  color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent);outline:none;
}
.hero-xuong i{
  width:8px;height:8px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  rotate:45deg;
  animation:xuong-nhip 2.1s var(--ease-glass) infinite;
}
@keyframes xuong-nhip{
  0%,100%{transform:translateY(0);opacity:.55}
  50%    {transform:translateY(4px);opacity:1}
}
@media (prefers-reduced-motion:reduce){.hero-xuong i{animation:none;opacity:.8}}

.hero-ds{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line);
}
.hero-dong{border-bottom:1px solid var(--line)}
.hero-dong a{
  display:grid;grid-template-columns:auto 1fr;
  gap:2px var(--s3);align-items:baseline;
  padding:var(--s4) 0;
  text-decoration:none;background:none;color:inherit;
  transition:padding-left var(--dur) var(--ease-glass),color var(--dur-fast);
}

.hero-dong a:hover,.hero-dong a:focus-visible{
  padding-left:var(--s3);color:var(--accent-ink);outline:none;
}
.hero-so{
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.14em;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.hero-tt{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(17px,.9rem + .5vw,22px);line-height:1.2;
  text-wrap:balance;min-width:0;
}
.hero-ngay{
  grid-column:2;
  font-family:var(--font-label);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);
}
.hero-them{
  align-self:flex-start;margin-top:var(--s2);
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);text-decoration:none;background:none;
  transition:color var(--dur-fast);
}
.hero-them:hover,.hero-them:focus-visible{color:var(--accent-ink);outline:none}

.hero-moc{
  position:absolute;z-index:1;width:9px;height:9px;pointer-events:none;
  opacity:.5;
}
.hero-moc::before,.hero-moc::after{
  content:"";position:absolute;background:var(--line-strong);
}
.hero-moc::before{left:50%;top:0;width:1px;height:100%;translate:-50% 0}
.hero-moc::after{top:50%;left:0;height:1px;width:100%;translate:0 -50%}
.hero-moc--tt{left:var(--s5);top:calc(var(--header-h) + var(--s5))}
.hero-moc--tp{right:var(--s5);top:calc(var(--header-h) + var(--s5))}
.hero-moc--dt{left:var(--s5);bottom:var(--s5)}
.hero-tem{
  position:absolute;right:var(--s5);bottom:var(--s5);z-index:1;
  font-family:var(--font-label);font-size:9px;font-weight:600;
  letter-spacing:.2em;color:var(--text-faint);opacity:.75;
  user-select:none;pointer-events:none;
}

@media (max-width:1000px){

  .hero{height:calc(100svh - var(--header-h));min-height:480px}
  .hero-luoi{
    display:flex;flex-direction:column;justify-content:space-between;
    border-top:none;gap:var(--s4);
  }
  .hero-cot{
    border:none;
    padding:0 var(--gutter);
    min-height:0;
  }

  .hero-cot--phai{display:none}

  .hero-cot--trai{order:1;justify-content:flex-end;gap:var(--s4);flex:none}
  .hero-cot--giua{order:2;align-items:center;justify-content:flex-end;
    padding-bottom:var(--s7);flex:none}

  .hero-danh{
    order:0;overflow:visible;
    container-type:normal;opacity:1;
    display:flex;flex-direction:column;justify-content:center;
    flex:1;min-height:0;
    padding:var(--s6) var(--gutter) 0;
  }
  .hd-hang--1{font-size:clamp(46px,17vw,96px);margin-left:0;margin-bottom:0}

  .hd-hang--3{font-size:clamp(34px,14vw,72px);margin-left:.45em}
  .hd-con{opacity:1;letter-spacing:-.03em}

  .hd-in{display:block;translate:none;font-size:.33em;margin-left:1.15em;opacity:.7}

  .hero-quote{width:100%}
  .hero-moc,.hero-tem{display:none}
}

@media (max-width:640px){
  .the-bai{padding:var(--s4) var(--s5) var(--s3);gap:6px}
  .the-bai h3{font-size:var(--fs-h4)}

  .the-tom{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    line-clamp:2;overflow:hidden;
  }

  .the-bai .tag-row .tag:nth-child(n+3){display:none}
  .ds-luoi{gap:var(--s2)}
}

@media (max-width:760px){
  .chu-the--anh{grid-template-columns:1fr}
  .chu-the--anh .chu-anh{aspect-ratio:16 / 7}
}

.quote-tab{
  padding:var(--s5) var(--s5) var(--s6);
  border-radius:var(--r-md);
  background:none;
  box-shadow:inset 0 0 0 1px var(--line);
  gap:var(--s2);
}
.quote-tab .q-chu{font-size:clamp(15px,.88rem + .3vw,17px);line-height:1.42}
.quote-tab .q-ai{font-size:12px}
.quote-tab .q-nut{bottom:var(--s2);right:var(--s2);width:26px;height:26px}
.quote-tab .q-nut svg{width:13px;height:13px}

@media (max-height:700px) and (min-width:1080px){.quote-tab{display:none}}

.gc-loc{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s7)}
.gc-loc button{font:inherit;cursor:pointer}

.gc-ds{list-style:none;margin:0;padding:0}
.gc-mot{
  display:grid;
  grid-template-columns:8.5rem minmax(0,1fr);
  gap:var(--s5);
  padding:var(--s6) 0;
  border-top:1px solid var(--line);
}
.gc-mot:first-child{border-top:none;padding-top:0}
.gc-dau{display:flex;flex-direction:column;gap:4px}
.gc-dau time{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.08em;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.gc-loai{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--accent-ink);
}

.gc-chu.prose{display:block;font-size:calc(var(--fs-base) * .97)}
.gc-chu.prose > * + *{margin-top:calc(var(--flow) * .9)}
.gc-chu.prose p{text-align:left}

@media (max-width:640px){
  .gc-mot{grid-template-columns:1fr;gap:var(--s3);padding:var(--s5) 0}
  .gc-dau{flex-direction:row;align-items:baseline;gap:var(--s3)}
}

.gc-viet{
  margin-bottom:var(--s8);
  padding:var(--s5) var(--s5) var(--s6);
  border-radius:var(--r-md);
  border:1px dashed var(--line-strong);
  background:var(--surface-sunken);
  display:flex;flex-direction:column;gap:var(--s4);
}
.gc-viet-de{
  margin:0;
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-faint);
}

.gc-hang{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.gc-o{display:flex;flex-direction:column;gap:6px}
.gc-o > span{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-faint);
}
.gc-o :is(input,textarea){
  font:inherit;font-size:var(--fs-sm);color:var(--text);
  padding:var(--s2) var(--s3);
  border:1px solid var(--line-strong);border-radius:var(--r-xs);
  background:var(--surface-solid);

  width:100%;box-sizing:border-box;
}
.gc-o textarea{resize:vertical;line-height:var(--lh-body);font-family:var(--font-body)}
.gc-o :is(input,textarea):focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
.gc-nut{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.gc-noi{margin:0;font-size:var(--fs-2xs);color:var(--text-muted);min-height:1em}
.gc-noi--hong{color:var(--bad)}

.gc-xoa{
  align-self:start;margin-top:2px;
  width:22px;height:22px;padding:0;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--surface-solid);color:var(--text-faint);
  font:inherit;font-size:14px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity var(--dur-fast),color var(--dur-fast);
}
.gc-mot:hover .gc-xoa,.gc-xoa:focus-visible{opacity:1}
.gc-xoa:hover{color:var(--bad);border-color:var(--bad)}
@media (hover:none){.gc-xoa{opacity:.7}}

.muc-khoi + .muc-khoi{margin-top:var(--s9)}
.muc-dau{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:baseline;gap:var(--s3) var(--s4);
  margin-bottom:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line);
}
.muc-dau h2{
  margin:0;font-size:var(--fs-h3);font-style:italic;line-height:1.15;
}
.muc-dau h2 a{color:var(--text);text-decoration:none;background:none;
  transition:color var(--dur-fast)}
.muc-dau h2 a:hover{color:var(--accent-ink)}
.muc-so{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.1em;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}

.muc-mo{
  grid-column:1 / -1;grid-row:2;margin:0;
  font-size:var(--fs-sm);line-height:1.5;color:var(--text-muted);
  max-width:60ch;
}
.muc-dau .ds-them{grid-column:4;grid-row:1;justify-self:end}

@media (max-width:560px){
  .muc-dau{grid-template-columns:auto 1fr auto}
  .muc-dau .ds-them{grid-column:3}
  .muc-khoi + .muc-khoi{margin-top:var(--s7)}
}

.pt{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.pt-so{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pt-nut{
  min-width:32px;height:32px;padding:0 8px;
  border:none;border-radius:var(--r-sm);background:none;
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  color:var(--text-muted);cursor:pointer;

  font-variant-numeric:tabular-nums;
  transition:color var(--dur-fast),box-shadow var(--dur-fast),
             background var(--dur-fast);
}
.pt-nut:hover:not(:disabled),.pt-nut:focus-visible{
  color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent);outline:none;
}
.pt-nut--nay{
  background:var(--accent-wash);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.pt-nut:disabled{opacity:.3;cursor:default}
.pt-lung{padding:0 2px;color:var(--text-faint)}
.pt-chon{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);
}
.pt-chon select{
  height:32px;padding:0 6px;border-radius:var(--r-sm);
  border:none;box-shadow:inset 0 0 0 1px var(--line);
  background:var(--bg);color:var(--text);
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  cursor:pointer;
}
.pt-chon select:focus-visible{box-shadow:inset 0 0 0 1px var(--accent);outline:none}

@media (max-width:520px){
  .pt{flex-direction:column;align-items:flex-start;gap:var(--s3)}
}

.ds-chan{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.ds-loi{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-muted);text-decoration:none;
  transition:color var(--dur-fast);
}
.ds-loi:hover,.ds-loi:focus-visible{color:var(--accent-ink);outline:none}

.trang-chu{scroll-margin-top:var(--header-h)}
.chu-nb{margin-bottom:var(--s9)}
.chu-nb .label{margin:0 0 var(--s4)}
.chu-the{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s7)}

.chu-the--anh{
  display:grid;grid-template-columns:5fr 6fr;gap:0;
  padding:0;overflow:hidden;align-items:stretch;
}
.chu-anh{position:relative;min-height:230px;overflow:hidden}
.chu-anh img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease-glass);
}

.chu-the--anh:hover .chu-anh img{transform:scale(1.04)}
.chu-chu{
  display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s7);min-width:0;
}
.chu-the--anh .chu-tom{max-width:none}
@media (max-width:760px){

  .chu-the--anh{grid-template-columns:1fr}
  .chu-anh{min-height:0;aspect-ratio:16 / 9}
  .chu-chu{padding:var(--s6)}
}
.chu-the h2{
  margin:0;font-size:var(--fs-h2);font-style:italic;
  line-height:var(--lh-tight);text-wrap:balance;
}
.chu-the h2 a{color:var(--text);text-decoration:none;background:none}
.chu-the:hover h2 a{color:var(--accent-ink)}
.chu-tom{
  margin:0;max-width:60ch;font-size:var(--fs-base);line-height:1.66;
  color:var(--text-muted);text-wrap:pretty;
}
.ds-thanh{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s4);
}
.ds-thanh .label{margin:0}
.ds-them{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-faint);text-decoration:none;background:none;
  transition:color var(--dur-fast);
}
.ds-them:hover,.ds-them:focus-visible{color:var(--accent-ink);outline:none}

.may-tag{display:flex;flex-wrap:wrap;gap:var(--s3)}
.tag--may{
  --chip-fs:var(--fs-sm);
  gap:7px;padding:7px 14px 8px;text-decoration:none;
}
.tag--vua{--chip-fs:var(--fs-base)}
.tag--to{--chip-fs:var(--fs-md);font-weight:500}
.tag-so{
  font-family:var(--font-label);font-size:.72em;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--text-faint);
  padding-left:6px;border-left:1px solid var(--line);
}
.tag--may:hover .tag-so,.tag--may:focus-visible .tag-so{
  color:var(--accent-ink);border-color:var(--accent);
}

.kho-nam{margin-bottom:var(--s7)}
.kho-nam:last-child{margin-bottom:0}
.kho-so{
  display:flex;align-items:baseline;gap:var(--s3);
  margin:0 0 var(--s3);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:var(--fs-h3);color:var(--text);
  font-variant-numeric:tabular-nums;
}
.kho-dem{
  font-family:var(--font-label);font-style:normal;font-size:var(--fs-2xs);
  font-weight:500;letter-spacing:var(--ls-label);color:var(--text-faint);
}
.kho-ds{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px}
.kho-dong{
  display:flex;align-items:baseline;gap:var(--s4);
  padding:6px var(--s3) 6px 0;border-radius:var(--r-sm);
  transition:background var(--dur-fast);
}
.kho-dong:hover{background:var(--accent-wash)}
.kho-dong time{
  flex:none;width:5.2em;
  font-family:var(--font-label);font-size:var(--fs-2xs);
  letter-spacing:.06em;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
.kho-dong a{
  flex:1;min-width:0;color:var(--text);text-decoration:none;background:none;
  font-size:calc(var(--fs-base) * .97);line-height:1.45;
}
.kho-dong:hover a{color:var(--accent-ink)}
.kho-muc{
  flex:none;font-family:var(--font-label);font-size:var(--fs-2xs);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);
}
@media (max-width:560px){

  .kho-dong{flex-wrap:wrap;gap:2px var(--s3)}
  .kho-dong time{width:auto}
  .kho-dong a{flex:1 0 100%;order:2}
  .kho-muc{order:1}
}

.tk-form{margin-bottom:var(--s5)}
.tk-hop{
  position:relative;display:flex;align-items:center;
  max-width:var(--measure);
}
.tk-kinh{
  position:absolute;left:var(--s4);width:17px;height:17px;
  fill:none;stroke:var(--text-faint);stroke-width:1.7;
  stroke-linecap:round;pointer-events:none;
}
.tk-o{
  width:100%;padding:13px var(--s9) 13px calc(var(--s4) * 2 + 17px);
  border-radius:var(--r-pill);border:none;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--text);font-family:var(--font-body);font-size:var(--fs-md);
  transition:box-shadow var(--dur-fast);
}
.tk-o::placeholder{color:var(--text-faint)}
.tk-o:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent-ink)}

.tk-o::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.tk-xoa{
  position:absolute;right:var(--s3);
  width:28px;height:28px;border:none;border-radius:50%;
  background:none;cursor:pointer;color:var(--text-faint);
  font-size:13px;line-height:1;
  transition:color var(--dur-fast),background var(--dur-fast);
}
.tk-xoa:hover,.tk-xoa:focus-visible{
  color:var(--accent-ink);background:var(--accent-wash);outline:none;
}
.tk-loc{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
.tk-loc:empty{margin:0}
.tk-dem{
  margin:0 0 var(--s5);
  font-family:var(--font-label);font-size:var(--fs-2xs);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);
}
.tk-dem:empty{margin:0}
.tk-kq{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}

.tk-kq mark{
  background:var(--accent-wash);color:var(--accent-ink);
  padding:0 2px;border-radius:3px;font-weight:600;
}

.prose{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [wide-start]  minmax(0,7rem)
    [text-start]  min(var(--measure), 100% - var(--gutter)*2) [text-end]
                  minmax(0,7rem) [wide-end]
    minmax(var(--gutter),1fr) [full-end];
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  color:var(--text);
}

.prose > *{grid-column:text}
.prose > .wide{grid-column:wide}
.prose > .full{grid-column:full}

.prose{--flow:calc(var(--fs-base) * 1.25)}

.prose > * + *{margin-top:var(--flow)}
.prose > * + h2{margin-top:calc(var(--flow) * 2.2)}
.prose > * + h3{margin-top:calc(var(--flow) * 1.75)}
.prose > * + h4{margin-top:calc(var(--flow) * 1.4)}
.prose > :is(h2,h3,h4) + *{margin-top:calc(var(--flow) * 0.55)}

.prose > * + figure,.prose > figure + *{margin-top:calc(var(--flow) * 1.45)}

.prose > * + hr,.prose > hr + *{margin-top:calc(var(--flow) * 1.5)}
.prose > * + .callout,.prose > .callout + *{margin-top:calc(var(--flow) * 1.5)}

.prose h2{font-size:var(--fs-h2);font-style:italic}
.prose h3{font-size:var(--fs-h3)}
.prose h4{font-size:var(--fs-h4);font-family:var(--font-body);font-weight:600;
  letter-spacing:0;line-height:1.45}

.prose :is(h2,h3,h4){position:relative}
.prose .anchor{
  position:absolute;top:.1em;right:100%;padding-right:.35em;
  color:var(--accent);opacity:0;font-family:var(--font-body);font-weight:400;
  text-decoration:none;transition:opacity var(--dur-fast);
}
.prose :is(h2,h3,h4):hover .anchor,.prose .anchor:focus-visible{opacity:.85}
@media (max-width:860px){.prose .anchor{display:none}}

.prose p{

  hyphens:none;
  overflow-wrap:break-word;
  word-break:normal;

  text-align:justify;
  text-justify:inter-word;
}

@media (max-width:560px){
  .prose p{text-align:left}
}

.prose .lead{
  font-size:calc(var(--fs-base) * .97);
  line-height:1.62;
  color:var(--text-muted);
  font-style:italic;
  font-weight:400;
  text-align:left;
  text-wrap:pretty;
  padding-left:var(--s4);
  border-left:2px solid var(--line);
}
.prose .lead strong{color:var(--text);font-weight:600}

.prose a:not(.tag):not(.anchor):not(.btn){
  color:var(--accent-ink);
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--accent-ink) 42%, transparent);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-color var(--dur-fast),color var(--dur-fast);
}
.prose a:not(.tag):not(.anchor):not(.btn):hover{
  color:var(--accent-ink-hover);text-decoration-color:currentColor;
}

.prose a[rel~="external"]::after{content:"↗";font-size:.8em;margin-left:2px;
  text-decoration:none;display:inline-block}

.prose :is(ul,ol){padding-left:1.35em}
.prose li + li{margin-top:var(--s2)}
.prose li::marker{color:var(--accent-ink)}
.prose ul li::marker{content:"✦  ";font-size:.85em}
.prose :is(ul,ol) :is(ul,ol){margin-top:var(--s2)}
.prose ul ul li::marker{content:"·  "}

.prose ul.task{padding-left:0}
.prose li.tick{list-style:none;display:flex;gap:var(--s3);align-items:flex-start}
.prose li.tick::before{
  content:"";flex:none;width:1.05em;height:1.05em;margin-top:.36em;
  border:1.5px solid var(--line-strong);border-radius:4px;
}
.prose li.tick.done::before{
  border-color:var(--ok);background:var(--ok);

  -webkit-mask:var(--tick) center/72% no-repeat;mask:var(--tick) center/72% no-repeat;
}
:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.6 3.6 7.4-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

.prose blockquote{
  padding-left:var(--s5);border-left:2px solid var(--accent);
  font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-md);line-height:1.56;color:var(--text-muted);
}
.prose blockquote p + p{margin-top:var(--s3)}
.prose blockquote cite{
  display:block;margin-top:var(--s3);font-family:var(--font-body);
  font-style:normal;font-size:var(--fs-sm);color:var(--text-faint);
}
.prose blockquote cite::before{content:"— "}

.prose figure{margin:0}
.prose figure img,
.prose figure video{
  width:100%;height:auto;display:block;
  aspect-ratio:var(--ar,16/10);
  object-fit:cover;
  border-radius:var(--r-md);
  background:var(--surface-sunken);
}
.prose figure.full img,.prose figure.full video{border-radius:0}
@media (max-width:640px){

  .prose > .wide{grid-column:full}
  .prose figure.wide img,.prose figure.wide video{border-radius:0}
}

.prose figcaption{
  margin-top:var(--s3);
  font-size:var(--fs-sm);line-height:1.6;color:var(--text-faint);
  text-align:left;text-wrap:pretty;
}
.prose > :is(.full,.wide) figcaption{
  padding-inline:var(--gutter);
  text-align:center;
  max-width:var(--measure);margin-inline:auto;
}
.prose figcaption b{color:var(--text-muted);font-weight:600}

.prose figure.plain img{object-fit:contain;background:none;aspect-ratio:auto}

.prose .gallery{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
}
.prose .gallery figure{margin:0}
.prose .gallery img{aspect-ratio:var(--ar,1/1)}

.prose .video-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-md);background:var(--surface-sunken);
}
.prose .video-frame iframe,.prose .video-frame video{
  position:absolute;inset:0;width:100%;height:100%;border:none;
  aspect-ratio:auto;border-radius:0;
}
.prose figure.full .video-frame{border-radius:0}
.yt-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;
  cursor:pointer;border:none;background:var(--surface-sunken)}
.yt-facade img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  aspect-ratio:auto;border-radius:0;
}
.yt-facade::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(30,14,45,.30), rgba(30,14,45,.52));
  transition:opacity var(--dur);
}
.yt-facade:hover::after{opacity:.75}
.yt-play{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent-2),var(--accent));
  box-shadow:0 10px 30px rgba(60,30,90,.45);
  transition:transform var(--dur) var(--ease);
}
.yt-facade:hover .yt-play{transform:scale(1.08)}
.yt-play svg{width:22px;height:22px;fill:#fff;stroke:none;margin-left:3px}

.prose .callout{
  position:relative;
  padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 3px);
  border-radius:var(--r-md);
  border-left:3px solid var(--cl-accent,var(--accent));
  background:var(--cl-bg,var(--accent-wash));
  box-shadow:inset 0 0 0 1px var(--line), 0 4px 18px rgba(94,72,133,.07);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);
  backdrop-filter:blur(8px) saturate(1.3);
  font-size:calc(var(--fs-base) * .96);line-height:1.72;
}
.prose .callout > .callout-lab{
  display:block;margin-bottom:var(--s2);
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--cl-accent,var(--accent-ink));
}
.prose .callout > * + *{margin-top:var(--s3)}
.prose .callout--note{--cl-accent:var(--accent-ink);--cl-bg:var(--accent-wash)}
.prose .callout--tip {--cl-accent:var(--ok);--cl-bg:var(--ok-wash)}
.prose .callout--warn{--cl-accent:var(--warn);--cl-bg:var(--warn-wash)}
.prose .callout--stop{--cl-accent:var(--bad);--cl-bg:var(--bad-wash)}

.prose :not(pre) > code{
  padding:.14em .42em;border-radius:var(--r-xs);
  background:var(--surface-sunken);border:1px solid var(--line);
  color:var(--accent-ink);font-size:.86em;
  overflow-wrap:break-word;
}
.prose pre{
  position:relative;
  padding:var(--s5) var(--s5) var(--s5);
  border-radius:var(--r-md);
  background:var(--surface-sunken);
  box-shadow:inset 0 0 0 1px var(--line);
  overflow-x:auto;
  font-size:var(--fs-sm);line-height:1.68;
  -webkit-overflow-scrolling:touch;
  tab-size:2;
}
.prose pre code{background:none;border:none;padding:0;color:var(--text)}
.prose pre[data-lang]::before{
  content:attr(data-lang);
  position:absolute;top:0;right:0;
  padding:3px 10px 4px;border-radius:0 var(--r-md) 0 var(--r-xs);
  background:var(--line);color:var(--text-faint);
  font-family:var(--font-label);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
}

.prose .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-md)}
.prose table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);
  line-height:1.6}
.prose :is(th,td){padding:10px var(--s4);text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.prose th{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);
  background:var(--accent-wash);white-space:nowrap;
}
.prose tbody tr:last-child :is(th,td){border-bottom:none}

.prose hr{
  height:auto;background:none;border:none;text-align:center;
  color:var(--accent);opacity:.75;
}
.prose hr::before{content:"✦ ✦ ✦";letter-spacing:.6em;font-size:9px}
.prose kbd{
  padding:2px 7px;border-radius:5px;border:1px solid var(--line-strong);
  border-bottom-width:2px;background:var(--surface-solid);
  font-size:.82em;color:var(--text-muted);
}
.prose mark{background:var(--accent-wash);color:var(--text);
  padding:.05em .25em;border-radius:3px}
.prose abbr[title]{text-decoration:underline dotted;cursor:help}
.prose small{font-size:var(--fs-sm);color:var(--text-faint)}

.post-head{margin-bottom:var(--s8)}
.post-head h1{
  font-size:var(--fs-h1);font-style:italic;line-height:var(--lh-tight);
  margin-top:var(--s3);
  text-wrap:balance;
}
.post-head .meta-row{margin-top:var(--s4)}
.post-head .summary{
  margin-top:var(--s5);
  font-style:italic;
  font-size:calc(var(--fs-base) * .97);
  line-height:1.62;
  color:var(--text-muted);
  text-wrap:pretty;
  max-width:var(--measure);
  padding-left:var(--s4);
  border-left:2px solid var(--line);
}

.prose pre .copy-btn{
  position:absolute;top:6px;right:6px;z-index:2;
  padding:4px 10px 5px;border-radius:var(--r-xs);
  border:1px solid var(--line-strong);background:var(--surface-solid);
  color:var(--text-muted);
  font-family:var(--font-label);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;
  opacity:0;transition:opacity var(--dur-fast),color var(--dur-fast);
}
.prose pre:hover .copy-btn,.prose pre .copy-btn:focus-visible{opacity:1}
.prose pre .copy-btn:hover{color:var(--accent-ink);border-color:var(--accent)}
@media (hover:none){.prose pre .copy-btn{opacity:.85}}

.prose pre[data-lang]::before{right:auto;left:0;border-radius:var(--r-md) 0 var(--r-xs) 0}

.post-foot{display:flex;flex-direction:column;gap:var(--s9)}

.post-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  padding:var(--s5);border-radius:var(--r-md);
  background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--line);
}
.post-tags .label{flex:none;margin:0}
.post-tags .tag-row{gap:var(--s2)}

.read-next .label{margin:0 0 var(--s5)}
.rn-grid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
}
.rn-card{
  gap:var(--s2);
  padding:var(--s5);
  color:var(--text);
  text-decoration:none;
}
.rn-kind{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-ink);
}
.rn-title{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:var(--fs-h4);line-height:1.3;text-wrap:balance;
}
.rn-meta{
  font-size:var(--fs-sm);color:var(--text-faint);
  font-variant-numeric:tabular-nums;margin-top:auto;padding-top:var(--s2);
}

a.rn-card:hover{color:var(--text)}

.binh-luan .label{margin:0 0 var(--s2)}
.bl-dem{color:var(--text-faint);font-weight:400}
.bl-moi{font-size:var(--fs-sm);color:var(--text-muted);margin:0 0 var(--s5)}

.bl-duyet{
  margin-bottom:var(--s7);
  padding:var(--s5);
  border-radius:var(--r-md);
  border:1px dashed var(--line-strong);
  background:var(--surface-sunken);
}
.bl-duyet-de{
  margin:0 0 var(--s4);
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);
}
.bl-duyet-bao{margin:0;font-size:var(--fs-2xs);color:var(--text-muted)}

.bl-duyet-hang{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.bl-duyet-hang input{
  font:inherit;font-size:var(--fs-sm);color:var(--text);
  padding:var(--s2) var(--s3);
  border:1px solid var(--line-strong);border-radius:var(--r-xs);
  background:var(--surface-solid);width:100%;box-sizing:border-box;
}
.bl-duyet-hang input:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}

.bl-dong{
  padding:var(--s4) 0;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s2);
}
.bl-dong--roi{opacity:.5}
.bl-dong-dau{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline}
.bl-dong-trang{
  font-family:var(--font-mono);font-size:var(--fs-2xs);
  color:var(--text-faint);text-decoration:none;
}
.bl-dong-trang:hover{color:var(--accent-ink);text-decoration:underline}
.bl-dong-nut{display:flex;gap:var(--s3);align-items:center}
.bl-dong-an{
  font:inherit;font-size:var(--fs-2xs);cursor:pointer;
  background:none;border:none;padding:0;color:var(--text-faint);
  text-decoration:underline;text-underline-offset:3px;
}
.bl-dong-an:hover{color:var(--bad)}
.bl-duyet-quen{
  margin-top:var(--s4);
  font:inherit;font-size:var(--fs-2xs);cursor:pointer;
  background:none;border:none;padding:0;color:var(--text-faint);
  text-decoration:underline;text-underline-offset:3px;
}

.duyet-noi{
  width:min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline:auto;
  margin-bottom:var(--s8);
}

.bl-quyen{
  display:flex;gap:var(--s3);margin-top:var(--s2);
  opacity:0;transition:opacity var(--dur-fast);
}
.bl-item:hover .bl-quyen,.bl-quyen:focus-within{opacity:1}
@media (hover:none){.bl-quyen{opacity:.65}}
.bl-quyen-nut{
  font:inherit;font-size:var(--fs-2xs);cursor:pointer;
  background:none;border:none;padding:0;color:var(--text-faint);
  text-decoration:underline;text-underline-offset:3px;
}
.bl-quyen-nut:hover{color:var(--accent-ink)}
.bl-quyen-nut--an:hover{color:var(--bad)}
.bl-quyen-nut:disabled{opacity:.4;cursor:default}

.bl-form{display:flex;flex-direction:column;gap:var(--s4)}

.bl-hang{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
}
.bl-o{display:flex;flex-direction:column;gap:6px}
.bl-o > span{
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);
}
.bl-o > span em{
  font-style:normal;font-weight:400;letter-spacing:.08em;
  color:var(--text-faint);text-transform:none;
}
.bl-o :is(input,textarea){
  width:100%;padding:11px var(--s4);
  border:none;border-radius:var(--r-sm);
  background:var(--surface-sunken);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--text);font-size:calc(var(--fs-base) * .94);line-height:1.6;
  font-family:inherit;
  transition:box-shadow var(--dur-fast);
}
.bl-o textarea{resize:vertical;min-height:104px}
.bl-o :is(input,textarea)::placeholder{color:var(--text-faint);opacity:.75}
.bl-o :is(input,textarea):focus{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-wash);
}

.bl-hp{
  position:absolute;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none;
}

.bl-chan{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.bl-con{font-size:var(--fs-sm);color:var(--text-faint);font-variant-numeric:tabular-nums}
.bl-chan .btn{margin-left:auto}

.bl-bao{margin:var(--s4) 0 0;font-size:var(--fs-sm);line-height:1.6;min-height:1.2em}
.bl-bao:empty{margin:0;min-height:0}
.bl-bao--ok{color:var(--ok)}
.bl-bao--loi{color:var(--bad)}
.bl-bao--cho{color:var(--text-faint);font-style:italic}

.bl-ds{list-style:none;padding:0;margin:var(--s7) 0 0;
  display:flex;flex-direction:column;gap:var(--s4)}
.bl-ds:empty{margin:0}
.bl-item{gap:var(--s2);padding:var(--s5)}
.bl-dau{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.bl-ten{font-weight:600;font-size:calc(var(--fs-base) * .94)}
.bl-luc{font-size:var(--fs-sm);color:var(--text-faint);
  font-variant-numeric:tabular-nums;flex:none}

.bl-nd{margin:0;white-space:pre-line;font-size:calc(var(--fs-base) * .96);
  line-height:1.7;color:var(--text-muted);overflow-wrap:break-word}

.bl-mo{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;padding:0;margin:0 0 var(--s2);
  background:none;border:none;cursor:pointer;text-align:left;
  color:inherit;font:inherit;
}
.bl-mo .label{margin:0}
.bl-mo:hover .label,.bl-mo:focus-visible .label{color:var(--accent-ink)}
.bl-mo:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px;border-radius:var(--r-sm)}
.bl-mui{
  width:7px;height:7px;flex:none;
  border-right:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);
  rotate:45deg;translate:0 -2px;
  transition:rotate var(--dur) var(--ease-glass),border-color var(--dur-fast);
}

.bl-mo[aria-expanded="false"] .bl-mui{rotate:-45deg;translate:0 0}
.bl-mo:hover .bl-mui{border-color:var(--accent-ink)}

.bl-trong{
  font-size:var(--fs-sm);font-style:italic;color:var(--text-faint);
  padding:var(--s4) 0;
}

.bl-hh{
  flex:none;padding:2px 8px 3px;border-radius:var(--r-pill);
  background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-ink);
}

.bl-dau .bl-luc{margin-left:auto}
.bl-item--chu{box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-wash)}

.bl-tra,.bl-them{
  align-self:flex-start;padding:2px 0;margin-top:var(--s1);
  background:none;border:none;cursor:pointer;
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--text-faint);transition:color var(--dur-fast);
}
.bl-tra:hover,.bl-them:hover,
.bl-tra:focus-visible,.bl-them:focus-visible{color:var(--accent-ink);outline:none}

.bl-nhanh{
  margin-top:var(--s4);padding-left:var(--s5);
  border-left:2px solid var(--line);
}
.bl-ds--con{margin:0;gap:var(--s3)}
.bl-item--con{padding:var(--s4) 0 0;background:none;box-shadow:none}
.bl-item--con .bl-nd{font-size:calc(var(--fs-base) * .92)}

.bl-item--con.bl-item--chu{
  background:none;box-shadow:none;
  border-left:2px solid var(--accent);margin-left:calc(var(--s5) * -1 - 2px);
  padding-left:var(--s5);
}

.bl-chip{
  display:flex;align-items:center;gap:var(--s3);
  margin:0 0 var(--s4);padding:6px var(--s4);
  border-radius:var(--r-pill);background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--fs-sm);color:var(--text-muted);
}
.bl-chip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-chip-x{
  flex:none;width:22px;height:22px;border:none;border-radius:50%;
  background:none;cursor:pointer;color:var(--text-faint);
  font-size:12px;line-height:1;
  transition:color var(--dur-fast),background var(--dur-fast);
}
.bl-chip-x:hover,.bl-chip-x:focus-visible{
  color:var(--accent-ink);background:var(--surface-solid);outline:none;
}

.bl-item > .bl-form{margin-top:var(--s4);padding-left:var(--s5);
  border-left:2px solid var(--line)}

.bl-than > .bl-form{margin-top:var(--s7)}

.page-layout{
  width:100%;max-width:var(--measure-ui);
  margin-inline:auto;
  padding:var(--s9) var(--gutter) var(--s11);
}

.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--s4);
}
.bo{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s6);
  min-width:0;
}

.bo--intro{grid-column:1 / 7;grid-row:1 / 3;justify-content:center;gap:var(--s4)}
.bo-dai   {grid-column:1 / 7;display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.bo--nay  {grid-column:1 / 4}
.bo--lienhe{grid-column:4 / 7}
.bo--chu  {grid-column:1 / 7;padding:0;background:none;box-shadow:none}

.bo--intro h1{
  font-size:clamp(28px,1.4rem + 2vw,44px);
  font-style:italic;line-height:var(--lh-tight);text-wrap:balance;
}

.bento--anh .bo--anh  {grid-column:1 / 3;grid-row:1 / 3}
.bento--anh .bo--intro{grid-column:3 / 7;grid-row:1 / 3}

.bento--anh .bo--intro h1{font-size:clamp(25px,1.25rem + 1.1vw,34px)}
.bento--anh .bo-lead{font-size:var(--fs-base);max-width:none}

.bo--anh{
  position:relative;padding:0;overflow:hidden;
  min-height:240px;
}
.bo--anh img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 38%;

  display:block;
}
.bo-lead{
  font-size:var(--fs-md);line-height:1.6;color:var(--text-muted);
  text-wrap:pretty;max-width:40ch;margin:0;
}

.bo--so{justify-content:center;align-items:flex-start;gap:2px;padding:var(--s5)}
.bo-so{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(22px,1.1rem + 1.1vw,32px);line-height:1.1;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.bo--so .label{margin:0}

.bo-so--dai{font-size:clamp(16px,.85rem + .55vw,21px);line-height:1.25;text-wrap:balance}

.bo--chu{backdrop-filter:none;-webkit-backdrop-filter:none}
.bo--chu::before{display:none}
.bo--chu .prose{
  margin-top:var(--s7);

  --measure:100%;
  --gutter:0;
}

.bo-ds{list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:var(--s3)}
.bo-ds li{
  display:flex;gap:var(--s3);align-items:baseline;
  font-size:calc(var(--fs-base) * .95);line-height:1.5;color:var(--text-muted);
  min-width:0;
}
.bo-ds li b{
  flex:none;min-width:4.4em;
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);
}

.bo-ds li > span{min-width:0;overflow-wrap:anywhere}
.bo-ds a{overflow-wrap:anywhere}

.bo-nghe{
  margin:var(--s2) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm);font-style:italic;color:var(--text-faint);
}

@media (max-width:860px){
  .bento{grid-template-columns:1fr}

  .bento .bo--anh,.bento .bo--intro,.bento .bo-dai,
  .bento .bo--nay,.bento .bo--lienhe,.bento .bo--chu{
    grid-column:1 / 2;grid-row:auto;
  }

  .bo:not(.bo--chu){padding:var(--s5)}
  .bo-dai{grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr))}

  .bento--anh .bo--anh{aspect-ratio:5 / 3;min-height:0}
  .bento--anh .bo--intro h1{font-size:clamp(28px,1.4rem + 2vw,44px)}
}

.chuong{
  display:flex;flex-direction:column;gap:var(--s11);
  max-width:var(--measure);margin-inline:auto;
}
.ch--mo h1{
  font-size:clamp(32px,1.5rem + 2.6vw,52px);
  font-style:italic;line-height:var(--lh-tight);text-wrap:balance;
  margin-top:var(--s3);
}
.ch-lead{
  margin:var(--s5) 0 0;font-size:var(--fs-md);line-height:1.62;
  color:var(--text-muted);text-wrap:pretty;
}
.ch-so{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s6);
  font-family:var(--font-label);font-size:var(--fs-2xs);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);
}
.ch-so span{display:inline-flex;align-items:center;gap:var(--s2)}
.ch-so span + span::before{content:"·";color:var(--line-strong);margin-right:var(--s2)}

.ch .prose{--measure:100%;--gutter:0}
.ch--lienhe{padding-top:var(--s7);border-top:1px solid var(--line)}
.ch--lienhe .label{margin:0 0 var(--s4)}

[data-hien]{
  opacity:0;translate:0 16px;
  transition:opacity .62s var(--ease-glass), translate .62s var(--ease-glass);
}
[data-hien].hien{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  [data-hien]{opacity:1;translate:0 0;transition:none}
}

.bo-quote{
  position:relative;
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s6);
  justify-content:center;
}
.bo-quote .label{margin:0}
.q-chu{
  margin:0;padding:0;border:none;
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(19px,1.05rem + .7vw,25px);line-height:1.4;
  color:var(--text);text-wrap:pretty;
}
.q-chu::before{content:"“";color:var(--accent);margin-right:2px}
.q-chu::after{content:"”";color:var(--accent);margin-left:2px}
.q-ai{
  margin:0;font-size:var(--fs-sm);color:var(--text-faint);
}
.q-ai::before{content:"— "}

.q-nut{
  position:absolute;bottom:var(--s4);right:var(--s4);
  width:32px;height:32px;opacity:0;
  transition:opacity var(--dur-fast),transform .34s var(--spring),
             color var(--dur-fast);
}
.q-nut svg{width:15px;height:15px}
.bo-quote:hover .q-nut,.q-nut:focus-visible{opacity:.75}
.q-nut:hover{opacity:1}
.q-nut:active{transform:rotate(-90deg) scale(.9)}
@media (hover:none){.q-nut{opacity:.6}}

.bo-quote.q-mo .q-chu,.bo-quote.q-mo .q-ai{opacity:0}
.bo-quote .q-chu,.bo-quote .q-ai{transition:opacity .18s linear}

.bo-quote.q-khac .label::after{
  content:" · thêm";color:var(--text-faint);font-weight:400;
}

.ch--quote .bo-quote{padding:var(--s8);text-align:center;align-items:center}
.ch--quote .q-chu{font-size:clamp(22px,1.1rem + 1.1vw,30px);max-width:26ch}