/* =========================================================
   shared.css — สไตล์ร่วมสำหรับหน้าย่อยทุกหน้า
   ========================================================= */
   :root{
    --navy:#0d1f4e;--blue:#1a3fa0;--sky:#2563eb;
    --gold:#f0a500;--amber:#fbbf24;--teal:#0891b2;
    --green:#059669;--red:#dc2626;
    --white:#fff;--off:#f0f4ff;--muted:#64748b;--text:#1e2a3a;--border:#dde5f4;
    --radius:16px;--sh:0 2px 16px rgba(13,31,78,.09);--sh-lg:0 8px 40px rgba(13,31,78,.15);
    --accent:var(--blue);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:'Sarabun',sans-serif;background:var(--off);color:var(--text);font-size:16px;line-height:1.7;overflow-x:hidden;min-height:100vh;}
  
  /* REVEAL */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease;}
  .reveal.show{opacity:1;transform:none;}
  
  /* WRAP */
  .wrap{max-width:920px;margin:0 auto;background:rgba(255,255,255,.97);border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.18);margin-top:0;}
  
  /* PAGE HEADER */
  .page-header{padding:40px 40px 36px;position:relative;overflow:hidden;}
  .page-header::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 14px,rgba(255,255,255,.03) 14px,rgba(255,255,255,.03) 28px);}
  .page-header::after{content:'';position:absolute;right:-30px;bottom:-30px;width:200px;height:200px;background:rgba(255,255,255,.06);border-radius:50%;}
  .header-inner{position:relative;z-index:1;}
  .breadcrumb{display:flex;align-items:center;gap:7px;font-size:.8rem;opacity:.68;margin-bottom:14px;flex-wrap:wrap;}
  .breadcrumb a{color:#fff;text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}
  .breadcrumb span{opacity:.5;}
  .header-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);color:var(--amber);padding:5px 15px;border-radius:30px;font-size:.78rem;font-weight:700;letter-spacing:.05em;margin-bottom:11px;}
  .page-header h1{font-family:'Noto Serif Thai',serif;font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800;color:#fff;line-height:1.25;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.3);}
  .header-sub{font-size:.95rem;color:rgba(255,255,255,.78);}
  
  /* CLOSED BANNER */
  .closed-banner{background:#fee2e2;border-bottom:3px solid #ef4444;padding:14px 40px;display:none;align-items:center;gap:12px;}
  .closed-banner.show{display:flex;}
  .closed-banner-icon{font-size:1.5rem;}
  .closed-banner-text h3{font-size:.95rem;font-weight:700;color:#991b1b;}
  .closed-banner-text p{font-size:.84rem;color:#b91c1c;}
  
  /* BODY */
  .body{padding:32px 36px 40px;}
  
  /* BACK BTN */
  .back-btn{display:inline-flex;align-items:center;gap:7px;background:var(--off);border:1.5px solid var(--border);color:var(--accent);padding:9px 20px;border-radius:30px;font-family:inherit;font-size:.86rem;font-weight:700;cursor:pointer;text-decoration:none;margin-bottom:26px;transition:all .2s;}
  .back-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
  
  /* INFO CARDS */
  .info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px;margin-bottom:22px;}
  .info-card{background:#fff;border-radius:14px;border-left:5px solid var(--accent);box-shadow:var(--sh);padding:17px 20px;transition:transform .2s,box-shadow .2s;}
  .info-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);}
  .info-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .info-card-icon{width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;background:linear-gradient(135deg,var(--accent),var(--sky));color:#fff;}
  .info-card h3{font-size:.9rem;font-weight:700;color:var(--navy);}
  .info-card p{font-size:.84rem;color:#4b5563;line-height:1.6;}
  .info-card a{color:var(--accent);font-weight:600;text-decoration:none;}
  
  /* SECTION ROW (2 cards) */
  .section-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin-bottom:22px;}
  .section-card{background:#fff;border-radius:14px;border-left:5px solid var(--accent);box-shadow:var(--sh);padding:20px 22px;transition:transform .2s,box-shadow .2s;}
  .section-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);}
  .section-card-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
  .section-card-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;background:linear-gradient(135deg,var(--accent),var(--sky));color:#fff;}
  .section-card h3{font-size:.92rem;font-weight:700;color:var(--navy);line-height:1.4;}
  .section-card p{font-size:.84rem;color:#4b5563;line-height:1.6;margin-bottom:12px;}
  
  /* RULE SECTION (single) */
  .rule-box{background:#fff;border-radius:14px;border-left:5px solid var(--accent);box-shadow:var(--sh);padding:20px 22px;margin-bottom:22px;display:none;}
  .rule-box.show{display:block;}
  .rule-box-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
  .rule-box-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;background:linear-gradient(135deg,var(--accent),var(--sky));color:#fff;}
  .rule-box h3{font-size:.95rem;font-weight:700;color:var(--navy);}
  .rule-box p{font-size:.86rem;color:#4b5563;margin-bottom:12px;}
  
  /* LINK BUTTONS */
  .lnk-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:25px;font-size:.84rem;font-weight:700;text-decoration:none;transition:filter .2s,transform .2s;}
  .lnk-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
  .lnk-btn.blue{background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;}
  .lnk-btn.teal{background:linear-gradient(135deg,var(--teal),#06b6d4);color:#fff;}
  .lnk-btn.green{background:linear-gradient(135deg,var(--green),#10b981);color:#fff;}
  
  /* DOCS SECTION */
  .docs-wrap{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:16px;padding:26px;border-left:5px solid var(--teal);margin-bottom:22px;}
  .docs-head{display:flex;align-items:center;gap:9px;font-size:1rem;font-weight:700;color:#0c4a6e;margin-bottom:18px;}
  .docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;}
  .doc-card{background:#fff;border-radius:12px;padding:18px;border:2px solid transparent;box-shadow:0 2px 10px rgba(8,145,178,.07);transition:all .22s;display:flex;flex-direction:column;gap:9px;position:relative;overflow:hidden;}
  .doc-card::after{content:'📄';font-size:1.3rem;position:absolute;top:12px;right:12px;opacity:.3;}
  .doc-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 8px 22px rgba(8,145,178,.14);}
  .doc-card h4{font-size:.88rem;font-weight:700;color:#0c4a6e;line-height:1.4;padding-right:22px;}
  .doc-card p{font-size:.78rem;color:var(--muted);flex:1;}
  .doc-btn{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;background:linear-gradient(135deg,var(--teal),#0891b2);color:#fff;padding:7px 14px;border-radius:18px;font-size:.78rem;font-weight:700;text-decoration:none;transition:filter .2s,transform .2s;}
  .doc-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
  .doc-btn.disabled{background:#cbd5e1;pointer-events:none;cursor:not-allowed;}
  .doc-btn .spin{display:none;}
  .doc-btn.loading .btn-text{display:none;}
  .doc-btn.loading .spin{display:inline;}
  
  /* TIP BOX */
  .tip-box{background:linear-gradient(135deg,#fef3c7,#fef9c3);border-left:5px solid var(--gold);border-radius:10px;padding:16px 18px;margin-top:16px;position:relative;overflow:hidden;}
  .tip-box::before{content:'💡';font-size:1.2rem;position:absolute;top:12px;right:14px;opacity:.5;}
  .tip-box h4{font-size:.88rem;font-weight:700;color:#92400e;margin-bottom:7px;}
  .tip-box ul{margin-left:17px;}
  .tip-box li{font-size:.84rem;color:#78350f;margin-bottom:3px;}
  
  /* CONTACT */
  .ct-wrap{background:linear-gradient(135deg,var(--navy),var(--blue));border-radius:16px;padding:26px 28px;color:#fff;}
  .ct-wrap h3{font-size:1.05rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
  .ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:11px;}
  .ct-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:11px;padding:15px;transition:background .2s;}
  .ct-card:hover{background:rgba(255,255,255,.18);}
  .ct-card h5{font-size:.76rem;opacity:.62;margin-bottom:6px;}
  .ct-card p{font-size:.86rem;font-weight:500;line-height:1.7;}
  .ct-card a{color:var(--amber);text-decoration:none;}
  .ct-card a:hover{text-decoration:underline;}
  
  /* MODAL */
  .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s;}
  .modal-bg.show{opacity:1;pointer-events:all;}
  .modal{background:#fff;border-radius:16px;padding:30px;max-width:400px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.25);transform:translateY(16px);transition:transform .3s;}
  .modal-bg.show .modal{transform:translateY(0);}
  .modal h2{color:#dc2626;font-size:1.1rem;margin-bottom:10px;}
  .modal p{color:#374151;font-size:.9rem;margin-bottom:18px;line-height:1.6;}
  .modal-btn{padding:10px 24px;border-radius:25px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--blue),var(--sky));color:#fff;font-family:inherit;font-size:.9rem;font-weight:700;transition:filter .2s;}
  .modal-btn:hover{filter:brightness(1.08);}
  
  @media(max-width:640px){
    .page-header{padding:26px 20px;}
    .body{padding:22px 18px 32px;}
    .docs-wrap{padding:18px;}
    .closed-banner{padding:12px 18px;}
    .ct-wrap{padding:22px 18px;}
  }
  ::-webkit-scrollbar{width:5px;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}