/* ============================================================
   ระบบตั้งชื่อมงคล — MuMastery
   ธีมพรีเมียม: น้ำเงินไพลิน (sapphire) + ทองแชมเปญ
   Full-width web, responsive ลงมือถือ
   ============================================================ */

:root {
    --ink:#0a1230; --navy-900:#0f1b47; --navy-800:#16265f; --navy-700:#1e3378;
    --sapphire:#2547a0; --azure:#3d6fd6; --sky:#6ba3f5; --sky-soft:#a9c9fb; --mist:#e8f1fe;
    --gold:#c9a24b; --gold-light:#e6cd8a; --gold-pale:#f5ecd4;
    --white:#ffffff; --paper:#fbfcfe; --line:#dce5f2; --line-soft:#eef3fa;
    --slate-500:#5a6b8c; --slate-400:#8695b3; --slate-700:#2c3a5a;
    --green:#1a9d6b; --amber:#d98b1f; --red:#d0455f;
    --serif:'Cormorant Garamond','Noto Serif Thai',Georgia,serif;
    --sans:'Noto Sans Thai','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --shadow-xs:0 1px 2px rgba(15,27,71,.05); --shadow-sm:0 2px 12px rgba(15,27,71,.06);
    --shadow-md:0 10px 40px rgba(15,27,71,.10); --shadow-lg:0 24px 70px rgba(15,27,71,.16);
    --shadow-gold:0 8px 30px rgba(201,162,75,.25);
    --radius-sm:10px; --radius:16px; --radius-lg:28px; --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--paper);color:var(--slate-700);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.serif{font-family:var(--serif);}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:100;background:rgba(251,252,254,.85);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft);}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(140deg,var(--navy-800),var(--sapphire));display:grid;place-items:center;box-shadow:var(--shadow-sm);overflow:hidden;}
.brand-mark::after{content:'✦';color:var(--gold-light);font-size:20px;}
.brand-name{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:.5px;color:var(--navy-900);line-height:1;}
.brand-name small{display:block;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-top:3px;}
.topnav{display:flex;align-items:center;gap:2px;margin-left:auto;}
.topnav a{padding:10px 14px;font-size:14.5px;font-weight:500;color:var(--slate-500);border-radius:10px;transition:color .2s,background .2s;position:relative;white-space:nowrap;}
.topnav a:hover{color:var(--navy-800);background:var(--line-soft);}
.topnav a.active{color:var(--navy-900);font-weight:600;}
.topnav a.active::after{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--gold);border-radius:2px;}
.topnav-admin{color:var(--gold)!important;}
.topnav-mobile-only{display:none;}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.credit-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:var(--white);border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;color:var(--navy-800);box-shadow:var(--shadow-xs);transition:border-color .2s,box-shadow .2s;white-space:nowrap;}
.credit-pill:hover{border-color:var(--gold-light);box-shadow:var(--shadow-gold);}
.credit-pill .dot{color:var(--gold);}

/* USER MENU (dropdown) */
.user-menu{position:relative;}
.user-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 5px;background:var(--white);border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:border-color .2s,box-shadow .2s;}
.user-btn:hover{border-color:var(--gold-light);box-shadow:var(--shadow-xs);}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(140deg,var(--navy-800),var(--sapphire));color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:15px;font-weight:600;}
.user-caret{color:var(--slate-400);font-size:11px;transition:transform .2s;}
.user-menu.open .user-caret{transform:rotate(180deg);}
.user-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:220px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:110;}
.user-menu.open .user-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.ud-head{padding:12px 14px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:6px;}
.ud-name{font-weight:600;color:var(--navy-900);font-size:15px;}
.ud-code{font-family:var(--serif);font-size:12px;color:var(--slate-400);letter-spacing:.5px;margin-top:2px;}
.user-dropdown a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:9px;font-size:14.5px;color:var(--slate-700);transition:background .15s,color .15s;}
.user-dropdown a:hover{background:var(--mist);color:var(--navy-900);}
.ud-icon{font-size:15px;width:18px;text-align:center;color:var(--slate-400);}
.user-dropdown a:hover .ud-icon{color:var(--sapphire);}
.ud-admin{color:var(--gold-dark)!important;}
.ud-admin .ud-icon{color:var(--gold)!important;}
.ud-logout{color:var(--red)!important;}
.ud-logout .ud-icon{color:var(--red)!important;}
.ud-divider{height:1px;background:var(--line-soft);margin:6px 0;}

/* TABLET: ย่อ nav ให้พอดี ก่อนถึง hamburger */
@media (max-width:1080px){
.topbar-inner{gap:14px;padding:0 24px;}
.topnav a{padding:9px 11px;font-size:14px;}
.topnav a.active::after{left:11px;right:11px;}
.credit-pill .cp-label{display:none;}
.credit-pill{padding:9px 13px;}
.brand-name{font-size:23px;}
}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border:none;border-radius:12px;font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s;white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,var(--navy-800),var(--sapphire));color:var(--white);box-shadow:var(--shadow-md);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy-900);box-shadow:var(--shadow-gold);}
.btn-gold:hover{transform:translateY(-2px);}
.btn-outline{background:transparent;border:1.5px solid var(--line);color:var(--navy-800);}
.btn-outline:hover{border-color:var(--sapphire);background:var(--mist);}
.btn-ghost{background:transparent;color:var(--slate-500);padding:10px 18px;}
.btn-ghost:hover{color:var(--navy-800);}
.btn-block{width:100%;}
.btn-lg{padding:17px 38px;font-size:16px;}

/* SHELL */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 32px;}
.demo-banner{background:linear-gradient(90deg,var(--gold-pale),var(--white),var(--gold-pale));color:var(--amber);text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.3px;padding:8px;border-bottom:1px solid var(--gold-light);}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:20px;}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--gold);}
.section-heading{font-family:var(--serif);font-size:clamp(30px,4vw,46px);font-weight:600;line-height:1.1;color:var(--navy-900);letter-spacing:-.5px;}
.section-sub{font-size:17px;color:var(--slate-500);max-width:560px;margin-top:16px;}

/* HERO */
.hero{position:relative;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(61,111,214,.18),transparent 60%),linear-gradient(180deg,var(--ink),var(--navy-900) 55%,var(--navy-800));color:var(--white);overflow:hidden;padding:100px 0 120px;}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 60% 20%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 80% 50%,rgba(230,205,138,.8),transparent),radial-gradient(1px 1px at 35% 70%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 90% 75%,rgba(255,255,255,.4),transparent),radial-gradient(1.5px 1.5px at 15% 85%,rgba(230,205,138,.6),transparent),radial-gradient(1px 1px at 50% 90%,rgba(255,255,255,.4),transparent);opacity:.9;animation:twinkle 8s ease-in-out infinite alternate;}
@keyframes twinkle{from{opacity:.55;}to{opacity:1;}}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 32px;text-align:center;}
.hero .eyebrow{color:var(--gold-light);justify-content:center;}
.hero .eyebrow::before,.hero .eyebrow::after{content:'';width:28px;height:1px;background:var(--gold-light);}
.hero .eyebrow::after{display:inline-block;}
.hero-title{font-family:var(--serif);font-size:clamp(46px,7vw,88px);font-weight:600;line-height:1.02;letter-spacing:-1px;margin:0 auto;max-width:14ch;}
.hero-title em{font-style:italic;color:var(--gold-light);}
.hero-sub{font-size:clamp(16px,2vw,20px);color:var(--sky-soft);max-width:600px;margin:26px auto 0;font-weight:400;}
.hero-cta{margin-top:44px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.hero-stats{position:relative;z-index:2;max-width:820px;margin:72px auto 0;padding:0 32px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.12);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.12);}
.hero-stat{background:rgba(10,18,48,.4);backdrop-filter:blur(10px);padding:28px 20px;text-align:center;}
.hero-stat .n{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--gold-light);line-height:1;}
.hero-stat .l{font-size:13px;color:var(--sky-soft);margin-top:8px;letter-spacing:.5px;}

/* SECTION */
.section{padding:100px 0;}
.section-head{text-align:center;margin-bottom:60px;}
.section-head .eyebrow{justify-content:center;}
.section-head .eyebrow::after{content:'';width:28px;height:1px;background:var(--gold);display:inline-block;}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.service-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:36px 28px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent;}
.service-card:hover::before{transform:scaleX(1);}
.service-icon{width:60px;height:60px;border-radius:16px;background:linear-gradient(140deg,var(--mist),var(--white));border:1px solid var(--line);display:grid;place-items:center;font-size:30px;margin-bottom:24px;}
.service-card .num{font-family:var(--serif);font-size:14px;color:var(--gold);font-weight:600;letter-spacing:1px;margin-bottom:8px;}
.service-card h3{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy-900);margin-bottom:10px;line-height:1.2;}
.service-card p{font-size:14.5px;color:var(--slate-500);line-height:1.6;flex:1;}
.service-card .cost{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;}
.service-card .cost .credit{font-weight:700;color:var(--navy-800);font-size:15px;}
.service-card .cost .credit small{color:var(--slate-400);font-weight:400;}
.service-card .cost .arrow{color:var(--gold);font-size:20px;transition:transform .3s;}
.service-card:hover .cost .arrow{transform:translateX(4px);}

/* FEATURE BAND */
.feature-band{background:radial-gradient(ellipse at 20% 50%,rgba(61,111,214,.15),transparent 50%),linear-gradient(135deg,var(--navy-900),var(--navy-800));color:var(--white);padding:90px 0;}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
.feature-item{text-align:center;}
.feature-item .fi-icon{width:56px;height:56px;margin:0 auto 18px;border:1px solid rgba(230,205,138,.4);border-radius:50%;display:grid;place-items:center;font-size:24px;color:var(--gold-light);}
.feature-item h4{font-size:17px;font-weight:600;margin-bottom:6px;}
.feature-item p{font-size:14px;color:var(--sky-soft);}

/* CARD */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow-sm);}
.card-lg{padding:48px;}
.page-head{padding:64px 0 44px;text-align:center;}
.page-head .eyebrow{justify-content:center;}
.page-head .eyebrow::after{content:'';width:28px;height:1px;background:var(--gold);display:inline-block;}
.page-head h1{font-family:var(--serif);font-size:clamp(34px,5vw,52px);font-weight:600;color:var(--navy-900);line-height:1.1;letter-spacing:-.5px;}
.page-head p{font-size:17px;color:var(--slate-500);margin-top:14px;}

/* FORMS */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-group{margin-bottom:24px;}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--slate-700);margin-bottom:10px;}
.form-control{width:100%;padding:15px 18px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;font-family:var(--sans);color:var(--navy-900);background:var(--paper);transition:border-color .2s,box-shadow .2s,background .2s;}
.form-control::placeholder{color:var(--slate-400);}
.form-control:focus{outline:none;border-color:var(--sapphire);background:var(--white);box-shadow:0 0 0 4px rgba(37,71,160,.1);}
.form-hint{font-size:13px;color:var(--slate-400);margin-top:8px;}
.gender-select{display:flex;gap:12px;}
.gender-option{flex:1;padding:15px;border:1.5px solid var(--line);border-radius:12px;text-align:center;font-weight:600;font-size:15px;cursor:pointer;background:var(--paper);color:var(--slate-500);transition:all .2s;}
.gender-option:hover{border-color:var(--sky);}
.gender-option.active{border-color:var(--sapphire);background:var(--mist);color:var(--navy-800);}

/* AUTH */
.auth-shell{min-height:calc(100vh - 76px);display:grid;grid-template-columns:1fr 1fr;}
.auth-visual{background:radial-gradient(ellipse 70% 50% at 30% 20%,rgba(61,111,214,.25),transparent 60%),linear-gradient(160deg,var(--ink),var(--navy-800));color:var(--white);padding:80px 64px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.auth-visual::before{content:'';position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 25% 20%,rgba(230,205,138,.8),transparent),radial-gradient(1px 1px at 70% 40%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 45% 70%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 85% 80%,rgba(230,205,138,.6),transparent);animation:twinkle 8s ease-in-out infinite alternate;}
.auth-visual .av-inner{position:relative;z-index:2;max-width:400px;}
.auth-visual .eyebrow{color:var(--gold-light);}
.auth-visual h2{font-family:var(--serif);font-size:44px;font-weight:600;line-height:1.1;margin-bottom:20px;}
.auth-visual p{color:var(--sky-soft);font-size:16px;}
.auth-quote{margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.15);font-family:var(--serif);font-style:italic;font-size:20px;color:var(--gold-pale);}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:60px 48px;background:var(--paper);}
.auth-box{width:100%;max-width:420px;}
.auth-box h1{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--navy-900);margin-bottom:8px;}
.auth-box .sub{color:var(--slate-500);margin-bottom:36px;font-size:15px;}
.provider-btn{display:flex;align-items:center;gap:14px;width:100%;padding:15px 20px;border:1.5px solid var(--line);border-radius:12px;background:var(--white);margin-bottom:12px;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .15s;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--navy-800);text-align:left;}
.provider-btn:hover{border-color:var(--sapphire);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.provider-btn .p-icon{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;font-size:20px;}
.provider-btn .p-text{flex:1;}
.provider-btn .p-text small{display:block;font-size:12.5px;color:var(--slate-400);font-weight:400;}
.provider-btn .p-arrow{color:var(--slate-400);}
.auth-divider{display:flex;align-items:center;gap:16px;margin:24px 0;color:var(--slate-400);font-size:13px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.auth-foot{text-align:center;margin-top:28px;font-size:14px;color:var(--slate-500);}
.auth-foot a{color:var(--sapphire);font-weight:600;}

/* PRICING */
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.pkg-card{background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius);padding:36px 28px;text-align:center;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s;}
.pkg-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.pkg-card.featured{border-color:var(--gold);box-shadow:var(--shadow-gold);}
.pkg-card.featured::before{content:'แนะนำ';position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy-900);font-size:12px;font-weight:700;padding:5px 18px;border-radius:999px;letter-spacing:1px;}
.pkg-card .pkg-credit{font-family:var(--serif);font-size:48px;font-weight:600;color:var(--navy-900);line-height:1;}
.pkg-card .pkg-credit small{font-size:16px;color:var(--slate-400);}
.pkg-card .pkg-bonus{color:var(--green);font-weight:600;font-size:14px;margin-top:8px;min-height:20px;}
.pkg-card .pkg-price{margin-top:20px;font-size:22px;font-weight:700;color:var(--navy-800);}
.pkg-card .pkg-price s{color:var(--slate-400);font-weight:400;font-size:15px;}
.pkg-card .btn{margin-top:20px;}

/* RESULT */
.result-name{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;align-items:center;gap:20px;transition:box-shadow .2s,transform .2s;margin-bottom:14px;}
.result-name:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.score-ring{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:24px;color:#fff;flex-shrink:0;}
.result-name .r-info{flex:1;min-width:0;}
.result-name .r-name{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy-900);}
.result-name .r-meaning{font-size:14px;color:var(--slate-500);}
.grade-tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;color:#fff;margin-top:6px;}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:15px;}
.detail-row:last-child{border-bottom:none;}
.detail-row .label{color:var(--slate-500);}
.detail-row .value{font-weight:600;text-align:right;max-width:60%;color:var(--navy-800);}
.mood-good{color:var(--green);}
.mood-bad{color:var(--red);}
.mood-neutral{color:var(--slate-700);}
.big-score{text-align:center;padding:20px;}
.big-score .ring{width:140px;height:140px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-lg);}
.big-score .num{font-family:var(--serif);font-size:52px;font-weight:700;line-height:1;}
.big-score .max{font-size:14px;opacity:.85;}
.big-score .grade{font-family:var(--serif);font-size:22px;font-weight:600;margin-top:8px;}
.history-item{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line-soft);}
.history-item:last-child{border-bottom:none;}
.history-item .h-service{font-weight:600;font-size:15px;color:var(--navy-800);}
.history-item .h-date{font-size:13px;color:var(--slate-400);}
.history-item .h-amount{font-weight:700;font-size:17px;font-family:var(--serif);}
.h-plus{color:var(--green);}
.h-minus{color:var(--red);}
.pay-method{display:flex;align-items:center;gap:16px;padding:20px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:14px;cursor:pointer;transition:all .2s;background:var(--white);}
.pay-method:hover{border-color:var(--sky);}
.pay-method.active{border-color:var(--sapphire);background:var(--mist);}
.pay-method .pay-icon{font-size:28px;}
.pay-method .pay-name{font-weight:600;color:var(--navy-800);}
.pay-method .pay-sub{font-size:13px;color:var(--slate-500);}
.qr-box{text-align:center;padding:32px;background:var(--mist);border-radius:var(--radius);}
.qr-box .qr-img{width:220px;height:220px;margin:0 auto 20px;background:#fff;border-radius:16px;padding:14px;box-shadow:var(--shadow-md);}
.qr-box .qr-img img,.qr-box .qr-img canvas{width:100%;height:100%;}
.member-code-box{background:linear-gradient(140deg,var(--navy-900),var(--navy-800));border-radius:var(--radius);padding:28px;text-align:center;position:relative;overflow:hidden;margin-top:24px;}
.member-code-box::before{content:'';position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 30% 40%,rgba(230,205,138,.7),transparent),radial-gradient(1px 1px at 75% 60%,rgba(255,255,255,.5),transparent);}
.member-code-box .mc-label{position:relative;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--sky-soft);}
.member-code-box .mc-code{position:relative;font-family:var(--serif);font-size:32px;font-weight:600;color:var(--gold-light);letter-spacing:3px;margin-top:8px;}

/* FOOTER */
.footer{background:var(--ink);color:var(--sky-soft);padding:64px 0 40px;}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px;}
.footer .brand-name{color:var(--white);}
.footer-tag{max-width:320px;margin-top:16px;font-size:14px;color:var(--slate-400);}
.footer-links{display:flex;gap:48px;flex-wrap:wrap;}
.footer-col h5{color:var(--white);font-size:14px;font-weight:600;margin-bottom:14px;}
.footer-col a{display:block;font-size:14px;color:var(--slate-400);padding:5px 0;transition:color .2s;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{max-width:var(--maxw);margin:40px auto 0;padding:24px 32px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--slate-400);text-align:center;}

/* UTIL */
.hidden{display:none !important;}
.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
.spinner-dark{border-color:rgba(37,71,160,.25);border-top-color:var(--sapphire);}
@keyframes spin{to{transform:rotate(360deg);}}
.fade-in{animation:fadeIn .5s cubic-bezier(.2,.8,.2,1);}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--slate-500);font-size:14px;font-weight:500;margin-bottom:20px;transition:color .2s;}
.back-link:hover{color:var(--sapphire);}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--navy-800);margin:5px 0;transition:.3s;border-radius:2px;}
.bottom-nav{display:none;}

/* TABLET */
@media (max-width:1024px){
.services-grid{grid-template-columns:repeat(2,1fr);}
.pkg-grid{grid-template-columns:repeat(2,1fr);}
.feature-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
.auth-shell{grid-template-columns:1fr;}
.auth-visual{display:none;}
.wrap,.hero-inner,.topbar-inner,.footer-inner{padding-left:24px;padding-right:24px;}
}

/* MOBILE */
@media (max-width:680px){
.topbar-inner{height:62px;padding:0 18px;}
.brand-name{font-size:21px;}
.brand-name small{font-size:9px;letter-spacing:2px;}
.brand-mark{width:36px;height:36px;}
.topnav{position:fixed;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--white);border-bottom:1px solid var(--line);padding:12px 18px;gap:2px;box-shadow:var(--shadow-md);transform:translateY(-120%);opacity:0;transition:transform .3s,opacity .3s;z-index:99;}
.topnav.open{transform:translateY(0);opacity:1;}
.topnav a{padding:14px 16px;font-size:16px;}
.topnav a.active::after{display:none;}
.menu-toggle{display:block;}
.user-menu{display:none;} /* มือถือใช้ hamburger + bottom-nav แทน */
.topnav-mobile-only{display:block!important;}
.credit-pill{padding:7px 12px;font-size:13px;}
.credit-pill .cp-label{display:none;}
.hero{padding:64px 0 80px;}
.hero-inner{padding:0 20px;}
.hero-cta{flex-direction:column;}
.hero-cta .btn{width:100%;}
.hero-stats{grid-template-columns:1fr;margin-top:48px;}
.hero-stat{padding:20px;}
.hero-stat .n{font-size:34px;}
.section{padding:60px 0;}
.section-head{margin-bottom:40px;}
.services-grid{grid-template-columns:1fr;gap:16px;}
.service-card{padding:28px 24px;}
.feature-band{padding:60px 0;}
.feature-grid{grid-template-columns:1fr;gap:28px;}
.pkg-grid{grid-template-columns:1fr;gap:16px;}
.card,.card-lg{padding:28px 22px;}
.form-row{grid-template-columns:1fr;gap:0;}
.page-head{padding:44px 0 32px;}
.auth-panel{padding:40px 22px;}
.wrap,.wrap-narrow,.hero-inner,.topbar-inner,.footer-inner,.footer-bottom{padding-left:18px;padding-right:18px;}
.footer{padding:48px 0 100px;}
.footer-inner{flex-direction:column;gap:28px;}
.footer-links{gap:32px;}
.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line);justify-content:space-around;padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:100;}
.bottom-nav a{flex:1;text-align:center;padding:4px 0;font-size:10.5px;color:var(--slate-400);display:flex;flex-direction:column;align-items:center;gap:3px;}
.bottom-nav a.active{color:var(--sapphire);}
.bottom-nav .nav-icon{font-size:20px;}
}

/* LANGUAGE SWITCHER */
.lang-switch{position:relative;}
.lang-current{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:var(--white);border:1px solid var(--line);border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--navy-800);transition:border-color .2s,box-shadow .2s;}
.lang-current:hover{border-color:var(--gold-light);box-shadow:var(--shadow-xs);}
.lang-flag{font-size:16px;line-height:1;}
.lang-caret{font-size:10px;color:var(--slate-400);}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;min-width:160px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:200;}
.lang-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
.lang-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--slate-700);transition:background .15s;}
.lang-option:hover{background:var(--line-soft);}
.lang-option.active{color:var(--navy-900);font-weight:600;}
.lang-check{margin-left:auto;color:var(--gold);}
@media (max-width:680px){
.lang-short{display:none;}
.lang-current{padding:7px 10px;}
.lang-menu{right:0;}
}

/* CONTENT HUB */
.cat-filter{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px;}
.cat-chip{padding:10px 20px;border:1.5px solid var(--line);border-radius:999px;background:var(--white);cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--slate-500);transition:all .2s;}
.cat-chip:hover{border-color:var(--sky);color:var(--navy-800);}
.cat-chip.active{border-color:var(--sapphire);background:var(--navy-800);color:#fff;}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.article-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;display:flex;flex-direction:column;}
.article-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);}
.article-banner{height:180px;background-size:cover;background-position:center;position:relative;background-color:var(--navy-800);}
.article-cat{position:absolute;left:16px;bottom:16px;background:rgba(201,162,75,.95);color:var(--navy-900);font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;}
.article-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.article-body h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy-900);line-height:1.25;margin-bottom:10px;}
.article-body p{font-size:14px;color:var(--slate-500);line-height:1.6;flex:1;}
.article-meta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--slate-400);}
.article-arrow{color:var(--gold);font-weight:600;}

/* ARTICLE PAGE */
.article-hero{min-height:340px;background-size:cover;background-position:center;background-color:var(--navy-900);display:flex;align-items:flex-end;padding:48px 0;color:#fff;}
.article-hero-back{display:inline-block;color:var(--sky-soft);font-size:14px;margin-bottom:16px;}
.article-hero-back:hover{color:#fff;}
.article-hero h1{font-family:var(--serif);font-size:clamp(30px,4.5vw,48px);font-weight:600;line-height:1.15;max-width:20ch;}
.article-hero-meta{margin-top:16px;font-size:14px;color:var(--sky-soft);}
.article-content{font-size:17px;line-height:1.85;color:var(--slate-700);}
.article-content h2{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--navy-900);margin:36px 0 14px;}
.article-content p{margin-bottom:20px;}
.article-content ul{margin:0 0 20px 22px;}
.article-content li{margin-bottom:10px;}
.article-content strong{color:var(--navy-900);}
.article-cta-box{margin-top:48px;padding:32px;background:linear-gradient(135deg,var(--mist),var(--white));border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}

@media (max-width:1024px){.article-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:680px){
.article-grid{grid-template-columns:1fr;}
.article-hero{min-height:260px;}
.article-cta-box{flex-direction:column;align-items:stretch;text-align:center;}
}

/* ADMIN */
.admin-body{background:#f4f6fb;}
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{width:260px;background:linear-gradient(180deg,var(--ink),var(--navy-900));color:#fff;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50;}
.admin-brand{display:flex;align-items:center;gap:12px;padding:24px 22px;border-bottom:1px solid rgba(255,255,255,.08);}
.admin-nav{padding:16px 12px;flex:1;display:flex;flex-direction:column;gap:4px;}
.admin-nav a{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:10px;color:var(--sky-soft);font-size:15px;font-weight:500;transition:background .2s,color .2s;}
.admin-nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.admin-nav a.active{background:linear-gradient(135deg,var(--sapphire),var(--azure));color:#fff;font-weight:600;}
.admin-nav .ai{font-size:16px;width:20px;text-align:center;}
.admin-side-foot{padding:18px 22px;border-top:1px solid rgba(255,255,255,.08);}
.admin-back{color:var(--slate-400);font-size:14px;}
.admin-back:hover{color:#fff;}
.admin-main{flex:1;margin-left:260px;display:flex;flex-direction:column;}
.admin-topbar{background:#fff;border-bottom:1px solid var(--line);padding:0 32px;height:70px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:40;}
.admin-topbar h1{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy-900);flex:1;}
.admin-user{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--slate-700);}
.admin-role-badge{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy-900);font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 10px;border-radius:6px;}
.admin-menu-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--navy-800);}
.admin-content{padding:32px;flex:1;}

.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px;}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-xs);}
.stat-card.featured{background:linear-gradient(135deg,var(--navy-800),var(--sapphire));border-color:transparent;color:#fff;}
.stat-card.featured .sc-label{color:var(--sky-soft);}
.sc-icon{font-size:24px;color:var(--gold);margin-bottom:12px;}
.sc-val{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--navy-900);line-height:1;}
.stat-card.featured .sc-val{color:#fff;}
.sc-label{font-size:13px;color:var(--slate-500);margin-top:8px;}

.admin-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-xs);}
.admin-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.admin-panel-title{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--navy-900);margin-bottom:20px;}
.admin-panel-head .admin-panel-title{margin-bottom:0;}
.admin-actions-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px;flex-wrap:wrap;}
.admin-hint{font-size:13px;color:var(--slate-400);}

/* bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:220px;padding-top:20px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:6px;}
.bar-wrap{width:100%;height:100%;display:flex;align-items:flex-end;}
.bar{width:100%;background:linear-gradient(180deg,var(--azure),var(--sapphire));border-radius:6px 6px 0 0;min-height:4px;transition:height .6s cubic-bezier(.2,.8,.2,1);}
.bar-col:hover .bar{background:linear-gradient(180deg,var(--gold-light),var(--gold));}
.bar-val{font-size:11px;color:var(--slate-400);font-weight:600;}
.bar-label{font-size:11px;color:var(--slate-400);white-space:nowrap;}

/* service rows */
.svc-row{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
.svc-row:last-child{border-bottom:none;}
.svc-name{font-size:14px;font-weight:600;color:var(--navy-800);}
.svc-bar-wrap{background:var(--line-soft);border-radius:999px;height:12px;overflow:hidden;}
.svc-bar{height:100%;background:linear-gradient(90deg,var(--sapphire),var(--azure));border-radius:999px;}
.svc-val{font-size:14px;font-weight:600;color:var(--navy-900);white-space:nowrap;}

/* admin table */
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--slate-400);text-transform:uppercase;padding:16px 18px;border-bottom:1px solid var(--line);}
.admin-table td{padding:16px 18px;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--slate-700);}
.admin-table tbody tr:hover{background:var(--paper);}
.admin-table tbody tr:last-child td{border-bottom:none;}
.ct-title{font-weight:600;color:var(--navy-900);}
.ct-slug{font-size:12px;color:var(--slate-400);font-family:monospace;margin-top:2px;}
.drag-handle{cursor:grab;color:var(--slate-400);font-size:18px;text-align:center;}
tr.dragging{opacity:.4;background:var(--mist);}
.status-pill{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;}
.status-published{background:#e3f5ec;color:var(--green);}
.status-draft{background:#fef2e2;color:var(--amber);}
.al-status{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;font-family:monospace;}
.al-status-2xx{background:#e3f5ec;color:var(--green);}
.al-status-3xx{background:#e8f1fe;color:var(--azure);}
.al-status-4xx{background:#fef2e2;color:var(--amber);}
.al-status-5xx{background:#fce8ec;color:var(--red);}
.toggle-status{display:flex;align-items:center;gap:12px;}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch-slider{position:absolute;inset:0;cursor:pointer;background:var(--line);border-radius:999px;transition:.2s;}
.switch-slider::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:var(--white);border-radius:50%;transition:.2s;box-shadow:var(--shadow-xs);}
.switch input:checked + .switch-slider{background:var(--green);}
.switch input:checked + .switch-slider::before{transform:translateX(20px);}
.switch input:focus-visible + .switch-slider{box-shadow:0 0 0 3px rgba(26,157,107,.25);}
.tier-pill{display:inline-block;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;}
.tier-customer{background:var(--line-soft);color:var(--slate-700);}
.tier-vip{background:#fdf0d5;color:#b8860b;}
.tier-partner{background:#e3f5ec;color:var(--green);}
.btn-mini{display:inline-block;padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--navy-800);cursor:pointer;}
.btn-mini:hover{border-color:var(--sapphire);}
.btn-mini-danger{color:var(--red);border-color:#f3d0d6;}
.btn-mini-danger:hover{background:#fdecef;border-color:var(--red);}
.banner-presets{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.banner-preset{width:90px;height:44px;object-fit:cover;border-radius:8px;border:2px solid var(--line);cursor:pointer;transition:border-color .2s;}
.banner-preset:hover,.banner-preset.selected{border-color:var(--sapphire);}

@media (max-width:900px){
.admin-sidebar{transform:translateX(-100%);transition:transform .3s;}
.admin-sidebar.open{transform:translateX(0);}
.admin-main{margin-left:0;}
.admin-menu-btn{display:block;}
.stat-cards{grid-template-columns:1fr 1fr;}
.admin-content{padding:18px;}
.admin-table{font-size:13px;}
.svc-row{grid-template-columns:1fr;gap:8px;}
}
@media (max-width:560px){.stat-cards{grid-template-columns:1fr;}}

/* REPORT TOOLBAR (filter + export) */
.report-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-xs);}
.report-filter{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.rf-field{display:flex;flex-direction:column;gap:6px;}
.rf-field label{font-size:12px;font-weight:600;color:var(--slate-500);}
.rf-field .form-control{padding:9px 12px;font-size:14px;width:170px;}
.report-toolbar .btn{padding:11px 20px;}
.report-export{white-space:nowrap;}
@media (max-width:680px){
.report-toolbar{flex-direction:column;align-items:stretch;}
.report-filter{flex-direction:column;align-items:stretch;}
.rf-field .form-control{width:100%;}
.report-export{text-align:center;}
}

/* CONSENT (PDPA) */
.consent-box{margin:20px 0;display:flex;flex-direction:column;gap:12px;}
.consent-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--slate-500);line-height:1.5;cursor:pointer;}
.consent-check input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--sapphire);cursor:pointer;}
.consent-check a{color:var(--sapphire);font-weight:600;}

/* ACCOUNT (จัดการข้อมูลส่วนตัว) */
.account-wrap{display:flex;flex-direction:column;gap:20px;}
.account-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-xs);}
.account-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.account-card-head h2{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--navy-900);}
.account-code{font-family:var(--serif);font-weight:600;letter-spacing:1px;color:var(--sapphire);background:var(--mist);padding:5px 14px;border-radius:999px;font-size:14px;}
.account-form .form-group{margin-bottom:18px;}
.account-readonly{display:flex;flex-direction:column;gap:2px;}
.ro-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15px;}
.ro-row:last-child{border-bottom:none;}
.ro-row span{color:var(--slate-500);}
.ro-row b{color:var(--navy-900);}
.account-note{font-size:13.5px;color:var(--slate-400);line-height:1.6;margin-top:16px;}
.consent-manage{display:flex;flex-direction:column;gap:6px;}
.consent-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line-soft);}
.consent-row:last-child{border-bottom:none;}
.consent-name{font-weight:600;color:var(--navy-900);font-size:15px;}
.consent-desc{font-size:13px;color:var(--slate-400);margin-top:3px;line-height:1.5;}
.rights-actions{display:flex;gap:12px;flex-wrap:wrap;}
.account-danger{border-color:#f3d0d6;background:linear-gradient(180deg,#fefcfc,var(--white));}
.account-danger .account-card-head h2{color:var(--red);}
.btn-danger{background:var(--red);color:#fff;border:1px solid var(--red);}
.btn-danger:hover{background:#c0392b;border-color:#c0392b;}
.btn-ghost{background:transparent;color:var(--slate-500);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--sapphire);color:var(--navy-800);}
/* modal */
.modal-overlay{position:fixed;inset:0;background:rgba(10,18,48,.6);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:var(--radius);padding:32px;max-width:460px;width:100%;box-shadow:var(--shadow-lg);}
.modal-box h3{font-family:var(--serif);font-size:24px;color:var(--red);margin-bottom:14px;}
.modal-box p{color:var(--slate-700);line-height:1.6;margin-bottom:12px;font-size:15px;}
.delete-code-hint{font-size:14px;color:var(--slate-500);}
.modal-box .form-control{margin:8px 0 20px;font-family:var(--serif);letter-spacing:1px;}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;}

/* FIELD VALIDATION */
.field-error{color:var(--red);font-size:12.5px;margin-top:5px;min-height:0;line-height:1.4;}
.field-error:empty{display:none;}
.form-control.input-error{border-color:var(--red);}
.form-control.input-error:focus{box-shadow:0 0 0 3px rgba(200,60,60,.12);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.form-row{grid-template-columns:1fr;}}

/* AD ZONES (โฆษณาตามตำแหน่ง) */
.ad-zone{padding:28px 0;}
.ad-zone-billboard{padding-top:36px;padding-bottom:8px;}
.ad-zone-footer{padding:32px 0;background:var(--paper);}
/* Tablet */
@media (max-width:900px){
.ad-zone{padding:20px 0;}
.ad-zone-billboard{padding-top:24px;}
}
/* Mobile: banner กว้างเต็มจอ ระยะขอบพอดี */
@media (max-width:680px){
.ad-zone{padding:16px 0;}
.ad-zone-billboard{padding-top:18px;}
.ad-banner{border-radius:12px;}
.ad-banner img{border-radius:12px;}
}
.ad-banner{display:block;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s;position:relative;line-height:0;}
.ad-banner:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.ad-banner img{width:100%;height:auto;display:block;}
/* label กำกับว่าเป็นพื้นที่โฆษณา */
.ad-zone .wrap{position:relative;}
/* content layout with sidebar */
.content-with-side{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;}
.ad-sidebar{position:sticky;top:96px;}
.ad-sidebar .ad-banner{display:block;}
.ad-sidebar .ad-banner img{border-radius:16px;width:100%;}
/* Tablet: ลดความกว้าง sidebar */
@media (max-width:1100px) and (min-width:861px){
.content-with-side{grid-template-columns:1fr 260px;gap:24px;}
}
/* Mobile/แท็บเล็ตแนวตั้ง: ย้าย sidebar ลงล่าง ไม่ซ่อน (ผู้ลงโฆษณายังได้การมองเห็น) */
@media (max-width:860px){
.content-with-side{grid-template-columns:1fr;}
.ad-sidebar{position:static;top:auto;margin:8px auto 0;max-width:400px;width:100%;}
}

/* article grid 2 คอลัมน์ (เมื่อมี sidebar) */
.article-grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:640px){.article-grid-2{grid-template-columns:1fr;}}

/* CONTACT PAGE */
.contact-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start;}
.contact-channels{background:linear-gradient(160deg,var(--navy-800),var(--ink));border-radius:var(--radius);padding:36px;color:#fff;}
.contact-channels h2{font-family:var(--serif);font-size:22px;margin-bottom:24px;color:#fff;}
.channel-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;}
.channel-icon{font-size:22px;width:44px;height:44px;background:rgba(255,255,255,.08);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.channel-label{font-size:13px;color:var(--sky-soft);margin-bottom:3px;}
.channel-value{color:#fff;font-weight:500;}
a.channel-value:hover{color:var(--gold-light);}
.channel-social{display:flex;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);}
.social-btn{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;transition:background .2s;}
.social-btn:hover{background:var(--gold);color:var(--navy-900);}
.contact-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px;box-shadow:var(--shadow-xs);}
.contact-form-card h2{font-family:var(--serif);font-size:22px;color:var(--navy-900);margin-bottom:24px;}
@media (max-width:860px){.contact-layout{grid-template-columns:1fr;}}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:14px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 24px;transition:box-shadow .2s;}
.faq-item[open]{box-shadow:var(--shadow-sm);}
.faq-item summary{font-weight:600;color:var(--navy-900);font-size:16px;padding:18px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:24px;color:var(--gold);font-weight:400;}
.faq-item[open] summary::after{content:'−';}
.faq-answer{padding:0 0 20px;color:var(--slate-700);line-height:1.7;}
.faq-cta{text-align:center;margin-top:40px;padding:32px;background:var(--mist);border-radius:var(--radius);}
.faq-cta p{margin-bottom:16px;color:var(--slate-700);}


/* TOOL PAGE LAYOUT (ฟอร์ม + banner rail ซ้าย/ขวา sticky) */
.ad-zone-top{padding:8px 0 28px;}
.ad-zone-top .wrap{max-width:var(--maxw);margin:0 auto;}
.tool-layout{max-width:1400px;margin:0 auto;padding:0 32px 48px;display:grid;grid-template-columns:1fr minmax(0,720px) 1fr;gap:32px;align-items:start;justify-content:center;}
.tool-main{min-width:0;}
.tool-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:10px;max-width:300px;justify-self:center;width:100%;}
.tool-rail-left{justify-self:end;}
.tool-rail-right{justify-self:start;}
.ad-rail-label{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate-400);text-align:center;}
.tool-rail .ad-banner{width:100%;}
.tool-rail .ad-banner img{width:100%;height:auto;display:block;}

/* Tablet: rail แคบลง */
@media (max-width:1200px){
.tool-layout{grid-template-columns:1fr minmax(0,640px) 1fr;gap:20px;padding:0 20px 40px;}
.tool-rail{max-width:230px;top:88px;}
}
/* จอกลาง: ซ่อน rail ขวา เหลือซ้าย 1 อัน (ยังได้การมองเห็น) */
@media (max-width:1024px){
.tool-layout{grid-template-columns:minmax(0,640px) 260px;justify-content:center;}
.tool-rail-left{display:none;}
.tool-rail-right{justify-self:start;}
}
/* Mobile/แท็บเล็ตแนวตั้ง: ทุกอย่างเรียงเดี่ยว, rail ย้ายลงล่าง ไม่ sticky */
@media (max-width:820px){
.tool-layout{grid-template-columns:1fr;padding:0 18px 32px;gap:24px;}
.tool-rail{position:static;top:auto;flex-direction:row;max-width:100%;justify-self:stretch;justify-content:center;gap:12px;}
.tool-rail-left{display:flex;order:3;}
.tool-rail-right{order:4;}
.tool-rail .ad-banner{max-width:340px;}
.ad-zone-top{padding:4px 0 20px;}
}
@media (max-width:480px){
.tool-rail .ad-banner{max-width:100%;}
}

/* NAME SEARCH (ค้นหาชื่อตามวันเกิด) */
.ns-count{margin-top:14px;display:inline-block;font-size:13px;color:var(--gold-dark);background:var(--mist);padding:6px 16px;border-radius:999px;font-weight:600;}
.day-select{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.day-chip{padding:14px 8px;border:1.5px solid var(--line);background:var(--white);border-radius:12px;font-size:15px;font-weight:500;color:var(--slate-700);cursor:pointer;transition:all .18s;font-family:var(--sans);}
.day-chip:hover{border-color:var(--sapphire);color:var(--navy-800);}
.day-chip.active{border-color:var(--sapphire);background:var(--sapphire);color:#fff;box-shadow:var(--shadow-sm);}
@media (max-width:640px){.day-select{grid-template-columns:repeat(2,1fr);}}

.ns-result{margin-top:36px;}
.ns-result-head h2{font-family:var(--serif);font-size:22px;color:var(--navy-900);margin-bottom:20px;}
.ns-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:640px){.ns-grid{grid-template-columns:1fr;}}
.ns-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px;transition:box-shadow .2s,transform .2s;}
.ns-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.ns-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.ns-name{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--navy-900);}
.ns-badge{width:30px;height:30px;border-radius:50%;background:var(--mist);color:var(--sapphire);display:grid;place-items:center;font-size:15px;}
.ns-spell{font-size:13px;color:var(--slate-400);margin-bottom:8px;}
.ns-mean{font-size:14.5px;color:var(--slate-700);line-height:1.55;min-height:44px;}
.ns-nums{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);}
.ns-num{font-size:12px;color:var(--slate-500);background:var(--paper);padding:4px 12px;border-radius:999px;}
.ns-num-single{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy-900);font-weight:700;}
.ns-more{text-align:center;margin-top:28px;}
.ns-empty{text-align:center;padding:48px 20px;color:var(--slate-400);font-size:16px;}
.ns-limited{text-align:center;margin-top:24px;padding:20px;background:var(--mist);border-radius:14px;color:var(--navy-800);font-weight:500;}

/* ADMIN SETTINGS - ns mode options */
.ns-mode-options{display:flex;flex-direction:column;gap:10px;}
.ns-mode-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s;}
.ns-mode-opt:hover{border-color:var(--sapphire);}
.ns-mode-opt input{width:18px;height:18px;accent-color:var(--sapphire);}
.ns-mode-opt input:checked ~ span{font-weight:600;color:var(--navy-900);}
.ns-mode-opt:has(input:checked){border-color:var(--sapphire);background:var(--mist);}

/* ADMIN TIER MANAGEMENT */
.tier-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.tier-row .tier-name{flex:1;max-width:220px;}
.tier-row .tier-max{width:110px;}
.tier-unit{color:var(--slate-500);font-size:14px;}
.tier-del{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--white);color:var(--red);cursor:pointer;font-size:14px;transition:background .15s,border-color .15s;flex-shrink:0;margin-left:auto;}
.tier-del:hover{background:#fdeaea;border-color:var(--red);}
.btn-sm{padding:8px 16px;font-size:14px;}

/* NAME SEARCH - surname + tier extras */
.soon-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--gold-dark);background:var(--mist);padding:2px 10px;border-radius:999px;margin-left:8px;vertical-align:middle;}
.ns-result-count{font-size:14px;color:var(--slate-500);margin-top:4px;}
.ns-result-head{margin-bottom:20px;}

/* NAME SEARCH - export buttons */
.ns-result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;}
.ns-export{flex-shrink:0;}
.ns-cert-btn{margin-left:auto;padding:5px 12px;border:1px solid var(--gold-light);background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--navy-900);border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s;font-family:var(--sans);}
.ns-cert-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}

/* ADMIN ANALYTICS */
.ana-filter{display:flex;align-items:center;gap:8px;}
.ana-filter .form-control{width:auto;padding:8px 12px;}
.ana-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
.ana-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;}
.ana-num{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--navy-900);}
.ana-label{font-size:13px;color:var(--slate-500);margin-top:4px;}
.ana-sub{font-size:12px;color:var(--slate-400);margin-top:2px;}
.ana-section{margin-bottom:32px;}
.ana-section h3{font-size:17px;color:var(--navy-900);margin-bottom:14px;}
.ana-demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ana-demo-box{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px;}
.ana-demo-big{font-family:var(--serif);font-size:36px;font-weight:700;color:var(--sapphire);}
.ana-demo-big span{font-size:16px;color:var(--slate-400);}
.ana-age-bars{margin-top:16px;}
.ana-age-row,.ana-prov-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px;}
.ana-age-label{width:52px;color:var(--slate-600);}
.ana-prov-name{width:130px;color:var(--slate-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ana-bar-track{flex:1;height:10px;background:var(--line-soft);border-radius:999px;overflow:hidden;}
.ana-bar{height:100%;background:linear-gradient(90deg,var(--sapphire),var(--navy-700));border-radius:999px;}
.ana-bar-gold{background:linear-gradient(90deg,var(--gold),var(--gold-light));}
.ana-age-cnt{width:36px;text-align:right;color:var(--slate-500);}
.ana-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.ana-table th{background:var(--mist);padding:12px 14px;text-align:left;font-size:13px;color:var(--slate-600);font-weight:600;}
.ana-table th.num,.ana-table td.num{text-align:right;}
.ana-table td{padding:12px 14px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--slate-700);}
.ana-path{font-size:12px;color:var(--slate-400);}
.ana-empty{text-align:center;color:var(--slate-400);padding:24px;}
.ana-badge{padding:3px 12px;border-radius:999px;font-size:12px;font-weight:600;}
.ana-badge-guest{background:var(--line-soft);color:var(--slate-600);}
.ana-badge-member{background:var(--mist);color:var(--sapphire);}
@media (max-width:900px){.ana-cards{grid-template-columns:repeat(2,1fr);}.ana-demo-grid{grid-template-columns:1fr;}}