/* === assets/css/base.css === */
html{ scroll-behavior:smooth; }
:root{
  --bg:#e9e9e9; --fg:#111;
  --font-ui:"ABCFavorit", Arial, sans-serif;
  --font-brand:"ABCFavorit", Arial, sans-serif;

  /* Header */
  --menu-size:13px;
  --brand-size-max:72px;
  --brand-offset-y:6px; /* override desktop phía dưới */

  /* Footer */
  --giant-size: clamp(110px, 18vw, 300px);
  --meta-gap: clamp(40px, 3.5vw, 60px);
  --footer-pad-bottom: calc(var(--giant-size) * 1 + var(--meta-gap)); /* bạn yêu cầu */

  /* Modal */
  --panel-w: min(760px, calc(100vw - 80px));
  --panel-pad: 28px 40px 34px;
  --field-radius: 10px;
  --field-bw: 3px;
}
@media (min-width:901px){
  :root{ --brand-offset-y:10px; } /* hạ brand ở header */
}
html[data-theme="dark"]{ --bg:#0e0e0e; --fg:#f3f3f3; }
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-ui); letter-spacing:.02em; }
main{ min-height:52vh; }


/* === assets/css/cm-base.css === */
/* ============== ROOT / RESET ============== */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --fg: #111;
  --bg: #fff;
  --line: rgba(0,0,0,.12);
  --accent: #2b6cb0;

  /* Breakpoints */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Max width + gutters co giãn */
  --content-max: 1200px;
  --gutter: clamp(12px, 3vw, 28px);

  /* Typo scale */
  --fs-base: clamp(14px, 1.6vw, 16px);
  --fs-h1: clamp(32px, 6vw, 56px);
  --fs-h2: clamp(24px, 4.5vw, 36px);
  --fs-h3: clamp(20px, 3.4vw, 28px);
}
html { font-size: 100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: 1.55;
}

/* Ảnh/multimedia an toàn */
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Container trung tâm */
.cm-container{
  width: min(100% - 2*var(--gutter), var(--content-max));
  margin-inline: auto;
}

/* Headings scale */
h1{ font-size: var(--fs-h1); line-height: 1.1; margin: .3em 0 .5em; }
h2{ font-size: var(--fs-h2); line-height: 1.15; margin: .75em 0 .5em; }
h3{ font-size: var(--fs-h3); line-height: 1.2; margin: .75em 0 .4em; }

/* Utilities nhỏ */
.hide-sm { display: none; }
@media (min-width: 768px){ .hide-sm{ display: initial; } }
.show-sm { display: initial; }
@media (min-width: 768px){ .show-sm{ display: none; } }

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

/* Table/code không tràn */
.cm-scroll-x{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
pre, code, kbd, samp{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
pre{ background:#f6f7f8; border:1px solid var(--line); border-radius:10px; padding:12px; overflow:auto; }

/* ============== HEADER / NAV ============== */
/* Ví dụ header chung .cm-header, .cm-brand, .cm-nav, .cm-nav-toggle */
.cm-header{
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 50;
}
.cm-header__inner{
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--gutter);
  width: min(100%, var(--content-max));
  margin: 0 auto;
}
.cm-brand{ font-weight: 800; letter-spacing: .02em; }
.cm-nav{ margin-left: auto; display: flex; gap: 16px; align-items: center; }
.cm-nav a{ color: var(--fg); font-weight: 600; }
.cm-nav-toggle{
  appearance:none; border:1px solid var(--line); background:#fff; border-radius:10px;
  padding:8px 10px; cursor:pointer;
}

/* Small: dùng hamburger */
@media (max-width: 768px){
  .cm-nav{ 
    position: fixed; inset: 56px 0 auto 0;
    background: var(--bg); border-bottom:1px solid var(--line);
    display: none; flex-direction: column; padding: 12px var(--gutter);
  }
  body.nav-open .cm-nav{ display: flex; }
}

/* ============== TOOLS BAR (TAG/SORT/VIEW + SEARCH) ============== */
.tools-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding: 10px var(--gutter);
}
.tools-row .view-switch{ margin-left:auto; }
.tools-row .cm-search{
  flex: 1 1 320px; min-width: 240px;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:12px; background:#f4f4f4;
  padding:10px 12px;
}
.tools-row .cm-search input{
  width:100%; border:0; outline:0; background:transparent; font:inherit;
}

/* ============== GRID / CARDS / LIST ============== */
/* Post grid tự co giãn */
.post-list.view--grid .post-grid{
  display:grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 0 var(--gutter) 20px;
}
.post.post-card{
  border:1px solid var(--line); border-radius:12px; background:#fff; padding:14px 16px;
  transition: box-shadow .15s ease;
}
.post.post-card:hover{ box-shadow:0 8px 28px rgba(0,0,0,.08); }

/* List view: title | (tags + date) nằm 1 hàng; co giãn về 2 hàng khi hẹp */
.post-list.view--list .post-grid{ display:block; padding: 0 var(--gutter); }
.post-list.view--list .post-row{
  display:grid; grid-template-columns: 1fr auto; gap: 10px;
  align-items:center; border-bottom:1px solid var(--line);
  padding: 12px 0;
}
.post-list.view--list .post-row h2{
  margin:0; font-size: clamp(14px, 1.8vw, 16px); font-weight:600;
}
.post-list.view--list .post-row .row-right{
  display:flex; align-items:center; gap: 10px; justify-self:end;
}
.post-date{ white-space:nowrap; opacity:.75; font-size:12px; }

/* Tag strip */
.tag-strip{ display:flex; gap:6px; flex-wrap:wrap; }
.tag-chip{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px;
  background:#eef1f4; border:1px solid rgba(0,0,0,.06); color:#333;
}
.tag-chip.tag-more{ opacity:.8; position:relative; }

/* Popover tag: rộng vừa phải, mobile full width */
.tag-pop{
  position:absolute; left:0; top: calc(100% + 8px);
  z-index: 40; display:none; padding:10px; border:1px solid var(--line); border-radius:10px;
  background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12);
  max-width: min(90vw, 520px);
}
.tag-strip .tag-more:hover + .tag-pop,
.tag-pop:hover{ display:block; }

/* Hẹp màn hình: list view chuyển title trên, tag + date xuống dưới */
@media (max-width: 640px){
  .post-list.view--list .post-row{ grid-template-columns: 1fr; }
  .post-list.view--list .post-row .row-right{
    justify-self:start; flex-wrap: wrap; margin-top: 6px;
  }
}

/* ============== TAG/SORT PANEL responsive (nếu dùng panel nổi) ============== */
.cm-pop{ background:#fff; border:1px solid var(--line); border-radius:12px; }
.cm-tag-sheet, .cm-sort-sheet{
  min-width: 560px; max-width: min(92vw, 720px);
}
@media (max-width: 700px){
  .cm-tag-sheet, .cm-sort-sheet{ min-width: 100%; max-width: 100%; }
}

/* ============== TABLES / CONTENT ============== */
.cm-content table{ width:100%; border-collapse: collapse; }
.cm-content th, .cm-content td{ border:1px solid var(--line); padding:10px; }
.cm-content .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============== FOOTER ============== */
.cm-footer{ border-top:1px solid var(--line); margin-top: 24px; }
.cm-footer__inner{
  width: min(100% - 2*var(--gutter), var(--content-max));
  margin: 0 auto; padding: 16px 0;
  display:flex; align-items:center; gap: 12px; flex-wrap: wrap;
}

/* ============== DARK MODE  ============== */
@media (prefers-color-scheme: dark){
  :root{ --bg:#111; --fg:#f3f3f3; --line: rgba(255,255,255,.18); }
  body{ background: var(--bg); color: var(--fg); }
  .post.post-card{ background:#151515; }
  .tools-row .cm-search{ background:#1c1c1c; }
  pre{ background:#0f0f0f; border-color: var(--line); }
}


/* === assets/css/header.css === */
/* =========================
   Header — CacheMissed
   ========================= */

/* Biến mặc định (có thể override ở base.css nếu muốn) */
:root{
  --bg: #ececec;                 /* nền header */
  --fg: #111;                    /* màu chữ/link */
  --menu-size: 14px;             /* cỡ chữ menu */
  --brand-size-max: 88px;        /* cỡ tối đa cho logo chữ */
  --font-brand: 'ABCFavorit', Arial, sans-serif;

  /* ↓ HẠ chữ CACHEMISSED bằng cách tăng giá trị này (px) */
  --brand-offset-y: 35px;
}

/* Header khung ngoài */
.site-header{
  background: var(--bg);
  border-bottom: 0;
}

/* Bên trong header */
.site-header__inner{
  position: relative;
  width: 100%;
  padding: 18px clamp(14px, 2vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Nav trái (HOME/BLOG/ABOUT/CONTACTS) */
.nav{
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav a{
  font-size: var(--menu-size);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;      /* mặc định không gạch */
  color: var(--fg);
  padding-bottom: 8px;
  position: relative;
  display: inline-block;
}
/* nếu theme cũ dùng .active::after thì tắt đi */
.nav a.active::after{ content: none; }

/* Logo chữ ở giữa */
.brand{
  position: absolute;
  left: 50%;
  transform: translate(-50%, var(--brand-offset-y)); /* hạ tại đây */
  font-family: var(--font-brand);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(28px, 6vw, var(--brand-size-max));
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;        /* không bắt hover/click */
}

/* Hành động bên phải */
.actions{
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--menu-size);
  line-height: 1;
}
.actions button,
.actions a{
  appearance: none;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

/* ========== Responsive ========== */
@media (max-width: 900px){
  :root{
    --brand-size-max: 56px;
    --brand-offset-y: 0px;   /* mobile không cần offset vì brand không absolute */
  }
  .site-header__inner{
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .brand{
    position: static;
    transform: none;
    order: -1;
    width: 100%;
    text-align: center;
    margin-top: -4px;
    pointer-events: auto;   /* cho phép chọn/copy nếu cần */
  }
  .nav{ gap: 20px; }
  .actions{ margin-left: auto; gap: 20px; }
}

/* ====== Underline mục active theo trang ====== */
/* đảm bảo các link trong header không bị gạch chân trừ mục active */
.site-header a{ text-decoration: none; }

/* BLOG */
body[data-page="blog"]  .site-header a[data-nav="blog"],
/* ABOUT */
body[data-page="about"] .site-header a[data-nav="about"],
/* HOME (nếu muốn hiển thị active ở trang chủ) */
body[data-page="home"]  .site-header a[data-nav="home"]{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: #111; /* accent */
}

/* Typewriter vibe như SQL Noir */
header .brand,
.cm-header .brand,
header .logo-text,
.header .site-brand {
  font-family: "Special Elite", serif;
  font-weight: 1200;
  letter-spacing: 0.15em;
  color: var(--fg, #5b3218);        /* nâu nhẹ giống Noir – đổi nếu bạn dùng màu khác */
  text-shadow:
    0.5px 0.5px 0 #3b1f0e,         /* viền nâu đậm */
    1px 1.2px 0 rgba(0,0,0,.12);   /* mực loang nhẹ */
  font-size: clamp(80px, 4vw, 200px);
}

/* Nếu bạn đang dùng logo chữ là <a> */
header .brand a,
.header .site-brand a {
  color: inherit;
  text-decoration: none;
}

.header .brand,
.site-title {
  font-family: "Special Elite", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .5px;
}


/* === assets/css/footer.css === */
.site-footer{
  background:var(--bg); color:var(--fg); border-top:3px solid var(--fg);
  position:relative; overflow:hidden; isolation:isolate;
}
.site-footer__inner{
  position:relative; z-index:2;
  padding:22px clamp(14px,2vw,32px) var(--footer-pad-bottom);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start; column-gap:24px;
}
.foot-left a{
  display:block; text-decoration:none; color:var(--fg);
  font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(18px, 2.2vw, 28px); line-height:1.5;
}
.foot-center{
  justify-self:center; align-self:start; font-weight:900; text-transform:uppercase;
  font-size:clamp(16px, 1.3vw, 24px); margin-top:4px;
}
.foot-right{ justify-self:end; text-align:right; }
.foot-right a{ text-decoration:none; color:var(--fg); font-weight:900; text-transform:uppercase; font-size:clamp(16px, 1.6vw, 24px); }

.foot-giant{
  position:absolute; left:clamp(12px,2vw,1px); bottom: var(--meta-gap);
  z-index:1; font-family:var(--font-brand); font-weight:900; text-transform:uppercase;
  line-height:.9; letter-spacing:.01em; white-space:nowrap; pointer-events:none;
  font-size:var(--giant-size);
}
.foot-meta{
  position:absolute; left:clamp(12px,2vw,32px); right:clamp(12px,2vw,32px);
  bottom:12px; z-index:2; display:flex; justify-content:space-between;
  font-weight:800; text-transform:uppercase; font-size:clamp(10px, .95vw, 14px);
}

@media (max-width:900px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; row-gap:18px; }
  .foot-center{ grid-column:1/-1; text-align:center; order:-1; }
  .foot-left a{ font-size:clamp(16px,5vw,24px); }
}


/* === assets/css/modal.css === */
.modal{ position:fixed; inset:0; display:none; z-index:1000; }
.modal.is-open{ display:block; }
.modal__overlay{ position:absolute; inset:0; background:#000; opacity:.55; }
.modal__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:var(--panel-w); background:#fff; color:#111; padding:var(--panel-pad);
  box-shadow:0 4px 40px rgba(0,0,0,.25);
}
.modal__close{
  position:absolute; top:14px; right:16px; width:36px; height:36px;
  border:0; background:none; font-size:28px; line-height:1; cursor:pointer; color:#111;
}
.modal__title{
  margin:0 40px 20px 0; font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:22px; line-height:1.25;
}
.field{
  width:100%; padding:16px 18px; margin-top:16px;
  border:var(--field-bw) solid #111; border-radius:var(--field-radius);
  font:16px/1.3 var(--font-ui); color:#111; background:#fff;
}
textarea.field{ min-height:140px; resize:vertical; }
.hint{ font-size:14px; margin-top:18px; }
.file-row{ margin-top:8px; display:flex; gap:10px; align-items:center; }
.file-btn{
  appearance:none; border:0; background:none; color:#111;
  font-weight:800; text-transform:uppercase; cursor:pointer; padding:0; text-decoration:underline;
}
.file-list{ font-size:13px; opacity:.8; }
.send-row{ text-align:center; margin:26px 0 18px; }
.send-btn{
  appearance:none; border:0; background:none; cursor:pointer;
  font-weight:900; text-transform:uppercase; letter-spacing:.08em;
}
.send-btn::before{ content:"[ "; } .send-btn::after{ content:" ]"; }
.policy{ font-size:14px; opacity:.9; }

@media (max-width:900px){
  .modal__panel{ width:calc(100vw - 40px); padding:20px 22px 26px; }
  .modal__title{ font-size:18px; }
}