:root{
    --pink:#9b1c4b;
    --purple:#5b3b8c;
    --blue:#1f5f9b;
    --teal:#0f7b7b;
    --coral:#a85b00;
    --dark:#1f2a37;
    --grey:#6c7293;
    --bg:#f6f8fb;
    --card:#ffffff;
    --shadow:0 10px 30px rgba(91,59,140,.15);
    --grad:linear-gradient(120deg,#9b1c4b 0%,#5b3b8c 45%,#1f5f9b 100%);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'IBM Plex Sans Thai','Sarabun',system-ui,-apple-system,sans-serif;color:var(--dark);background:var(--bg);line-height:1.7}
  a{text-decoration:none;color:inherit}
  svg{display:block}

  /* ---------- TOP INFO BAR ---------- */
  .topbar{background:#1f2a37;color:#c9d4e0;font-size:.78rem}
  .topbar-in{max-width:1200px;margin:0 auto;padding:7px 24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .topbar .tb-right{color:#8fa3b8}
  @media(max-width:560px){.topbar .tb-right{display:none}}

  /* ---------- HEADER ---------- */
  header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(91,59,140,.10)}
  .nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:14px 24px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem;white-space:nowrap}
  .logo .mark{width:44px;height:44px;border-radius:14px;background:var(--grad);display:grid;place-items:center;box-shadow:var(--shadow)}
  .logo .mark svg{width:26px;height:26px}
  .logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .logo span{font-size:.7rem;color:var(--grey);display:block;font-weight:400;letter-spacing:1px}

  nav ul{display:flex;list-style:none;gap:6px;margin-left:8px}
  nav ul a{padding:9px 16px;border-radius:10px;font-weight:500;font-size:.95rem;transition:.25s;color:var(--dark)}
  nav ul a:hover{background:rgba(91,59,140,.12);color:var(--purple)}

  /* ---------- SEARCH ---------- */
  .search{margin-left:auto;position:relative;flex:1;max-width:280px}
  .search input{width:100%;padding:10px 42px 10px 18px;border-radius:12px;border:2px solid transparent;background:#eef2f7;font-family:inherit;font-size:.9rem;outline:none;transition:.25s}
  .search input:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(91,59,140,.12)}
  .search .ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--purple);font-size:1.1rem}
  .search-results{position:absolute;top:52px;left:0;right:0;background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:none;max-height:340px;overflow-y:auto}
  .search-results.show{display:block}
  .search-results a{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid #eef2f7;font-size:.9rem}
  .search-results a:hover{background:#f7f9fc}
  .search-results .mini{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center}
  .search-results .mini svg{width:20px;height:20px}
  .search-results .tag{font-size:.7rem;color:#fff;background:var(--purple);padding:2px 8px;border-radius:20px;margin-left:auto}
  .search-results .empty{padding:18px;color:var(--grey);text-align:center}

  .auth{display:flex;gap:8px}
  .btn{padding:9px 18px;border-radius:10px;font-weight:600;font-size:.9rem;cursor:pointer;border:none;font-family:inherit;transition:.25s;white-space:nowrap}
  .btn-ghost{background:transparent;border:2px solid var(--purple);color:var(--purple)}
  .btn-ghost:hover{background:var(--purple);color:#fff}
  .btn-fill{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
  .btn-fill:hover{transform:translateY(-2px)}
  .burger{display:none;font-size:1.6rem;cursor:pointer;color:var(--purple);background:none;border:none}

  /* ---------- SLIDER / HERO ---------- */
  .slider{position:relative;max-width:1200px;margin:28px auto 0;padding:0 24px}
  .slides{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);height:400px}
  .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s;display:flex;align-items:center;padding:0 60px;color:#fff;background-size:cover;background-position:center right}
  .slide.active{opacity:1}
  /* dark scrim on the LEFT so white text over the illustration stays readable */
  .slide::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(31,42,55,.86) 0%,rgba(31,42,55,.62) 32%,rgba(31,42,55,.12) 55%,rgba(31,42,55,0) 72%);pointer-events:none}
  .slide:nth-child(1){background-image:url('phirom-hero/hero1.jpg')}
  .slide:nth-child(2){background-image:url('phirom-hero/hero2.jpg')}
  .slide:nth-child(3){background-image:url('phirom-hero/hero3.jpg')}
  .slide:nth-child(4){background-image:url('phirom-hero/hero4.jpg')}
  .slide-inner{max-width:480px;z-index:2;position:relative}
  .slide h2{font-size:2.4rem;font-weight:700;margin-bottom:12px;line-height:1.25;text-shadow:0 2px 14px rgba(31,42,55,.45)}
  .slide p{font-size:1.05rem;opacity:.96;margin-bottom:20px;text-shadow:0 1px 8px rgba(31,42,55,.4)}
  .slide .btn-fill{background:#fff;color:var(--pink)}
  .dots{display:flex;gap:10px;justify-content:center;margin-top:18px}
  .dots button{width:12px;height:12px;border-radius:50%;border:none;background:#d7dee8;cursor:pointer;transition:.25s}
  .dots button.active{background:var(--purple);width:32px;border-radius:8px}
  .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.3);color:#fff;font-size:1.4rem;cursor:pointer;backdrop-filter:blur(4px);transition:.25s}
  .arrow:hover{background:rgba(255,255,255,.55)}
  .arrow.prev{left:40px}.arrow.next{right:40px}

  /* ---------- STATS STRIP ---------- */
  .stats{max-width:1200px;margin:26px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .stats > div{background:#fff;border:1px solid #e6ebf1;border-radius:14px;padding:16px 12px;text-align:center;box-shadow:0 4px 14px rgba(31,42,55,.05)}
  .stats b{display:block;font-size:1.55rem;line-height:1.2;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .stats span{font-size:.8rem;color:var(--grey)}
  @media(max-width:700px){.stats{grid-template-columns:1fr 1fr}}

  /* ---------- SECTIONS ---------- */
  section{max-width:1200px;margin:0 auto;padding:60px 24px}
  .section-head{text-align:center;margin-bottom:40px}
  .section-head .eyebrow{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);background:rgba(91,59,140,.07);border:1px solid rgba(91,59,140,.18);padding:5px 14px;border-radius:999px;margin-bottom:12px}
  .section-head h3{font-size:2rem;font-weight:700;margin-bottom:8px}
  .section-head h3 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .section-head p{color:var(--grey)}

  .cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:36px}
  .chip{padding:9px 20px;border-radius:10px;background:#fff;border:2px solid #e2e8f0;font-weight:500;font-size:.9rem;cursor:pointer;transition:.25s}
  .chip:hover,.chip.active{background:var(--grad);color:#fff;border-color:transparent}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
  /* ---- การ์ดบทความ: สไตล์ clean / medical-education (Osmosis-like) ---- */
  .card{background:var(--card);border-radius:18px;border:1px solid #e3eaf4;overflow:hidden;box-shadow:0 6px 20px rgba(19,41,75,.06);transition:.3s;cursor:pointer;display:flex;flex-direction:column}
  .card:hover{transform:translateY(-8px);box-shadow:0 18px 38px rgba(19,41,75,.14);border-color:#c8d8ef}
  /* แผงภาพประกอบโทนฟ้าอ่อน + ลายจุดจาง ๆ เหมือนกระดานสื่อการสอน */
  .card .thumb{height:165px;display:grid;place-items:center;position:relative;border-bottom:1px solid #e8eef7}
  .card .thumb svg{width:96px;height:96px;padding:17px;border-radius:50%;box-shadow:0 10px 22px rgba(19,41,75,.20),inset 0 -3px 8px rgba(0,0,0,.12);transition:.3s}
  .card:hover .thumb svg{transform:scale(1.06)}
  .card .thumb .badge{position:absolute;top:13px;left:13px;background:#fff;color:#1f5f9b;border:1px solid #d6e2f2;padding:3px 11px;border-radius:20px;font-size:.72rem;font-weight:600;box-shadow:0 2px 8px rgba(19,41,75,.08)}
  .card .thumb .badge.full{left:auto;right:13px;background:#13294b;color:#fff;border-color:#13294b}
  .card .thumb .fav{position:absolute;bottom:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid #e3eaf4;background:#fff;color:var(--pink);font-size:1.1rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 10px rgba(19,41,75,.14);transition:.25s}
  .card .thumb .fav:hover{transform:scale(1.15)}
  .card .thumb .fav.on{background:var(--pink);color:#fff;border-color:var(--pink)}
  .c1{background:linear-gradient(135deg,#9b1c4b,#5b3b8c)}
  .c2{background:linear-gradient(135deg,#5b3b8c,#1f5f9b)}
  .c3{background:linear-gradient(135deg,#0f7b7b,#1f5f9b)}
  .c4{background:linear-gradient(135deg,#a85b00,#9b1c4b)}
  .c5{background:linear-gradient(135deg,#1f5f9b,#0f7b7b)}
  .c6{background:linear-gradient(135deg,#5b3b8c,#9b1c4b)}
  /* บนการ์ด: พื้นหลัง thumb เป็นฟ้าอ่อนทุกหมวด ภาพประกอบยังคงสีตามหมวดเดิม (อยู่ใน svg) */
  .card .thumb.c1,.card .thumb.c2,.card .thumb.c3,.card .thumb.c4,.card .thumb.c5,.card .thumb.c6{
    background:
      radial-gradient(rgba(31,95,155,.10) 1.3px,transparent 1.3px),
      linear-gradient(180deg,#f0f5fc,#e4edf9);
    background-size:20px 20px,auto;
  }
  .card .thumb.c1 svg{background:linear-gradient(135deg,#9b1c4b,#5b3b8c)}
  .card .thumb.c2 svg{background:linear-gradient(135deg,#5b3b8c,#1f5f9b)}
  .card .thumb.c3 svg{background:linear-gradient(135deg,#0f7b7b,#1f5f9b)}
  .card .thumb.c4 svg{background:linear-gradient(135deg,#a85b00,#9b1c4b)}
  .card .thumb.c5 svg{background:linear-gradient(135deg,#1f5f9b,#0f7b7b)}
  .card .thumb.c6 svg{background:linear-gradient(135deg,#5b3b8c,#9b1c4b)}
  /* ปกรูปภาพ (cover) แทนไอคอน SVG เมื่อบทความมี img */
  .card .thumb img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
  .card:hover .thumb img.cover{transform:scale(1.04)}
  .card .thumb .badge,.card .thumb .fav{z-index:2}
  .card .body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
  .card .body h4{font-size:1.14rem;font-weight:700;color:#13294b;line-height:1.45;margin-bottom:7px}
  /* breadcrumb ใต้ชื่อเรื่อง แบบหน้าบทเรียน */
  .card .crumbs{display:flex;flex-wrap:wrap;align-items:center;row-gap:2px;font-size:.73rem;color:#5b6b8c;font-weight:500;margin-bottom:10px}
  .card .crumbs span:first-child{color:#1f5f9b;font-weight:700}
  .card .crumbs span+span::before{content:"›";margin:0 6px;color:#9fb0cc;font-weight:400}
  .card .cat-label{display:none}
  .card .body p{color:var(--grey);font-size:.88rem;flex:1}
  .card .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid #edf1f8;font-size:.76rem;color:#5b6b8c}
  .card .meta .views{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap}
  .card .meta .views svg{width:15px;height:15px;color:#7e90b3}
  .card .meta .rtime{white-space:nowrap;margin-left:auto}
  .card .meta .read{flex-basis:100%;text-align:center;background:#2563eb;color:#fff;font-weight:600;font-size:.82rem;padding:9px 14px;border-radius:11px;white-space:nowrap;margin-top:4px;box-shadow:0 4px 12px rgba(37,99,235,.28);transition:.25s}
  .card:hover .meta .read{background:#1d4fd7;transform:translateY(-1px)}

  .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
  .feat{background:#fff;border-radius:14px;border:1px solid #e6ebf1;padding:30px 24px;text-align:center;box-shadow:0 6px 22px rgba(31,42,55,.06);transition:.3s}
  .feat:hover{transform:translateY(-6px)}
  .feat .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin:0 auto 14px}
  .feat .ic svg{width:30px;height:30px}
  .feat h4{margin-bottom:8px}
  .feat p{color:var(--grey);font-size:.9rem}

  .cta{background:var(--grad);border-radius:18px;padding:56px 40px;text-align:center;color:#fff;box-shadow:var(--shadow)}
  .cta h3{font-size:2rem;margin-bottom:12px}
  .cta p{opacity:.95;margin-bottom:24px;max-width:520px;margin-inline:auto}
  .cta .btn-fill{background:#fff;color:var(--purple)}

  footer{background:var(--dark);color:#cfd2e6;margin-top:40px}
  .foot{max-width:1200px;margin:0 auto;padding:50px 24px 24px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
  .foot h5{color:#fff;margin-bottom:14px;font-size:1rem}
  .foot a{display:block;padding:5px 0;font-size:.9rem;color:#aeb2cd;transition:.2s}
  .foot a:hover{color:var(--pink)}
  .foot .logo{color:#fff;margin-bottom:14px}
  .foot .logo b{-webkit-text-fill-color:#fff}
  .foot p{font-size:.88rem;color:#9296b5}
  .copy{text-align:center;padding:18px;border-top:1px solid #33425a;font-size:.85rem;color:#8488a8}

  /* ---------- MODAL ---------- */
  .overlay{position:fixed;inset:0;background:rgba(43,45,66,.55);backdrop-filter:blur(4px);display:none;place-items:center;z-index:200;padding:20px}
  .overlay.show{display:grid}
  .modal{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:38px 34px;box-shadow:0 30px 60px rgba(0,0,0,.3);position:relative;animation:pop .35s}
  @keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
  .modal .close{position:absolute;top:18px;right:20px;font-size:1.5rem;cursor:pointer;color:var(--grey);background:none;border:none}
  .modal .mhead{text-align:center;margin-bottom:24px}
  .modal .mhead .mark{width:56px;height:56px;border-radius:16px;background:var(--grad);display:grid;place-items:center;margin:0 auto 14px}
  .modal .mhead .mark svg{width:32px;height:32px}
  .modal h3{font-size:1.5rem}
  .modal p{color:var(--grey);font-size:.9rem}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:.85rem;font-weight:500;margin-bottom:6px}
  .field input{width:100%;padding:12px 16px;border-radius:14px;border:2px solid #e2e8f0;font-family:inherit;outline:none;transition:.2s}
  .field input:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(91,59,140,.1)}
  .modal .btn-fill{width:100%;padding:13px;margin-top:6px}
  .switch{text-align:center;margin-top:18px;font-size:.9rem;color:var(--grey)}
  .switch a{color:var(--purple);font-weight:600;cursor:pointer}

  /* ---------- BOOKSHELF (สื่อการสอน) — uniform grid, each book on its own ledge ---------- */
  #media{background:linear-gradient(180deg,transparent,rgba(91,59,140,.05) 30%,transparent)}
  .bookshelf{max-width:940px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:36px 26px;align-items:start;justify-items:center}
  .slot{display:flex;flex-direction:column;align-items:center;width:100%}
  .book{width:100%;max-width:198px;border-radius:5px 11px 11px 5px;position:relative;cursor:pointer;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;overflow:hidden;background:#fff;box-shadow:inset 8px 0 12px -8px rgba(0,0,0,.35),7px 9px 20px rgba(43,45,66,.26);border:1px solid rgba(91,59,140,.18)}
  .book:hover{transform:translateY(-12px);box-shadow:inset 8px 0 12px -8px rgba(0,0,0,.35),12px 24px 34px rgba(43,45,66,.34)}
  .book::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.55);z-index:3;mix-blend-mode:overlay}
  .book .pages{position:absolute;right:-5px;top:6px;bottom:6px;width:5px;background:repeating-linear-gradient(180deg,#fff 0 2px,#e6e0ef 2px 4px);border-radius:0 3px 3px 0;box-shadow:2px 1px 4px rgba(0,0,0,.18)}
  /* every cover the SAME size: fixed 16/9 LANDSCAPE box (matches the actual cover art) */
  .book .cover{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;position:relative;filter:saturate(.97)}
  .book .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(91,59,140,.16),rgba(31,95,155,.05) 50%,rgba(155,28,75,.14));mix-blend-mode:multiply}
  .book .binfo{padding:9px 12px 11px 16px;color:#fff;display:flex;flex-direction:column;gap:3px;flex:1;min-height:60px}
  .book .binfo h4{font-size:.78rem;line-height:1.3;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.2)}
  .book .bmeta{font-size:.66rem;opacity:.92;display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:3px}
  .book .bmeta .pdf{background:rgba(255,255,255,.92);color:#c0392b;font-weight:700;font-size:.6rem;padding:1px 7px;border-radius:5px;letter-spacing:.5px}
  .book .dl{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--purple);display:grid;place-items:center;font-size:.95rem;box-shadow:0 3px 9px rgba(0,0,0,.3);transition:.25s;z-index:4;text-decoration:none}
  .book .dl:hover{transform:scale(1.18);background:#fff;color:var(--pink)}
  /* per-book wooden ledge — guarantees no overlap at any width */
  .slot .board{width:calc(100% + 18px);max-width:216px;height:14px;margin-top:0;background:linear-gradient(180deg,#c9925e,#9a6a3e 55%,#7d5430);border-radius:3px 3px 4px 4px;box-shadow:0 14px 22px rgba(125,84,48,.32),inset 0 2px 3px rgba(255,255,255,.4)}
  @media(max-width:900px){
    .bookshelf{grid-template-columns:repeat(3,1fr);gap:30px 20px}
  }

  /* ---------- ARTICLE READER ---------- */
  .reader{position:fixed;inset:0;background:var(--bg);z-index:300;display:none;overflow-y:auto}
  .reader.show{display:block}
  .reader-hero{padding:54px 24px 90px;color:#fff;position:relative}
  .reader-hero .inner{max-width:760px;margin:0 auto}
  .reader-hero .rbadge{display:inline-block;background:rgba(255,255,255,.92);color:var(--purple);padding:5px 16px;border-radius:20px;font-size:.8rem;font-weight:600;margin-bottom:14px}
  .reader-hero h2{font-size:2rem;line-height:1.3;max-width:640px}
  .reader-hero .rmeta{margin-top:12px;opacity:.92;font-size:.9rem;display:flex;gap:18px;flex-wrap:wrap}
  .reader-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;max-width:1160px;margin:0 auto;padding:16px 24px 0}
  .rbtn{width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.25);color:#fff;font-size:1.25rem;cursor:pointer;backdrop-filter:blur(6px);transition:.25s;display:grid;place-items:center}
  .rbtn:hover{background:rgba(255,255,255,.5)}
  .rbtn.saved{background:#fff;color:var(--pink)}
  .reader-body{max-width:760px;margin:-50px auto 70px;background:#fff;border-radius:26px;padding:44px 46px;box-shadow:var(--shadow);position:relative}
  .reader-body h3{font-size:1.3rem;margin:28px 0 10px;color:var(--purple)}
  .reader-body h3:first-child{margin-top:0}
  .reader-body p{margin-bottom:14px;color:#3d3f56}
  .reader-body ul,.reader-body ol{margin:0 0 16px 22px;color:#3d3f56}
  .reader-body li{margin-bottom:6px}
  .reader-body .note{background:#faeef3;border-left:4px solid var(--pink);border-radius:0 14px 14px 0;padding:14px 18px;margin:18px 0;font-size:.92rem;color:#5a4a55}
  .reader-body .disclaim{margin-top:30px;padding-top:18px;border-top:1px dashed #e2e8f0;font-size:.82rem;color:var(--grey)}
  .reader-nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px}
  .reader-nav .btn{flex:none}
  @media(max-width:560px){
    .reader-hero h2{font-size:1.45rem}
    .reader-body{margin:-44px 14px 50px;padding:28px 22px}
  }

  /* ---------- LOGGED-IN USER ---------- */
  .userbox{display:none;align-items:center;gap:10px}
  .userbox.show{display:flex}
  .userbox .avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:600}
  .userbox .uname{font-weight:600;font-size:.9rem;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .userbox .btn-ghost{padding:7px 14px;font-size:.82rem}
  .field .err{color:#e63946;font-size:.8rem;margin-top:4px;display:none}

  .reveal{opacity:0;transform:translateY(30px);transition:.7s}
  .reveal.in{opacity:1;transform:none}

  @media(max-width:920px){
    .burger{display:block;order:3;margin-left:auto}
    .nav{flex-wrap:wrap;gap:12px}
    .logo{font-size:1.1rem}
    /* nav turns into a full-width dropdown panel */
    nav#menu{display:none;flex-basis:100%;order:5}
    nav#menu.open{display:block}
    nav#menu ul{flex-direction:column;gap:4px;margin:0}
    nav#menu ul a{display:block;padding:13px 16px;border-radius:12px;background:#f6f8fb;font-size:1rem}
    nav#menu ul a:hover{background:rgba(91,59,140,.12)}
    .search{display:none;margin-left:0}
    .search.mobile{display:block;flex-basis:100%;order:4;max-width:none}
    .auth{order:2}
    .userbox{order:2}
    .slide h2{font-size:1.7rem}
    .slide{padding:0 30px}
    .arrow{width:38px;height:38px;font-size:1.2rem}
    .arrow.prev{left:14px}.arrow.next{right:14px}
    .foot{grid-template-columns:1fr 1fr}
    section{padding:46px 20px}
    .section-head{margin-bottom:28px}
    .section-head h3{font-size:1.6rem}
  }
  @media(max-width:560px){
    body{font-size:15.5px}
    .auth .btn-ghost{display:none}
    .auth .btn,.userbox .btn{padding:8px 14px;font-size:.85rem}
    .foot{grid-template-columns:1fr 1fr;gap:22px}
    .copy{padding:18px 20px}
    /* hero: taller text-first layout, image sits behind a strong scrim */
    .slider{margin-top:16px;padding:0 16px}
    .slides{height:330px;border-radius:14px}
    .slide{padding:0 22px;align-items:flex-end}
    .slide-inner{max-width:100%;padding-bottom:30px}
    .slide h2{font-size:1.5rem;line-height:1.3}
    .slide p{font-size:.92rem;margin-bottom:16px}
    .slide::before{background:linear-gradient(0deg,rgba(31,42,55,.92) 0%,rgba(31,42,55,.55) 45%,rgba(31,42,55,.25) 100%)}
    .arrow{top:auto;bottom:14px;transform:none}
    .arrow.prev{left:auto;right:62px}.arrow.next{right:16px}
    .dots{margin-top:14px}
    /* stats: 2-up compact */
    .stats{gap:10px;margin-top:18px;padding:0 16px}
    .stats > div{padding:13px 8px}
    .stats b{font-size:1.3rem}
    .stats span{font-size:.72rem}
    section{padding:38px 16px}
    .section-head h3{font-size:1.42rem}
    .section-head p{font-size:.9rem}
    .section-head .eyebrow{font-size:.66rem}
    /* article cards: compact horizontal layout — small icon left, text right */
    .grid{grid-template-columns:1fr;gap:14px}
    .card{flex-direction:row;align-items:stretch;border-radius:16px}
    .card:hover{transform:none}
    .card .thumb{width:96px;min-width:96px;height:auto;min-height:118px;border-bottom:none;border-right:1px solid #e8eef7}
    .card .thumb svg{width:54px;height:54px;padding:10px}
    .card .thumb .badge{display:none}
    .card .thumb .fav{width:28px;height:28px;font-size:.85rem;bottom:8px;right:auto;left:50%;transform:translateX(-50%)}
    .card .thumb .fav:hover{transform:translateX(-50%) scale(1.1)}
    .card .body{padding:13px 15px}
    .card .body h4{font-size:.98rem;margin-bottom:4px;line-height:1.4}
    .card .crumbs{font-size:.66rem;margin-bottom:7px}
    .card .crumbs span+span::before{margin:0 4px}
    .card .body p{font-size:.8rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .card .meta{margin-top:9px;padding-top:9px;font-size:.68rem;gap:8px}
    .card .meta .read{font-size:.7rem;padding:5px 11px;border-radius:8px}
    /* category chips: horizontal scroll strip */
    .cats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:8px;margin-bottom:22px;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .cats::-webkit-scrollbar{display:none}
    .chip{flex:none;padding:8px 16px;font-size:.85rem}
    /* bookshelf: 2 uniform books per row — grid keeps them apart, no overlap */
    .bookshelf{grid-template-columns:1fr 1fr;gap:26px 14px}
    .book{max-width:172px}
    .slot .board{max-width:188px}
    .book .binfo h4{font-size:.74rem}
    /* features single column */
    .features{gap:16px}
    .feat{padding:24px 20px}
    /* CTA + modal padding */
    .cta{padding:40px 24px}
    .cta h3{font-size:1.5rem}
    .modal{padding:30px 22px}
  }

/* ---------- หน้าแรก: บทความล่าสุด 4 อันในแถวเดียว (เฉพาะ #articleGrid) ---------- */
#articleGrid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){#articleGrid{grid-template-columns:repeat(2,1fr)}}
/* มือถือ: การ์ดแนวตั้งแบบเดสก์ท็อป แต่เลื่อนซ้าย-ขวาได้ (carousel/swipe) */
@media(max-width:560px){
  #articleGrid{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding-left:16px;padding:4px 16px 16px;margin:0 -16px;
    scrollbar-width:none;
  }
  #articleGrid::-webkit-scrollbar{display:none}
  #articleGrid .card{
    flex:0 0 80%;max-width:290px;scroll-snap-align:start;
    flex-direction:column;align-items:stretch;border-radius:18px;
  }
  #articleGrid .card .thumb{width:auto;min-width:0;height:158px;min-height:0;border-right:none;border-bottom:1px solid #e8eef7}
  #articleGrid .card .thumb svg{width:92px;height:92px;padding:16px}
  #articleGrid .card .thumb .badge{display:block}
  #articleGrid .card .thumb .fav{width:34px;height:34px;font-size:1.05rem;bottom:12px;right:12px;left:auto;transform:none}
  #articleGrid .card .thumb .fav:hover{transform:scale(1.12)}
  #articleGrid .card .body{padding:16px 18px 18px}
  #articleGrid .card .body h4{font-size:1.04rem;margin-bottom:6px;line-height:1.45}
  #articleGrid .card .crumbs{font-size:.68rem;margin-bottom:9px}
  #articleGrid .card .body p{font-size:.83rem;line-height:1.55;-webkit-line-clamp:3}
  #articleGrid .card .meta{margin-top:13px;padding-top:12px;font-size:.72rem}
  #articleGrid .card .meta .read{font-size:.78rem;padding:8px 13px;border-radius:10px}
}

/* ---------- หน้าแรก: ย่อทั้งบทความ เหลือแค่หัวข้อ ---------- */
.grid.compact .card .thumb{display:none}
.grid.compact .card .body{padding:13px 16px}
.grid.compact .card .body p,
.grid.compact .card .body .meta,
.grid.compact .card .crumbs,
.grid.compact .card .cat-label{display:none}
.grid.compact .card .body h4{margin:0;font-size:1rem;line-height:1.4}
.grid.compact .card{box-shadow:0 3px 12px rgba(31,42,55,.06)}
.grid.compact .card:hover{transform:translateY(-3px)}