/* theme.css — blog tienthatvaloihua.com. Dark MẶC ĐỊNH (#0b0b0b/cam), light mượn
   token web_lookup. Font hệ thống, 0 CDN. Motif nét đứt cam. */
:root{
  --nen:#0b0b0b; --giay:#141414; --muc:#ece7dd; --mo:#9a9086;
  --cam:#e0902e; --vien:#262626; --lien:#e0902e;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* light: mượn bộ web_lookup (giấy kem), cam đậm hơn cho tương phản chữ */
:root[data-theme=light]{
  --nen:#faf7f2; --giay:#f0ebe1; --muc:#141210; --mo:#6b6258;
  --cam:#e0902e; --vien:#ddd5c8; --lien:#a85d0a;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme=dark]){
    --nen:#faf7f2; --giay:#f0ebe1; --muc:#141210; --mo:#6b6258;
    --cam:#e0902e; --vien:#ddd5c8; --lien:#a85d0a;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nen);color:var(--muc);font:17px/1.7 var(--sans)}
a{color:var(--lien)}
img{max-width:100%}

header{position:sticky;top:0;z-index:9;background:var(--nen);border-bottom:1px solid var(--vien);
  display:flex;align-items:center;gap:10px;padding:11px 18px}
header .logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--muc)}
header .logo svg{display:block}
header .logo img.logo-img{display:block;height:30px;width:30px;border-radius:6px}
header .name{font:700 16px var(--serif)}
header nav{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header nav a{font:12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mo);text-decoration:none}
header nav a:hover{color:var(--cam)}
/* Hamburger + drawer trượt từ trái — CHỈ mobile (≤640px). Desktop: ẩn burger/scrim, nav ngang như cũ. */
.burger{width:34px;height:34px;border:1px solid var(--vien);border-radius:6px;background:var(--giay);
  color:var(--muc);cursor:pointer;display:none;place-items:center;gap:3px}
.burger span{display:block;width:16px;height:2px;background:var(--muc)}
/* scrim z-index THẤP hơn header (9) để header + drawer (nằm trong stacking context của
   header sticky) nổi trên scrim và bấm được; chỉ nội dung bài phía sau bị mờ. */
.scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--muc) 42%,transparent);
  opacity:0;visibility:hidden;transition:opacity .22s;z-index:8}
body.nav-open .scrim{opacity:1;visibility:visible}
.drawer-title{display:none}
@media(max-width:640px){
  .burger{display:grid;order:0}
  header .logo{order:1}
  header .name{white-space:nowrap}
  #themebtn{order:2;margin-left:auto}
  header nav#drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:300px;
    flex-direction:column;align-items:stretch;gap:0;margin:0;z-index:40;overflow-y:auto;
    background:var(--nen);border-right:1px solid var(--vien);padding:14px 0 40px;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.25,1,.5,1)}
  body.nav-open header nav#drawer{transform:none}
  .drawer-title{display:block;font:700 18px var(--serif);color:var(--muc);
    padding:6px 20px 12px;margin-bottom:6px;border-bottom:1px solid var(--vien)}
  header nav#drawer a{padding:12px 20px;font-size:13px}
  body.nav-open{overflow:hidden}
}
.icobtn{width:32px;height:32px;border:1px solid var(--vien);border-radius:6px;background:var(--giay);
  color:var(--muc);cursor:pointer;font-size:14px;line-height:1}

.wrap{max-width:680px;margin:0 auto;padding:26px 18px 80px}
.eyebrow{font:11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--cam);
  border-left:3px dashed var(--cam);padding-left:9px;margin-bottom:10px}
h1.title{font:700 32px/1.26 var(--serif);margin:2px 0 8px;text-wrap:balance;letter-spacing:-.005em}
.meta{font:12px var(--mono);color:var(--mo);margin-bottom:6px}
.summary{background:var(--giay);border:1px solid var(--vien);border-left:3px dashed var(--cam);
  border-radius:8px;padding:12px 15px;margin:16px 0;color:var(--muc);font:16px/1.6 var(--sans)}
.summary .tl{font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mo);margin-bottom:5px}

.md{font-size:17.5px;line-height:1.78}
.md p{margin:0 0 1.12em}
/* Drop-cap chữ cái đầu bài — chất biên tập; CHỈ trang bài (.md), light/dark đều dùng --cam */
.md>p:first-of-type::first-letter{float:left;font:600 3.05em/.8 var(--serif);
  color:var(--cam);margin:.04em .09em 0 0}
.md h2{font:700 21px/1.35 var(--serif);margin:30px 0 10px;border-top:1px solid var(--vien);padding-top:8px}
.md h3{font:700 17px var(--sans);margin:22px 0 8px}
.md h4{font:700 15px var(--sans);margin:16px 0 6px;color:var(--mo)}
.md ul,.md ol{margin:12px 0;padding-left:22px}.md li{margin:6px 0}
.md blockquote{border-left:3px dashed var(--cam);margin:18px 0;padding:4px 0 4px 16px;
  font:italic 17px/1.7 var(--serif);color:var(--muc)}
.md strong{font-weight:700}.md em{font-style:italic}
.md code{font:14px var(--mono);background:var(--giay);padding:1px 5px;border-radius:4px}
.md pre.code{background:var(--giay);border:1px solid var(--vien);border-radius:8px;padding:14px 16px;
  overflow:auto;font:13px/1.55 var(--mono);white-space:pre}
.md hr{border:0;border-top:3px dashed var(--vien);margin:28px 0}
.md .tblwrap{overflow-x:auto;margin:16px 0}
.md table{border-collapse:collapse;width:100%;font:15px var(--sans)}
.md th,.md td{border:1px solid var(--vien);padding:8px 11px;text-align:left;vertical-align:top}
.md th{background:var(--giay);font:600 13px var(--mono)}
.md a{color:var(--lien)}

.cta{background:var(--giay);border:1px solid var(--cam);border-radius:8px;padding:13px 16px;margin:22px 0;
  font:16px/1.6 var(--sans)}
.chot{background:var(--giay);border:1px solid var(--vien);border-left:3px solid var(--do);
  border-radius:8px;padding:12px 14px;margin:26px 0 6px}
.chot .tl{font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mo);margin-bottom:5px}
.chot p{margin:0 0 8px}
.chot .ng{font:12px var(--mono);color:var(--mo);margin:10px 0 0;padding-top:8px;border-top:1px solid var(--vien)}
.chot .ng a{color:var(--mo);text-decoration:underline}
.chot .ng a:hover{color:var(--cam)}
.tags{margin:24px 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.tags a{font:12px var(--mono);color:var(--mo);border:1px solid var(--vien);border-radius:6px;
  padding:2px 8px;text-decoration:none}
.tags a:hover{border-color:var(--cam);color:var(--cam)}
.byline{font:13px var(--mono);color:var(--mo);margin:14px 0}
.pnav{display:flex;justify-content:space-between;gap:12px;margin:26px 0;border-top:1px solid var(--vien);padding-top:16px}
.pnav a{font:13px var(--sans);color:var(--lien);text-decoration:none;max-width:47%}
.pnav a:last-child{text-align:right}
.related{margin:28px 0}
.related .tl{font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mo);margin-bottom:8px}

.postlist{list-style:none;margin:0;padding:0}
.postlist li{border-bottom:1px solid var(--vien);padding:16px 0}
.postlist .cat{font:11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--cam)}
.postlist h2{font:700 20px/1.32 var(--serif);margin:5px 0 4px}
.postlist h2 a{color:var(--muc);text-decoration:none}
.postlist h2 a:hover{color:var(--cam)}
.postlist .sum{color:var(--mo);font:15px/1.55 var(--sans);margin:4px 0 0}
.postlist .d{font:11px var(--mono);color:var(--mo)}
.pager{display:flex;justify-content:space-between;margin:26px 0;font:13px var(--mono)}
.pager a{color:var(--lien);text-decoration:none}

footer{border-top:1px solid var(--vien);color:var(--mo);font:12px var(--mono);
  max-width:680px;margin:0 auto;padding:22px 18px 40px}
footer a{color:var(--mo)}footer a:hover{color:var(--cam)}
footer .disc{margin:10px 0;line-height:1.6}

/* form thu email (P7) */
.subscribe-wrap{border-top:1px solid var(--vien);margin-top:28px;padding-top:18px}
.subscribe{background:var(--giay);border:1px solid var(--vien);border-left:3px dashed var(--cam);border-radius:8px;padding:14px 16px}
.sub-lede{margin:0 0 10px;font:15px var(--sans);color:var(--muc)}
.sub-row{display:flex;gap:8px;flex-wrap:wrap}
.subscribe input[type=email]{flex:1;min-width:180px;padding:9px 11px;border:1px solid var(--vien);border-radius:6px;background:var(--nen);color:var(--muc);font:15px var(--sans)}
.subscribe button{padding:9px 16px;border:1px solid var(--cam);border-radius:6px;background:var(--cam);color:#0b0b0b;font:600 14px var(--sans);cursor:pointer}
.cf-turnstile{margin-top:10px}
.sub-note{margin:10px 0 0;font:13px var(--mono);color:var(--cam)}

/* share + comments (P8) */
.share{display:flex;align-items:center;gap:10px;margin:24px 0;flex-wrap:wrap}
.share-lbl{font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mo)}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--vien);border-radius:8px;background:var(--giay);cursor:pointer;text-decoration:none}
.share-btn:hover{border-color:var(--cam)}
.share-done{font:12px var(--mono);color:var(--cam)}
.comments{border-top:1px solid var(--vien);margin-top:24px;padding-top:16px}
.comments .discuss{margin-bottom:12px;font:13px var(--sans)}
.comments .discuss a{color:var(--lien);text-decoration:none;margin-right:14px}

/* khối bình luận Google (phase 4) */
.cui .tl{font:600 15px var(--serif);margin:6px 0 12px}
.cui .clist{list-style:none;margin:0 0 16px;padding:0}
.cui .clist li{border-top:1px solid var(--vien);padding:12px 0}
.cui .cmeta{font:12px var(--mono);color:var(--mo);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.cui .ctext{white-space:pre-wrap;font:16px/1.6 var(--sans)}
.cui .cnote{font:13px var(--sans);color:var(--cam);margin:10px 0}
.cui .clogin{display:inline-block;align-self:flex-start;padding:9px 16px;border:1px solid var(--cam);border-radius:6px;background:var(--cam);color:#0b0b0b;font:600 14px var(--sans);text-decoration:none}
.cui .cmo{font:12px var(--sans);color:var(--mo);margin-top:8px}
.cui .cform-in{display:flex;flex-direction:column;gap:8px}
.cui .cform-in[hidden]{display:none}  /* [hidden] phải thắng display:flex sau khi gửi xong */
.cui textarea{width:100%;box-sizing:border-box;min-height:88px;padding:10px 12px;border:1px solid var(--vien);border-radius:6px;background:var(--nen);color:var(--muc);font:15px/1.5 var(--sans);resize:vertical}
.cui .ccount{font:11px var(--mono);color:var(--mo);text-align:right}
.cui .cform-in button{align-self:flex-start;width:auto;height:auto;padding:9px 16px;border:1px solid var(--cam);border-radius:6px;background:var(--cam);color:#0b0b0b;font:600 14px var(--sans);cursor:pointer}
.cui .clogout{display:inline-block;margin-top:8px;font:12px var(--sans);color:var(--mo)}

/* tiện ích — thay các style= inline (CSP không có 'unsafe-inline') */
.center{text-align:center;padding-top:56px}
.eyebrow-plain{display:inline-block;border-left:0;padding-left:0}