/*
Theme Name: So Tay Cua Bin
Theme URI: https://example.com/
Author: Thiet ke rieng cho gia dinh
Description: Theme blog ca nhan mau pastel Hong phan, danh cho viec luu giu bai viet, bai hoc, ky niem va anh. Co form dang bai ngay tren trang cho thanh vien gia dinh.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sotay
*/

/* ============================================================
   1. BIEN MAU  (bang mau Hong phan)
   Muon doi mau toan trang thi chi can sua cac gia tri o day.
   ============================================================ */
:root{
  --paper:#EFDBD9;          /* nen trang - dam hon de the noi len */
  --surface:#FFFBFA;        /* nen the, khung */
  --surface-2:#F3E2E0;      /* nen phu */
  --ink:#38222A;            /* chu chinh - dam */
  --ink-soft:#7A5B62;       /* chu phu */
  --line:#E3C8C6;           /* duong ke nhat */
  --line-strong:#CFA8A6;    /* duong ke dam */

  --accent:#AF3F5C;         /* mau nhan - dam de noi tren nen sang */
  --accent-quiet:#FBE6EB;   /* nen nhat cua mau nhan */
  --on-pastel:#2E2430;      /* chu tren nen pastel */

  --blush:#F2A9BC;
  --mint:#A3CDB5;
  --butter:#F3CD84;
  --peri:#B4B7E6;

  --ok:#3E7A5C;
  --warn:#AE762C;
  --danger:#B04450;

  --shadow-soft:0 1px 2px rgba(56,34,42,.06), 0 10px 26px -14px rgba(56,34,42,.38);
  --r-sm:10px; --r-md:16px; --r-lg:22px;

  --f-display:"Quicksand","Segoe UI",system-ui,sans-serif;
  --f-body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;

  --w:1080px;

  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#231A1E;
    --surface:#332830;
    --surface-2:#3E313A;
    --ink:#FBF2F4;
    --ink-soft:#C7ADB4;
    --line:#4A3A42;
    --line-strong:#5E4A53;
    --accent:#F79FB6;
    --accent-quiet:#3F2E36;
    --ok:#8CC9A8; --warn:#E6BE7C; --danger:#EE9AA0;
    --shadow-soft:0 1px 2px rgba(0,0,0,.25), 0 10px 24px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#231A1E;
  --surface:#332830;
  --surface-2:#3E313A;
  --ink:#FBF2F4;
  --ink-soft:#C7ADB4;
  --line:#4A3A42;
  --line-strong:#5E4A53;
  --accent:#F79FB6;
  --accent-quiet:#3F2E36;
  --ok:#8CC9A8; --warn:#E6BE7C; --danger:#EE9AA0;
  --shadow-soft:0 1px 2px rgba(0,0,0,.25), 0 10px 24px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ============================================================
   2. NEN TANG
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:700;line-height:1.25;text-wrap:balance;margin:0}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:20px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:12px;top:12px;z-index:100;background:var(--surface);
  padding:10px 16px;border-radius:999px;border:1px solid var(--line-strong);
}
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* ============================================================
   3. THANH TREN
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 1px 0 rgba(56,34,42,.04), 0 6px 18px -14px rgba(56,34,42,.4);
}
.topbar .wrap{
  display:flex;align-items:center;gap:10px 22px;
  padding-block:13px;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:inherit;min-width:0;
  padding-right:8px;margin-right:6px;
  border-right:1px solid var(--line);
}
.brand-mark{width:36px;height:36px;flex:none;border-radius:10px}
.brand-name{
  font-family:var(--f-display);font-weight:700;font-size:19.5px;
  letter-spacing:.1px;line-height:1.15;white-space:nowrap;
}
/* Ban cu con hien dong mo ta canh ten blog - giu cho no gon gang
   phong khi trang duoc nap tu ban luu cache. */
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-sub{
  display:block;font-size:11px;color:var(--ink-soft);
  letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
  max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:1100px){.brand-sub{display:none}}

.nav{display:flex;gap:3px;flex-wrap:wrap;list-style:none;margin:0 auto 0 0;padding:0}
.nav a{
  display:block;text-decoration:none;font-size:14.5px;font-weight:600;
  font-family:var(--f-display);
  padding:8px 14px;border-radius:999px;color:var(--ink-soft);
  transition:background .15s,color .15s;
}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav .on > a,
.nav .current-menu-item > a{background:var(--accent);color:var(--surface)}

@media (max-width:820px){
  .brand{border-right:0;margin-right:auto;padding-right:0}
  .nav{order:3;width:100%;margin:0;border-top:1px solid var(--line);padding-top:9px}
}

.who{
  display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:4px 14px 4px 4px;
}
.who .txt{display:flex;flex-direction:column;line-height:1.25}
.who b{font-family:var(--f-display);font-size:13.5px;font-weight:600}
.who .thoat{
  font-size:11.5px;color:var(--ink-soft);text-decoration:none;
  letter-spacing:.02em;
}
.who .thoat:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--peri);
  display:grid;place-items:center;font-family:var(--f-display);font-weight:700;
  font-size:13px;color:var(--on-pastel);overflow:hidden;flex:none;
}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   4. NUT
   ============================================================ */
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;border:1.5px solid var(--line-strong);
  font-family:var(--f-display);font-weight:600;font-size:14px;
  text-decoration:none;color:inherit;background:none;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-solid{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:999px;background:var(--accent);color:#fff;
  font-family:var(--f-display);font-weight:600;font-size:15px;text-decoration:none;
}
:root[data-theme="dark"] .btn-solid{color:var(--on-pastel)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-solid{color:var(--on-pastel)}}
.btn-solid:hover{filter:brightness(1.05)}
.btn-text{
  font-family:var(--f-display);font-weight:600;font-size:14px;
  color:var(--ink-soft);text-decoration:none;padding:8px 4px;
}
.btn-text:hover{color:var(--accent)}

.act{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  font-family:var(--f-display);font-weight:600;font-size:14px;
  color:var(--on-pastel);text-decoration:none;
  transition:transform .12s ease,filter .12s ease;
}
.act:hover{transform:translateY(-1px);filter:brightness(1.03)}
.act svg{width:16px;height:16px;flex:none}
.act.blush{background:var(--blush)}
.act.mint{background:var(--mint)}
.act.butter{background:var(--butter)}
.act.peri{background:var(--peri)}

.icon-btn{
  width:30px;height:30px;border-radius:50%;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--line-strong);
  display:grid;place-items:center;backdrop-filter:blur(4px);
  color:var(--ink);text-decoration:none;
}
.icon-btn svg{width:14px;height:14px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn.warn:hover{border-color:var(--danger);color:var(--danger)}

/* ============================================================
   5. HERO + BANG DIEU KHIEN
   ============================================================ */
.hero{padding-block:34px 12px}
.hero-inner{
  display:grid;grid-template-columns:1.25fr .85fr;
  align-items:stretch;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow-soft);
}
/* Phan chu cua hero. Viet bang :not() de van co le trong ca khi
   trang duoc nap tu ban luu cache cu (chua co lop .hero-loi). */
.hero-inner > *:not(.hero-art){
  padding:40px 42px;display:flex;flex-direction:column;justify-content:center;
}
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr}
  .hero-inner > *:not(.hero-art){padding:28px 24px}
}
.eyebrow{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
.hero h1{font-size:clamp(30px,4.8vw,44px);margin-top:12px;letter-spacing:-.4px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{margin-top:16px;font-size:16.5px;color:var(--ink-soft);max-width:44ch}
.hero-art{
  min-height:280px;border-left:1px solid var(--line);
  background:var(--surface-2);
}
.hero-art img{width:100%;height:100%;object-fit:cover;min-height:280px}

/* Khi chua co anh: hoa van cheo nhe nhang thay vi khoi mau to */
.hero-art-trong{
  display:grid;place-items:center;gap:10px;position:relative;overflow:hidden;
  background:var(--accent-quiet);
}
.hero-art-trong .hoa-van{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(
    -45deg,
    var(--line) 0 1px,
    transparent 1px 13px
  );
  opacity:.55;
}
.hero-art-trong .btn-ghost{
  position:relative;background:var(--surface);
}
@media (max-width:820px){
  .hero-art{min-height:0;aspect-ratio:16/9;border-left:0;border-top:1px solid var(--line);order:-1}
  .hero-art img{min-height:0}
}

.toolbar{
  margin-top:16px;background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:18px;padding:13px 16px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  box-shadow:var(--shadow-soft);
}
.toolbar-label{
  font-family:var(--f-display);font-weight:700;font-size:12px;color:var(--ink-soft);
  letter-spacing:.08em;text-transform:uppercase;
  margin-right:6px;display:flex;align-items:center;gap:7px;
}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}

.locked{
  margin-top:16px;border:1px solid var(--line-strong);border-radius:18px;
  padding:20px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--accent-quiet);
}
.locked > svg{width:22px;height:22px;color:var(--accent);flex:none}
.locked p{font-size:14.5px;color:var(--ink-soft);max-width:52ch}
.locked b{font-family:var(--f-display);color:var(--ink);display:block;font-size:16px;margin-bottom:2px}

/* ============================================================
   6. TIEU DE MUC
   ============================================================ */
section.blk{padding-block:38px 10px}
.blk-head{
  display:flex;align-items:center;gap:12px 16px;margin-bottom:22px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:2px solid var(--line-strong);
}
.blk-head h2{
  font-size:26px;position:relative;padding-left:15px;letter-spacing:-.2px;
}
.blk-head h2::before{
  content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:5px;
  border-radius:3px;background:var(--accent);
}
.blk-head .note{font-size:13.5px;color:var(--ink-soft)}
.blk-head .spacer{margin-left:auto}

.page-head{padding-block:40px 10px}
.page-head h1{font-size:clamp(26px,4.4vw,38px)}
.page-head p{color:var(--ink-soft);margin-top:8px;max-width:60ch}

/* ============================================================
   7. THE BAI VIET
   ============================================================ */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.post{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-soft);
  display:flex;flex-direction:column;position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.post:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(56,34,42,.07), 0 16px 32px -16px rgba(56,34,42,.45)}
.post .cover{aspect-ratio:16/9;max-width:100%;display:block;background:var(--surface-2)}
.post .cover img{width:100%;height:100%;object-fit:cover}
.post .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.post h3{font-size:18.5px}
.post h3 a{text-decoration:none;color:inherit}
.post h3 a:hover{color:var(--accent)}
.post .snip{font-size:14.5px;color:var(--ink-soft)}
.post .meta{
  margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-variant-numeric:tabular-nums;
}
.tag{
  font-size:11.5px;font-weight:600;font-family:var(--f-display);
  padding:3px 10px;border-radius:999px;color:var(--on-pastel);
  align-self:flex-start;text-decoration:none;background:var(--blush);
}
.card-tools{position:absolute;top:10px;right:10px;gap:6px;z-index:5;display:flex}
.ribbon{
  position:absolute;top:12px;left:0;z-index:6;
  background:var(--butter);color:var(--on-pastel);
  font-family:var(--f-display);font-weight:700;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:4px 12px 4px 14px;border-radius:0 999px 999px 0;
}

/* ============================================================
   8. THE BAI HOC
   ============================================================ */
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px}
.lesson{
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-md);padding:26px 16px 16px;position:relative;
  box-shadow:var(--shadow-soft);
}
.lesson .tape{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-1.5deg);
  width:64px;height:17px;border-radius:3px;opacity:.85;
}
.lesson .no{font-family:var(--f-display);font-weight:700;font-size:12px;color:var(--ink-soft);letter-spacing:.1em}
.lesson h4{font-size:16px;margin-top:6px}
.lesson h4 a{text-decoration:none;color:inherit}
.lesson p{font-size:14px;color:var(--ink-soft);margin-top:7px}
.lesson .from{margin-top:12px;font-size:12px;color:var(--ink-soft);font-style:italic}
.lesson .card-tools{top:8px;right:8px}

.add-card{
  display:flex;flex-direction:column;gap:8px;
  border:2px dashed var(--line-strong);border-radius:var(--r-md);
  background:transparent;align-items:center;justify-content:center;
  min-height:150px;text-align:center;color:var(--ink-soft);width:100%;
}
.add-card span.label{font-family:var(--f-display);font-weight:600;font-size:14px}
.plus{
  width:38px;height:38px;border-radius:50%;background:var(--mint);
  display:grid;place-items:center;color:var(--on-pastel);flex:none;
}

/* ============================================================
   9. KY NIEM
   ============================================================ */
.memories{display:flex;flex-direction:column;gap:2px;position:relative;padding-left:26px}
.memories::before{
  content:"";position:absolute;left:6px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(var(--blush),var(--peri),var(--mint));border-radius:2px;opacity:.9;
}
.mem{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;position:relative}
.mem::before{
  content:"";position:absolute;left:-24px;top:26px;width:11px;height:11px;
  border-radius:50%;background:var(--surface);border:2.5px solid var(--blush);
}
.mem + .mem{border-top:1px solid var(--line)}
@media (max-width:640px){.mem{grid-template-columns:1fr;gap:10px}}
.mem .date{
  font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;padding-top:2px;
}
.mem h4{font-size:17px}
.mem h4 a{text-decoration:none;color:inherit}
.mem p{font-size:14.5px;color:var(--ink-soft);margin-top:6px;max-width:60ch}
.mem .strip{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mem .strip a{display:block;width:82px;height:60px;border-radius:8px;overflow:hidden;flex:none;background:var(--surface-2)}
.mem .strip img{width:100%;height:100%;object-fit:cover}
.mem .body-col{position:relative}
.mem .card-tools{position:static;margin-top:10px}

.pill-private{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-family:var(--f-display);font-weight:600;
  background:var(--surface-2);color:var(--ink-soft);
  padding:3px 10px;border-radius:999px;border:1px solid var(--line-strong);
}
.pill-private svg{width:12px;height:12px}

/* ============================================================
   10. THU VIEN ANH
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gallery figure{
  margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:1;background:var(--surface-2);border:1px solid var(--line-strong);
}
.gallery figure img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{
  position:absolute;inset:auto 0 0 0;padding:18px 10px 8px;
  font-size:12px;color:#fff;
  background:linear-gradient(transparent,rgba(45,35,55,.6));
}
.gallery .card-tools{top:8px;right:8px}
.gal-add{aspect-ratio:1;min-height:0}

/* ============================================================
   11. TRANG BAI VIET DON
   ============================================================ */
.single-wrap{max-width:720px;margin:0 auto;padding-inline:20px;padding-block:34px 20px}
.single-wrap .eyebrow{margin-bottom:10px}
.single-title{font-size:clamp(27px,4.6vw,40px)}
.single-meta{
  margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
}
.single-cover{margin:26px 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.entry{font-size:17px;line-height:1.75}
.entry > * + *{margin-top:1.05em}
.entry h2{font-size:24px;margin-top:1.7em}
.entry h3{font-size:20px;margin-top:1.5em}
.entry img{border-radius:var(--r-md);margin-block:1.4em}
.entry blockquote{
  margin:1.6em 0;padding:14px 20px;border-left:3px solid var(--blush);
  background:var(--accent-quiet);border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--ink-soft);font-style:italic;
}
.entry ul,.entry ol{padding-left:1.4em}
.entry li + li{margin-top:.4em}
.entry a{text-underline-offset:3px}
.entry figure{margin:1.6em 0}
.entry figcaption{font-size:13px;color:var(--ink-soft);text-align:center;margin-top:8px}

.single-foot{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
}
.single-foot .spacer{margin-left:auto}

/* ============================================================
   12. FORM DANG BAI (hop noi len)
   ============================================================ */
.sheet{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;
  background:rgba(60,40,48,.42);backdrop-filter:blur(3px);
}
.sheet.open{display:flex}
.sheet-box{
  background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line-strong);
  width:100%;max-width:620px;box-shadow:0 24px 60px -20px rgba(40,25,32,.5);
  margin-block:auto;
}
.sheet-head{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;border-bottom:1px solid var(--line);
}
.sheet-head h3{font-size:19px;margin-right:auto}
.sheet-body{padding:20px 22px}
.sheet-foot{
  padding:16px 22px;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.sheet-foot .spacer{margin-left:auto}

.field{display:flex;flex-direction:column;gap:7px}
.field + .field{margin-top:16px}
.field label{font-family:var(--f-display);font-weight:600;font-size:13.5px}
.field .hint{font-size:12.5px;color:var(--ink-soft)}
.field input[type=text],
.field input[type=date],
.field input[type=password],
.field input[type=file],
.field textarea,
.field select{
  font:inherit;color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:10px 13px;width:100%;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

.check{display:flex;align-items:flex-start;gap:10px;font-size:14px}
.check input{margin-top:4px;width:16px;height:16px;accent-color:var(--accent)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip-radio{position:relative}
.chip-radio input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;cursor:pointer}
.chip-radio span{
  display:block;padding:7px 14px;border-radius:999px;
  border:1.5px solid var(--line-strong);
  font-family:var(--f-display);font-weight:600;font-size:13.5px;
}
.chip-radio input:checked + span{background:var(--accent-quiet);border-color:var(--accent);color:var(--accent)}
.chip-radio input:focus-visible + span{outline:2.5px solid var(--accent);outline-offset:2px}

/* ---------- o chon anh tu may ---------- */
.file-pick{display:flex;flex-direction:column;gap:9px}
.file-pick input[type=file]{
  position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0);
}
.file-label{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 18px;border-radius:var(--r-md);
  border:2px dashed var(--line-strong);background:var(--paper);
  font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--ink-soft);
  cursor:pointer;text-align:center;transition:border-color .15s,color .15s,background .15s;
}
.file-label svg{width:20px;height:20px;flex:none}
.file-label:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-quiet)}
.file-pick input[type=file]:focus-visible + .file-label{outline:2.5px solid var(--accent);outline-offset:2px}
.file-pick.co-anh .file-label{border-style:solid;border-color:var(--mint);color:var(--ink)}
.file-name{font-size:13px;color:var(--ink-soft);min-height:1.2em;word-break:break-word}
.file-name.co{color:var(--ink)}

/* ---------- form dang nhap cua WordPress ---------- */
#loginform{display:flex;flex-direction:column;gap:15px;margin:0}
#loginform p{margin:0;display:flex;flex-direction:column;gap:7px}
#loginform label{
  font-family:var(--f-display);font-weight:600;font-size:13.5px;color:var(--ink);
}
#loginform input[type=text],
#loginform input[type=password]{
  font:inherit;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  padding:11px 14px;width:100%;
}
#loginform input[type=text]:focus,
#loginform input[type=password]:focus{outline:none;border-color:var(--accent)}
#loginform .login-remember{flex-direction:row;align-items:center;gap:10px}
#loginform .login-remember label{
  display:flex;align-items:center;gap:10px;font-weight:400;font-family:var(--f-body);
  font-size:14px;color:var(--ink-soft);cursor:pointer;
}
#loginform .login-remember input[type=checkbox]{
  width:17px;height:17px;margin:0;accent-color:var(--accent);flex:none;
}
#loginform .login-submit{margin-top:4px}
#loginform input[type=submit]{
  font-family:var(--f-display);font-weight:600;font-size:15px;
  background:var(--accent);color:#fff;border:0;
  padding:12px 22px;border-radius:999px;cursor:pointer;width:100%;
}
#loginform input[type=submit]:hover{filter:brightness(1.05)}
:root[data-theme="dark"] #loginform input[type=submit]{color:var(--on-pastel)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #loginform input[type=submit]{color:var(--on-pastel)}
}
.sheet-body .quen-mk{margin-top:16px;font-size:13.5px;text-align:center}
.sheet-body .quen-mk a{color:var(--ink-soft);text-decoration:none}
.sheet-body .quen-mk a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.sheet-intro{color:var(--ink-soft);font-size:14.5px;margin-bottom:20px;line-height:1.6}

/* ---------- anh dang co cua bai (khi sua) ---------- */
.anh-hien-co{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.anh-hien-co img{width:64px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}

.chip-so{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--ink-soft);
  background:var(--surface-2);border-radius:999px;padding:6px 14px;
}

/* ============================================================
   13. THONG BAO
   ============================================================ */
.flash{
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;border-radius:var(--r-md);
  font-size:14.5px;margin-top:16px;
  border:1px solid var(--line-strong);background:var(--surface);
}
.flash svg{width:18px;height:18px;flex:none}
.flash.ok{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 22%,var(--surface))}
.flash.err{border-color:var(--danger);color:var(--danger)}

/* ============================================================
   14. PHAN TRANG + CHAN TRANG
   ============================================================ */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pagination .page-numbers{
  display:grid;place-items:center;min-width:38px;height:38px;padding:0 12px;
  border-radius:999px;border:1px solid var(--line-strong);
  text-decoration:none;color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:14px;
}
.pagination .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination .page-numbers:hover:not(.current){border-color:var(--accent);color:var(--accent)}

.site-footer{
  border-top:1px solid var(--line-strong);background:var(--surface);
  margin-top:44px;padding-block:26px 40px;
}
.site-footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-soft)}
.site-footer .spacer{margin-left:auto}
.site-footer a{color:var(--ink-soft)}

.empty{
  background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:24px 26px;color:var(--ink-soft);font-size:14.5px;
}
.empty b{font-family:var(--f-display);color:var(--ink);font-size:16.5px;display:block;margin-bottom:2px}