:root{
  --navy:#061a2f;
  --navy-2:#08233f;
  --navy-3:#0b2e51;
  --gold:#f3c979;
  --gold-2:#d5963c;
  --gold-3:#a86f25;
  --cream:#fff8ef;
  --red:#b62b25;
  --red-2:#e45045;
  --ink:#14263c;
  --muted:#657285;
  --line:#e8edf3;
  --white:#fff;
  --max:1360px;
  --radius:16px;
  --shadow-card:0 24px 56px rgba(10,28,47,.13);
  --shadow-soft:0 18px 38px rgba(10,28,47,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"Sarabun", "Noto Sans Thai", "Prompt", Tahoma, Arial, sans-serif;
  font-size:15px;
  line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

/* ===== HEADER ===== */
.site-header{
  height:72px;
  background:linear-gradient(90deg,#06172a 0%,#082540 50%,#06172a 100%);
  color:#fff;
  border-bottom:1px solid rgba(243,201,121,.22);
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 9px 22px rgba(0,0,0,.22);
}
.navbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-badge{
  width:38px;
  height:44px;
  border-radius:18px;
  background:linear-gradient(180deg,#e55b3c 0%,#bf2f29 58%,#92211f 100%);
  border:2px solid rgba(247,205,125,.88);
  color:#fff;
  display:grid;
  place-items:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  font-weight:900;
  line-height:1;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.28);
}
.brand-name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  font-weight:800;
  letter-spacing:.1px;
  color:#ffd184;
  text-shadow:0 1px 7px rgba(0,0,0,.28);
}
.nav-menu{display:flex;align-items:center;gap:42px;margin-left:auto}
.nav-link{
  position:relative;
  padding:22px 0 17px;
  color:#fff;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.05px;
  opacity:.98;
}
.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:7px;right:7px;bottom:9px;
  height:2px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.55);
}
.nav-admin{
  min-width:98px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:linear-gradient(180deg,#ffd996 0%,#efb95a 100%);
  color:#14263c;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:15px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px rgba(208,151,61,.24);
}
.mobile-toggle{display:none;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:10px;width:42px;height:42px;font-size:24px;cursor:pointer}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:620px;
  color:#fff;
  overflow:hidden;
  background-image:
    radial-gradient(ellipse at 73% 18%,rgba(255,213,142,.38) 0%,rgba(255,195,100,.18) 24%,rgba(255,195,100,0) 54%),
    radial-gradient(ellipse at 58% 72%,rgba(241,186,94,.24) 0%,rgba(241,186,94,0) 48%),
    radial-gradient(ellipse at 34% 58%,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 38%),
    linear-gradient(90deg,rgba(4,16,30,.90) 0%,rgba(5,20,36,.70) 43%,rgba(5,16,27,.18) 100%),
    linear-gradient(180deg,rgba(5,17,30,.08) 0%,rgba(5,17,30,.02) 50%,rgba(7,23,35,.16) 100%),
    url("../img/hero-bg.png");
  background-size:cover;
  background-position:center 45%;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 73% 22%,rgba(255,216,142,.22),rgba(255,216,142,0) 31%),
    linear-gradient(115deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 38%);
  mix-blend-mode:screen;
  opacity:.85;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:150px;
  z-index:2;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0 92C120 118 190 112 295 68C390 28 454 28 560 58C633 79 689 76 770 56C910 22 1006 56 1128 71C1244 86 1327 59 1440 42V150H0Z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
}
.hero-inner{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1fr) 430px;
  gap:108px;
  align-items:center;
  padding:84px 0 170px;
}
.hero-copy{padding-top:4px}
.kicker-icon{
  display:block;
  height:22px;
  margin:0 0 6px 110px;
  font-size:24px;
  font-weight:900;
  color:#fff;
  opacity:.95;
  transform:rotate(-14deg);
}
.hero-title{
  margin:0;
  color:#fff;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:clamp(56px,5.3vw,84px);
  font-weight:900;
  letter-spacing:-2.2px;
  line-height:1.05;
  text-shadow:0 5px 18px rgba(0,0,0,.38);
}
.gold{color:#e9ba63;text-shadow:0 4px 14px rgba(243,201,121,.34)}
.hero-subtitle{
  margin:14px 0 16px;
  color:#ffd185;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:25px;
  font-weight:800;
  line-height:1.3;
  text-shadow:0 3px 14px rgba(0,0,0,.35);
}
.hero-desc{
  margin:0 0 34px;
  max-width:670px;
  color:#eef3f9;
  font-size:16px;
  font-weight:600;
  line-height:1.72;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border:1px solid transparent;
  border-radius:14px;
  padding:13px 32px;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:15px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{
  color:#11263d;
  background:linear-gradient(180deg,#ffd994 0%,#eeb75a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.54),0 9px 22px rgba(217,157,69,.26);
}
.btn-outline{
  color:#fff;
  background:rgba(4,19,34,.43);
  border-color:rgba(255,255,255,.65);
  backdrop-filter:blur(7px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-red-outline{border-color:#c23a32;color:#b72d27;background:#fff}
.btn-navy{background:var(--navy);color:#fff}

/* ===== EVENT SUMMARY ===== */
.summary-card{
  position:relative;
  width:410px;
  max-width:100%;
  min-height:304px;
  padding:25px 32px 22px 42px;
  color:#fff;
  border:0;
  border-radius:15px 15px 13px 13px;
  overflow:hidden;
  isolation:isolate;
  transform:translateY(-14px);
  background:
    radial-gradient(circle at 72% 18%,rgba(18,55,91,.40) 0%,rgba(18,55,91,0) 48%),
    linear-gradient(147deg,#082540 0%,#061c34 46%,#041425 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 54px rgba(247,202,119,.34),
    0 0 108px rgba(238,177,84,.18),
    0 30px 64px rgba(0,0,0,.42),
    0 10px 28px rgba(229,63,55,.18);
  border-bottom:6px solid #dc3b33;
  -webkit-mask:
    radial-gradient(18px at left 50%, transparent 0 11px,#000 12px) left center/51% 100% no-repeat,
    radial-gradient(18px at right 50%, transparent 0 11px,#000 12px) right center/51% 100% no-repeat;
  mask:
    radial-gradient(18px at left 50%, transparent 0 11px,#000 12px) left center/51% 100% no-repeat,
    radial-gradient(18px at right 50%, transparent 0 11px,#000 12px) right center/51% 100% no-repeat;
}
.summary-card::before{
  content:"";
  position:absolute;
  left:17px;
  top:20px;
  bottom:24px;
  z-index:1;
  width:1px;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(241,188,96,.50) 0 2px,transparent 2px 9px);
}
.summary-card::after{
  content:"";
  position:absolute;
  inset:-14px -18px auto auto;
  width:210px;
  height:170px;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,218,147,.13) 0%,rgba(255,218,147,.05) 34%,rgba(255,218,147,0) 66%);
}
.summary-label,
.summary-date-row,
.summary-list{
  position:relative;
  z-index:2;
}
.summary-label{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 17px;
  color:#f6c36d;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:13px;
  font-weight:900;
  letter-spacing:.65px;
  text-transform:uppercase;
  line-height:1.15;
}
.summary-label::before{
  content:"";
  width:5px;
  height:5px;
  flex:0 0 5px;
  border-radius:50%;
  background:#f6c36d;
  box-shadow:0 0 10px rgba(246,195,109,.52);
}
.summary-date-row{
  display:grid;
  grid-template-columns:98px 1fr;
  align-items:center;
  gap:19px;
  padding-bottom:19px;
  border-bottom:1px dashed rgba(255,255,255,.18);
}
.calendar-box{
  width:98px;
  height:90px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(180deg,#f05248 0%,#ca302b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 12px 25px rgba(220,58,51,.32),
    0 0 22px rgba(239,81,71,.14);
}
.calendar-day{
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:43px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:.88;
}
.calendar-month{
  margin-top:7px;
  font-size:13px;
  font-weight:800;
  line-height:1;
}
.summary-date-text small{
  display:block;
  margin-bottom:3px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}
.summary-date-text strong{
  display:block;
  color:#fff;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:23px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.15px;
}
.summary-date-note{
  display:block;
  margin-top:5px;
  color:#f5c875;
  font-size:13px;
  font-weight:800;
  line-height:1.1;
}
.summary-list{
  display:grid;
}
.summary-item{
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  gap:14px;
  min-height:57px;
  padding:12px 0;
  border-top:1px dashed rgba(255,255,255,.16);
}
.summary-item:first-child{border-top:0}
.summary-item:last-child{padding-bottom:0}
.s-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:#f3c56f;
}
.s-icon svg{
  width:26px;
  height:26px;
  display:block;
  stroke:currentColor;
  stroke-width:2.05;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  filter:drop-shadow(0 0 5px rgba(243,197,111,.16));
}
.summary-item small{
  display:block;
  margin-bottom:2px;
  color:rgba(255,255,255,.66);
  font-size:11.5px;
  font-weight:700;
  text-transform:none;
  line-height:1.1;
}
.summary-item strong{
  display:block;
  color:#fff;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:17px;
  font-weight:900;
  line-height:1.25;
}
.wave{display:none}

/* ===== INFO STRIP ===== */
.info-strip{position:relative;z-index:8;margin-top:-70px}
.info-grid{max-width:1160px;margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.info-card{
  height:92px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 20px;
  background:#fff;
  border:1px solid rgba(20,38,60,.05);
  border-radius:16px;
  box-shadow:0 22px 46px rgba(10,28,47,.14);
}
.info-icon{
  width:50px;height:50px;
  flex:0 0 43px;
  display:grid;place-items:center;
  border-radius:14px;
  color:#b98436;
  background:#fbf3e6;
  border:1px solid #f2e2c9;
  font-size:24px;
}
.info-card small{display:block;margin-bottom:3px;color:#8c96a4;font-size:12px;font-weight:700;line-height:1.05}
.info-card strong{display:block;color:#14263c;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:16px;font-weight:800;white-space:nowrap;line-height:1.25}

/* ===== MAIN ===== */
.main-section{padding:84px 0 76px;background:linear-gradient(180deg,#fff 0%,#fffaf3 100%)}
.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:0 0 34px;
  color:#182b43;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:24px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
}
.section-title::before,.section-title::after{content:"";width:80px;height:1px;background:linear-gradient(90deg,transparent,#d7a14c,transparent)}
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:68px;align-items:start;margin-top:22px}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px}
.package-card{
  min-height:238px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(20,38,60,.06);
  border-radius:18px;
  box-shadow:0 24px 54px rgba(10,28,47,.13);
}
.package-head{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  border-radius:18px 18px 12px 12px;
  color:#fff;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:20px;
  font-weight:800;
  line-height:1.1;
}
.package-head small{font-size:12px;font-weight:700;opacity:.95}
.package-card.vip .package-head{background:linear-gradient(180deg,#0c263f 0%,#071d33 100%)}
.package-card.regular .package-head{background:linear-gradient(180deg,#d7a146 0%,#a66a20 100%)}
.package-card.donate .package-head{background:linear-gradient(180deg,#c8352d 0%,#98201d 100%)}
.big-icon{font-size:39px;line-height:1;color:#f3c979;text-shadow:0 2px 8px rgba(0,0,0,.18)}
.package-card.regular .big-icon,.package-card.donate .big-icon{color:#fff}
.package-body{padding:24px 34px 28px;text-align:center}
.price{color:#172638;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:34px;font-weight:900;line-height:1.1}
.price small{margin-left:4px;font-size:14px;font-weight:700;color:#172638}
.benefits{list-style:none;margin:0;padding:18px 0 0;text-align:left;color:#4a596c;font-size:14px;font-weight:600;line-height:1.78}
.benefits li{display:flex;gap:8px;align-items:flex-start}
.benefits li::before{
  content:"✓";
  width:14px;height:14px;
  flex:0 0 14px;
  margin-top:3px;
  display:inline-grid;place-items:center;
  border:1px solid #dfb979;
  border-radius:50%;
  color:#c48e3d;
  font-size:9px;
  font-weight:900;
}
.donate-text{max-width:250px;margin:18px auto 24px;color:#5f6c7e;font-size:15px;font-weight:600;line-height:1.7}
.detail-col{padding-top:12px}
.detail-title{
  display:flex;align-items:center;justify-content:center;gap:13px;
  margin:0 0 14px;
  color:#182b43;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:20px;font-weight:800;line-height:1.25;
}
.detail-title::before,.detail-title::after{content:"";height:1px;width:54px;background:linear-gradient(90deg,transparent,#d7a14c,transparent)}
.accordion{display:grid;gap:18px}
.acc-item{overflow:hidden;background:#fff;border:1px solid rgba(20,38,60,.06);border-radius:15px;box-shadow:0 18px 36px rgba(10,28,47,.09)}
.acc-button{width:100%;min-height:64px;padding:0 22px;border:0;background:#fff;display:flex;align-items:center;gap:13px;color:#1b2d43;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:14px;font-weight:700;cursor:pointer;text-align:left}
.acc-icon{font-size:18px;color:#172c44}.chev{margin-left:auto;transition:transform .2s ease}.acc-item.is-open .chev{transform:rotate(180deg)}
.acc-panel{display:none;padding:0 18px 16px 48px;color:#637085;font-size:13.5px;font-weight:500}.acc-item.is-open .acc-panel{display:block}
.steps-wrap{margin-top:62px}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;align-items:stretch}
.step-card{
  position:relative;
  min-height:116px;
  display:grid;
  grid-template-columns:70px 1fr;
  align-items:center;
  gap:7px;
  padding:12px 18px;
  background:#fff;
  border:1px solid rgba(20,38,60,.06);
  border-radius:16px;
  box-shadow:0 22px 44px rgba(10,28,47,.12);
}
.step-card:not(:last-child)::after{content:"›";position:absolute;right:-24px;top:50%;transform:translateY(-50%);color:#c9964a;font-size:40px;font-weight:300;line-height:1}
.step-number{position:absolute;top:9px;left:11px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#0b2643;color:#fff;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:15px;font-weight:800;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.step-icon{padding-top:14px;color:#0a2542;text-align:center;font-size:38px;line-height:1}
.step-content strong{display:block;color:#172638;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:14px;font-weight:800;line-height:1.25}
.step-content small{display:block;color:#536275;font-size:12px;font-weight:500;line-height:1.35}
.cta-band{
  margin:64px auto 0;
  min-height:112px;
  display:grid;
  grid-template-columns:300px 1fr 260px;
  align-items:center;
  gap:22px;
  padding:24px 34px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(90deg,#071d33 0%,#0b2d4e 54%,#071d33 100%);
  box-shadow:0 14px 28px rgba(7,29,51,.23);
}
.phone-block{display:flex;align-items:center;gap:15px}.phone-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#ffd58d,#ebb252);color:#0a2542;font-size:29px}.phone-block small{display:block;color:#cdd7e4;font-weight:700}.phone-block strong{display:block;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:24px;letter-spacing:1px;font-weight:800;line-height:1.1}.cta-text{text-align:center}.cta-text strong{display:block;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:22px;font-weight:800;line-height:1.2}.cta-text small{display:block;margin-top:4px;color:#d9e2ed;font-weight:500}.cta-band .btn{width:100%;justify-content:space-between;border-radius:11px;font-size:17px}.arrow{font-size:30px;line-height:1}

/* ===== FOOTER ===== */
.site-footer{background:#06172a;color:#d5deea;padding:30px 0;border-top:1px solid rgba(243,201,121,.18)}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.footer-brand{font-family:Georgia,"Times New Roman",serif;color:#ffd184;font-size:22px;font-weight:800}.footer-copy{font-size:12px;color:#aeb9c8}.footer-links{display:flex;gap:34px;font-size:12px;color:#aeb9c8}.footer-social{display:flex;gap:10px}.social-dot{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#d6dfeb;color:#071d33;font-size:11px;font-weight:800}

/* ===== INNER PAGES ===== */
.page-shell{min-height:calc(100vh - 72px);background:linear-gradient(180deg,#fffaf2,#fff);padding:46px 0}.page-card{max-width:900px;margin:auto;background:#fff;border-radius:20px;box-shadow:var(--shadow-card);border:1px solid rgba(20,38,60,.07);padding:30px}.page-title{font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:30px;font-weight:800;margin:0 0 8px;color:#071d33}.page-lead{margin:0 0 24px;color:#667489}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-family:"Prompt","Noto Sans Thai",sans-serif;font-weight:700;color:#1d3048}.field input,.field select,.field textarea{width:100%;border:1px solid #dce3eb;border-radius:12px;padding:12px 14px;background:#fff;color:#172638;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#e2ad54;box-shadow:0 0 0 4px rgba(240,193,109,.18)}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}.note-box{border:1px solid #f1dfbd;background:#fff8ea;border-radius:14px;padding:14px;color:#66491f;font-weight:600}.status-result{margin-top:18px;border-radius:14px;background:#f7fbff;border:1px solid #dce9f5;padding:18px;display:none}.status-result.show{display:block}.login-card{max-width:420px;margin:30px auto 0}.tiny-muted{color:#8090a3;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}



/* ===== PREMIUM LAYOUT DEPTH ===== */
.hero-copy,
.summary-card,
.info-card,
.package-card,
.step-card,
.cta-band{will-change:transform}
.hero-copy{filter:drop-shadow(0 16px 32px rgba(0,0,0,.18))}
.info-card,.package-card,.step-card,.acc-item,.cta-band{transition:transform .18s ease, box-shadow .18s ease}
.info-card:hover,.package-card:hover,.step-card:hover{transform:translateY(-3px)}
.info-card:hover{box-shadow:0 28px 54px rgba(10,28,47,.18)}
.package-card:hover{box-shadow:0 30px 70px rgba(10,28,47,.18)}
.step-card:hover{box-shadow:0 28px 58px rgba(10,28,47,.16)}
.brand-badge{position:relative;overflow:hidden}
.brand-badge::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transform:translateX(-60%) rotate(8deg)}
.brand:hover .brand-badge::after{transform:translateX(60%) rotate(8deg);transition:transform .5s ease}
.brand-name{background:linear-gradient(180deg,#ffe0a3 0%,#f3bd62 60%,#c78935 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.summary-card{overflow:hidden}
.summary-card:hover{transform:translateY(-17px);box-shadow:0 0 70px rgba(247,202,119,.40),0 0 130px rgba(238,177,84,.20),0 34px 74px rgba(0,0,0,.44),0 12px 32px rgba(229,63,55,.2)}

/* ===== RESPONSIVE ===== */
@media (max-width:1160px){.hero-inner{grid-template-columns:1fr 360px;gap:34px}.package-grid{gap:22px}.content-layout{grid-template-columns:1fr;gap:28px}.detail-col{width:100%;max-width:620px;margin-inline:auto}.steps-grid{gap:18px}.step-card:not(:last-child)::after{right:-16px}.cta-band{grid-template-columns:1fr}.cta-text{text-align:left}.footer-row{flex-wrap:wrap}.info-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.site-header{height:auto}.navbar{height:72px}.mobile-toggle{display:block}.nav-menu{position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;background:#071d33;padding:12px 24px 18px;border-top:1px solid rgba(255,255,255,.08)}.nav-menu.is-open{display:flex}.nav-link{padding:12px 0}.nav-link.is-active::after{display:none}.nav-admin{text-align:center;margin-top:8px}.brand-name{font-size:18px}.hero{min-height:unset}.hero-inner{grid-template-columns:1fr;padding:64px 0 122px}.summary-card{max-width:410px;margin-inline:auto;transform:none}.hero-title{font-size:48px}.hero-subtitle{font-size:20px}.package-grid{grid-template-columns:1fr}.steps-grid{grid-template-columns:1fr 1fr}.step-card:not(:last-child)::after{display:none}.cta-band{padding:18px}.footer-row{display:grid;text-align:center;justify-items:center}.footer-links{justify-content:center}.form-grid{grid-template-columns:1fr}.hero-actions .btn{flex:1 1 220px}.section-title::before,.section-title::after{width:42px}}
@media (max-width:560px){.container{width:min(100% - 24px,var(--max))}.hero-inner{padding:42px 0 92px}.hero-title{font-size:38px;letter-spacing:-1px}.hero-desc{font-size:14px}.summary-date-row{grid-template-columns:86px 1fr}.calendar-box{width:86px;height:74px}.calendar-day{font-size:32px}.summary-card{width:100%;max-width:410px;padding:20px 24px 20px 36px;min-height:auto}.summary-card::before{display:none}.summary-card{--mobile-mask:none;-webkit-mask:none;mask:none}.info-strip{margin-top:-38px}.info-grid{grid-template-columns:1fr;gap:12px}.info-card{height:70px}.steps-grid{grid-template-columns:1fr}.cta-text strong{font-size:18px}.phone-block strong{font-size:21px}.footer-links{gap:14px;flex-wrap:wrap}.page-card{padding:20px;border-radius:16px}.page-title{font-size:24px}.main-section{padding-top:54px}.section-title{font-size:18px}.package-body{padding-left:24px;padding-right:24px}.kicker-icon{margin-left:70px}.nav-menu{padding-left:12px;padding-right:12px}}


/* ===== OFFLINE BOOTSTRAP ICONS TUNING ===== */
.bi{line-height:1;display:inline-block;vertical-align:-.125em}
.btn .bi{font-size:15px;margin-right:8px}
.s-icon .bi{font-size:25px;filter:drop-shadow(0 0 5px rgba(243,197,111,.18))}
.info-icon .bi{font-size:22px}
.big-icon .bi{font-size:39px;line-height:1}
.step-icon .bi{font-size:36px;line-height:1}
.acc-icon{width:20px;display:inline-grid;place-items:center}
.acc-icon .bi{font-size:18px}
.phone-icon .bi{font-size:26px}

/* ===== V7 LOGO PREMIUM UPGRADE ===== */
.site-header{
  height:78px;
  min-height:78px;
  background:linear-gradient(90deg,rgba(3,18,33,.96) 0%,rgba(6,32,55,.92) 50%,rgba(3,18,33,.96) 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(245,202,116,.22);
  box-shadow:0 12px 30px rgba(0,0,0,.24);
  overflow:visible;
}
.navbar{
  height:78px;
  align-items:flex-start;
  overflow:visible;
}
.brand-premium{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  min-width:max-content;
  height:78px;
  padding:9px 24px 12px 14px;
  isolation:isolate;
  z-index:2;
}
.brand-premium::before{
  content:"";
  position:absolute;
  left:-18px;
  top:-1px;
  width:calc(100% + 36px);
  height:79px;
  z-index:-2;
  background:linear-gradient(90deg,rgba(8,30,52,.96) 0%,rgba(8,34,58,.94) 54%,rgba(7,28,49,.96) 100%);
  border-left:1px solid rgba(245,202,116,.14);
  border-right:1px solid rgba(245,202,116,.14);
  border-bottom:1px solid rgba(245,202,116,.20);
  border-radius:0 0 42px 42px;
  box-shadow:0 16px 34px rgba(0,0,0,.22), inset 0 -1px 0 rgba(255,229,168,.10);
}
.brand-premium::after{
  content:"";
  position:absolute;
  left:32px;
  bottom:-11px;
  width:118px;
  height:24px;
  z-index:-1;
  background:linear-gradient(180deg,rgba(8,33,57,.98) 0%,rgba(6,24,42,.96) 100%);
  border-left:1px solid rgba(245,202,116,.12);
  border-right:1px solid rgba(245,202,116,.12);
  border-bottom:1px solid rgba(245,202,116,.18);
  border-radius:0 0 36px 36px;
  box-shadow:0 10px 18px rgba(0,0,0,.16);
}
.brand-emblem-wrap{
  position:relative;
  width:72px;
  height:72px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 72px;
}
.brand-emblem-wrap::before,
.brand-emblem-wrap::after{display:none;content:none;}
.brand-emblem{
  width:auto;
  height:70px;
  object-fit:contain;
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.26))
    drop-shadow(0 0 12px rgba(244,198,104,.22));
  transform:none;
}
.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  line-height:1;
  padding-top:0;
}
.brand-copy strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:26px;
  font-weight:900;
  letter-spacing:.2px;
  background:linear-gradient(180deg,#ffe9b4 0%,#f5c96f 52%,#cb8f39 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.24));
}
.brand-copy small{
  display:block;
  color:#f5ddb1;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.7px;
  text-shadow:0 1px 6px rgba(0,0,0,.26);
}
.brand-premium:hover .brand-emblem{
  transform:translateY(-1px) scale(1.02);
  transition:transform .22s ease,filter .22s ease;
  filter:
    drop-shadow(0 9px 18px rgba(0,0,0,.32))
    drop-shadow(0 0 16px rgba(244,198,104,.30));
}
.brand-badge,.brand-name{display:none;}
.page-shell{min-height:calc(100vh - 78px);}

@media (max-width:860px){
  .site-header{height:72px;min-height:72px;}
  .navbar{height:72px;}
  .brand-premium{height:72px;gap:12px;padding:8px 16px 10px 10px;}
  .brand-premium::before{left:-10px;width:calc(100% + 20px);height:73px;border-radius:0 0 32px 32px;}
  .brand-premium::after{left:20px;bottom:-9px;width:88px;height:19px;border-radius:0 0 28px 28px;}
  .brand-emblem-wrap{width:58px;height:58px;flex-basis:58px;}
  .brand-emblem{height:56px;}
  .brand-copy strong{font-size:21px;}
  .brand-copy small{font-size:9.5px;letter-spacing:1.1px;}
  .nav-menu{top:72px;}
}
@media (max-width:560px){
  .brand-premium{gap:10px;padding-right:12px;}
  .brand-premium::before{border-radius:0 0 24px 24px;}
  .brand-premium::after{left:18px;width:74px;height:16px;bottom:-7px;}
  .brand-emblem-wrap{width:50px;height:50px;flex-basis:50px;}
  .brand-emblem{height:48px;}
  .brand-copy strong{font-size:17px;}
  .brand-copy small{font-size:8px;letter-spacing:.9px;}
}


/* ===== V7 REFINED POLISH =====
   เป้าหมาย: ไม่รื้อ layout เดิม แต่ปรับน้ำหนักภาพให้เนียนขึ้น
   - โลโก้เบาลงและเป็นส่วนเดียวกับ navbar
   - overlay ภาพ Hero สว่าง/มีชีวิตขึ้น
   - Event Summary มีมิติและออร่ามากขึ้น
   - Info Cards เป็น glass card ลอยทับ wave มากขึ้น
*/
.site-header{
  height:76px;
  min-height:76px;
  background:linear-gradient(90deg,rgba(3,18,33,.95) 0%,rgba(7,31,53,.90) 52%,rgba(3,18,33,.95) 100%);
  border-bottom:1px solid rgba(245,202,116,.20);
  box-shadow:0 10px 24px rgba(0,0,0,.20);
}
.navbar{
  height:76px;
}
.brand-premium{
  height:76px;
  gap:14px;
  padding:8px 22px 10px 12px;
}
.brand-premium::before{
  left:-14px;
  top:-1px;
  width:calc(100% + 28px);
  height:77px;
  border-radius:0 0 30px 30px;
  background:linear-gradient(90deg,rgba(7,28,49,.96),rgba(8,34,58,.93),rgba(7,28,49,.96));
  border-left:1px solid rgba(245,202,116,.11);
  border-right:1px solid rgba(245,202,116,.11);
  border-bottom:1px solid rgba(245,202,116,.16);
  box-shadow:
    0 11px 24px rgba(0,0,0,.15),
    inset 0 -1px 0 rgba(255,229,168,.08);
}
.brand-premium::after{
  left:32px;
  bottom:-7px;
  width:104px;
  height:16px;
  border-radius:0 0 28px 28px;
  opacity:.62;
  box-shadow:0 7px 14px rgba(0,0,0,.10);
}
.brand-emblem-wrap{
  width:62px;
  height:62px;
  flex-basis:62px;
}
.brand-emblem{
  height:60px;
  filter:
    drop-shadow(0 6px 12px rgba(0,0,0,.22))
    drop-shadow(0 0 9px rgba(244,198,104,.20));
}
.brand-copy strong{
  font-size:25px;
}
.brand-copy small{
  font-size:10.5px;
  letter-spacing:1.55px;
  margin-top:0;
}

/* ภาพ Hero: ลดความดำทั่วภาพ และคืนแสงทอง/มิติให้สนาม */
.hero{
  background-image:
    radial-gradient(circle at 77% 33%,rgba(245,190,95,.24),rgba(245,190,95,.07) 25%,transparent 48%),
    radial-gradient(ellipse at 48% 58%,rgba(255,220,145,.12),transparent 44%),
    linear-gradient(90deg,rgba(3,16,30,.84) 0%,rgba(3,16,30,.62) 34%,rgba(3,16,30,.30) 62%,rgba(3,16,30,.14) 100%),
    linear-gradient(180deg,rgba(3,16,30,.05) 0%,rgba(3,16,30,.10) 62%,rgba(3,16,30,.24) 100%),
    url("../img/hero-bg.png");
  background-size:cover;
  background-position:center 47%;
}
.hero::before{
  background:
    radial-gradient(circle at 74% 34%,rgba(255,216,142,.20),rgba(255,216,142,0) 34%),
    radial-gradient(circle at 17% 30%,rgba(255,255,255,.08),rgba(255,255,255,0) 28%),
    linear-gradient(115deg,rgba(255,255,255,.035),rgba(255,255,255,0) 44%);
  opacity:.82;
}
.hero-title{
  letter-spacing:-1.25px;
  text-shadow:0 7px 24px rgba(0,0,0,.44);
}
.hero-title .gold,
.gold{
  background:linear-gradient(180deg,#ffe3a4 0%,#e9ba63 64%,#c7903f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Event Summary: เพิ่มขอบทองนุ่มและออร่า ไม่เปลี่ยนโครงเดิม */
.summary-card{
  border:1px solid rgba(246,201,121,.18);
  border-bottom:6px solid #dc3b33;
  background:
    radial-gradient(circle at 72% 18%,rgba(28,74,112,.34) 0%,rgba(28,74,112,0) 48%),
    linear-gradient(147deg,rgba(8,37,64,.97) 0%,rgba(6,28,52,.96) 46%,rgba(4,20,37,.97) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 78px rgba(247,202,119,.26),
    0 34px 76px rgba(0,0,0,.36),
    0 12px 28px rgba(229,63,55,.16);
}
.summary-card::after{
  width:250px;
  height:210px;
  right:-38px;
  top:-30px;
  background:radial-gradient(circle,rgba(255,218,147,.17) 0%,rgba(255,218,147,.06) 38%,rgba(255,218,147,0) 68%);
}
.calendar-box{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 14px 28px rgba(220,58,51,.30),
    0 0 26px rgba(239,81,71,.16);
}

/* Info Cards: glass premium และยกขึ้นให้ลอยทับ wave มากขึ้น */
.info-strip{
  margin-top:-86px;
  position:relative;
  z-index:9;
}
.info-grid{
  gap:30px;
}
.info-card{
  height:94px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(241,194,105,.32);
  box-shadow:
    0 24px 54px rgba(8,24,42,.14),
    0 0 32px rgba(241,194,105,.10),
    inset 0 1px 0 rgba(255,255,255,.82);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.info-card:hover{
  transform:translateY(-4px);
  border-color:rgba(241,194,105,.48);
  box-shadow:
    0 30px 62px rgba(8,24,42,.17),
    0 0 42px rgba(241,194,105,.14),
    inset 0 1px 0 rgba(255,255,255,.86);
}
.info-icon{
  width:52px;
  height:52px;
  flex-basis:52px;
  background:linear-gradient(180deg,#fff8ea 0%,#f4ddb5 100%);
  color:#b47a2c;
  border:1px solid rgba(222,177,103,.40);
  box-shadow:
    0 9px 18px rgba(190,130,45,.16),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.main-section{
  padding-top:96px;
}

/* รายละเอียดเล็ก ๆ ให้จังหวะภาพนุ่มขึ้น */
.btn-outline{
  background:rgba(4,19,34,.38);
  border-color:rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.12);
}
.btn-gold{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    0 10px 26px rgba(217,157,69,.30),
    0 0 26px rgba(245,197,105,.14);
}

@media (max-width:860px){
  .site-header{height:72px;min-height:72px;}
  .navbar{height:72px;}
  .brand-premium{height:72px;}
  .brand-premium::before{height:73px;border-radius:0 0 26px 26px;}
  .brand-emblem-wrap{width:54px;height:54px;flex-basis:54px;}
  .brand-emblem{height:52px;}
  .brand-copy strong{font-size:21px;}
  .brand-copy small{font-size:9.5px;}
  .nav-menu{top:72px;}
}


/* ===== V7 CLEAN PREMIUM NAVBAR FIX =====
   ยกเลิก curved logo panel ที่ดูหนัก/ทับหัวเว็บ
   เปลี่ยนเป็น Navbar เรียบ หรู กระชับ ใช้ Crest logo ขนาดพอดี
*/
.site-header{
  height:70px !important;
  min-height:70px !important;
  background:linear-gradient(90deg,rgba(3,18,33,.97) 0%,rgba(7,29,50,.94) 50%,rgba(3,18,33,.97) 100%) !important;
  border-bottom:1px solid rgba(245,202,116,.20) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
  overflow:visible !important;
}

.navbar{
  height:70px !important;
  align-items:center !important;
  overflow:visible !important;
}

.brand,
.brand-premium{
  height:70px !important;
  min-width:max-content !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:0 !important;
  margin:0 !important;
  position:relative !important;
  isolation:auto !important;
}

/* ปิดฐานโค้ง/ก้อนพื้นหลังทั้งหมด */
.brand-premium::before,
.brand-premium::after,
.brand-emblem-wrap::before,
.brand-emblem-wrap::after{
  display:none !important;
  content:none !important;
}

.brand-emblem-wrap{
  width:50px !important;
  height:50px !important;
  flex:0 0 50px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.brand-emblem{
  width:auto !important;
  height:48px !important;
  object-fit:contain !important;
  transform:none !important;
  filter:
    drop-shadow(0 4px 8px rgba(0,0,0,.22))
    drop-shadow(0 0 7px rgba(244,198,104,.18)) !important;
}

.brand-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:2px !important;
  padding:0 !important;
  line-height:1 !important;
}

.brand-copy strong{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:23px !important;
  font-weight:900 !important;
  letter-spacing:.15px !important;
  background:linear-gradient(180deg,#ffe5a8 0%,#f5c56d 58%,#c88b34 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.20)) !important;
}

.brand-copy small{
  margin:3px 0 0 !important;
  color:#f4ddb1 !important;
  font-family:"Prompt","Noto Sans Thai",sans-serif !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1.35px !important;
  text-shadow:0 1px 5px rgba(0,0,0,.22) !important;
}

.brand-premium:hover .brand-emblem{
  transform:translateY(-1px) scale(1.018) !important;
  transition:transform .18s ease, filter .18s ease !important;
  filter:
    drop-shadow(0 5px 10px rgba(0,0,0,.26))
    drop-shadow(0 0 10px rgba(244,198,104,.24)) !important;
}

.nav-menu{
  align-items:center !important;
}

.nav-link{
  padding:23px 0 18px !important;
}

.nav-link.is-active::after{
  bottom:10px !important;
}

.nav-admin{
  height:38px !important;
  min-width:104px !important;
}

/* ชดเชย Hero ไม่ให้รู้สึกถูก Navbar กินพื้นที่ */
.hero-inner{
  padding-top:96px !important;
}

@media (max-width:860px){
  .site-header,
  .navbar,
  .brand,
  .brand-premium{
    height:66px !important;
    min-height:66px !important;
  }

  .brand-emblem-wrap{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  .brand-emblem{
    height:40px !important;
  }

  .brand-copy strong{
    font-size:19px !important;
  }

  .brand-copy small{
    font-size:8.5px !important;
    letter-spacing:1px !important;
  }

  .nav-menu{
    top:66px !important;
  }
}

@media (max-width:560px){
  .brand,
  .brand-premium{
    gap:9px !important;
  }

  .brand-emblem-wrap{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }

  .brand-emblem{
    height:36px !important;
  }

  .brand-copy strong{
    font-size:17px !important;
  }

  .brand-copy small{
    font-size:7.5px !important;
    letter-spacing:.75px !important;
  }
}


/* ===== CRMA47 SYSTEM v1.2 DISPLAY FIX =====
   แก้การแสดงผลเพี้ยนจาก HTML class ไม่ตรงกับ CSS เดิม:
   - ขั้นตอนการสมัครกลับเป็น 4 การ์ดแนวนอน
   - CTA ด้านล่างกลับเป็นแถบเต็ม
   - ป้องกัน class เก่า .steps/.bottom-cta เพี้ยน หากมีหลงเหลือ
*/
.steps-wrap{
  margin-top:62px;
}
.steps-grid,
.steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:34px;
  align-items:stretch;
}
.step-card{
  min-width:0;
}
.step-card .step-no{
  position:absolute;
  top:9px;
  left:11px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0b2643;
  color:#fff;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:15px;
  font-weight:800;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
}
.step-card > strong,
.step-card > small{
  display:none;
}
.step-content{
  min-width:0;
}
.bottom-cta{
  margin:64px auto 0;
  min-height:112px;
  display:grid;
  grid-template-columns:300px 1fr 260px;
  align-items:center;
  gap:22px;
  padding:24px 34px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(90deg,#071d33 0%,#0b2d4e 54%,#071d33 100%);
  box-shadow:0 14px 28px rgba(7,29,51,.23);
}
.cta-phone{
  display:flex;
  align-items:center;
  gap:15px;
}
.cta-phone small{
  display:block;
  color:#cdd7e4;
  font-weight:700;
}
.cta-phone strong{
  display:block;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:24px;
  letter-spacing:1px;
  font-weight:800;
  line-height:1.1;
}
.bottom-cta .btn{
  width:100%;
  justify-content:space-between;
  border-radius:11px;
  font-size:17px;
}
@media(max-width:1180px){
  .steps-grid,
  .steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .step-card:nth-child(2)::after{
    display:none;
  }
}
@media(max-width:860px){
  .steps-grid,
  .steps{
    grid-template-columns:1fr;
    gap:16px;
  }
  .step-card:not(:last-child)::after{
    display:none;
  }
  .cta-band,
  .bottom-cta{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .phone-block,
  .cta-phone{
    justify-content:center;
  }
}


/* ===== CRMA47 SYSTEM v1.3 PREMIUM ACCORDION =====
   ปรับ "ข้อมูลและรายละเอียด" ให้เป็น Premium Glass Accordion
   ใช้ HTML <details>/<summary> จริง จึงแสดงผลในเว็บได้จริง ไม่ใช่ภาพหลอก
*/
.detail-col{
  padding-top:6px;
}

.detail-title{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 0 22px;
  color:#0b2340;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:22px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.2px;
  text-align:center;
}

.detail-title::before,
.detail-title::after{
  content:"";
  width:76px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(204,143,54,.72),transparent);
}

.accordion{
  display:grid;
  gap:16px;
}

details.acc-item{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(218,165,82,.22);
  box-shadow:
    0 18px 42px rgba(10,28,47,.09),
    inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

details.acc-item:hover{
  transform:translateY(-2px);
  border-color:rgba(218,165,82,.34);
  box-shadow:
    0 22px 50px rgba(10,28,47,.12),
    0 0 24px rgba(218,165,82,.10),
    inset 0 1px 0 rgba(255,255,255,.82);
}

details.acc-item[open]{
  border-color:rgba(218,165,82,.48);
  background:rgba(255,255,255,.88);
  box-shadow:
    0 26px 62px rgba(10,28,47,.14),
    0 0 34px rgba(218,165,82,.13),
    inset 0 1px 0 rgba(255,255,255,.86);
}

details.acc-item summary{
  min-height:68px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  cursor:pointer;
  list-style:none;
  color:#0d2745;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-size:15.5px;
  font-weight:850;
  line-height:1.25;
  user-select:none;
}

details.acc-item summary::-webkit-details-marker{
  display:none;
}

details.acc-item summary::marker{
  content:"";
}

details.acc-item summary > span{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:14px;
}

.acc-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#b57b29;
  background:
    radial-gradient(circle at 36% 26%,rgba(255,255,255,.92),rgba(255,255,255,0) 36%),
    linear-gradient(180deg,#fff8ea 0%,#f3dfba 100%);
  border:1px solid rgba(218,165,82,.32);
  box-shadow:
    0 9px 18px rgba(176,116,35,.12),
    inset 0 1px 0 rgba(255,255,255,.85);
  font-size:20px;
  line-height:1;
}

details.acc-item summary > .bi-chevron-down{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  color:#0b2340;
  font-size:18px;
  transition:transform .18s ease;
}

details.acc-item[open] summary > .bi-chevron-down{
  transform:rotate(180deg);
}

details.acc-item p{
  margin:0;
  padding:2px 26px 26px 76px;
  color:#344055;
  font-size:14.5px;
  font-weight:600;
  line-height:1.85;
}

details.acc-item[open] summary{
  border-bottom:1px solid rgba(13,39,69,.08);
}

details.acc-item[open]::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:-28px;
  height:46px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(218,165,82,.13),transparent 70%);
}

@media(max-width:1180px){
  .detail-title{
    font-size:21px;
  }
  .detail-title::before,
  .detail-title::after{
    width:58px;
  }
}

@media(max-width:860px){
  details.acc-item summary{
    min-height:64px;
    padding:14px 16px;
    font-size:15px;
  }
  .acc-icon{
    width:40px;
    height:40px;
    flex-basis:40px;
    font-size:18px;
  }
  details.acc-item p{
    padding:0 20px 22px 70px;
    font-size:14px;
  }
}


/* ===== CRMA47 SYSTEM v1.4 PREMIUM BACKGROUND =====
   แก้พื้นหลังส่วนสีขาวให้ดูมีชีวิตขึ้น:
   - ใช้ warm ivory gradient
   - มี fairway watermark pattern แบบจาง ๆ
   - เพิ่ม gold glow / navy glow บางจุด
   - ออกแบบด้วย CSS + SVG จริง ใช้งานบนเว็บได้จริง
*/
:root{
  --section-ivory-1:#fcfbf7;
  --section-ivory-2:#f8f5ee;
  --section-ivory-3:#f5f0e5;
  --gold-soft:rgba(214,174,99,.14);
  --gold-line:rgba(214,174,99,.28);
  --navy-soft:rgba(11,35,64,.055);
}

body{
  background:linear-gradient(180deg,#fbfaf7 0%,#f8f5ee 100%);
}

.info-strip{
  position:relative;
  z-index:2;
}

.main-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(180deg,var(--section-ivory-1) 0%,var(--section-ivory-2) 52%,var(--section-ivory-1) 100%);
}

.main-section > .container{
  position:relative;
  z-index:2;
}

.main-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(720px 260px at 18% 16%, rgba(214,174,99,.10), transparent 62%),
    radial-gradient(520px 220px at 86% 28%, rgba(8,34,59,.055), transparent 62%),
    radial-gradient(640px 240px at 52% 68%, rgba(214,174,99,.06), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.18) 100%);
}

.main-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.72;
  background:
    url("../img/bg-premium-fairway.svg") center top / cover no-repeat;
  mix-blend-mode:normal;
}

.section-title{
  position:relative;
  z-index:2;
}

.content-layout{
  position:relative;
  z-index:2;
}

.package-grid{
  position:relative;
}

.package-grid::before{
  content:"";
  position:absolute;
  left:-50px;
  top:-24px;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(214,174,99,.10), transparent 68%);
  filter:blur(8px);
  pointer-events:none;
}

.package-grid::after{
  content:"";
  position:absolute;
  right:-30px;
  bottom:-28px;
  width:240px;
  height:160px;
  background:radial-gradient(circle, rgba(8,34,59,.06), transparent 70%);
  pointer-events:none;
}

.package-card{
  backdrop-filter:blur(3px);
}

.steps-wrap{
  position:relative;
  z-index:2;
}

.steps-wrap::before{
  content:"";
  position:absolute;
  left:-26px;
  top:22px;
  width:170px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,174,99,.08), transparent 70%);
  pointer-events:none;
}

.cta-band{
  position:relative;
  overflow:hidden;
}

.cta-band::before{
  content:"";
  position:absolute;
  inset:auto auto -40px -30px;
  width:220px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  pointer-events:none;
}

.cta-band::after{
  content:"";
  position:absolute;
  inset:-34px -42px auto auto;
  width:220px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(243,198,104,.16), transparent 74%);
  pointer-events:none;
}

.detail-col{
  position:relative;
  z-index:2;
}

.detail-col::before{
  content:"";
  position:absolute;
  right:-36px;
  top:8px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(214,174,99,.09), transparent 70%);
  filter:blur(8px);
  pointer-events:none;
}

.detail-title{
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

@media(max-width:1180px){
  .main-section::after{
    opacity:.58;
    background-size:1400px auto;
    background-position:center 40px;
  }
}

@media(max-width:860px){
  .main-section::before{
    background:
      radial-gradient(460px 180px at 18% 12%, rgba(214,174,99,.10), transparent 62%),
      radial-gradient(340px 150px at 82% 24%, rgba(8,34,59,.05), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.18) 100%);
  }

  .main-section::after{
    opacity:.46;
    background-size:1200px auto;
    background-position:center 110px;
  }

  .package-grid::before,
  .package-grid::after,
  .steps-wrap::before,
  .detail-col::before{
    display:none;
  }
}


/* ===== CRMA47 SYSTEM v1.5 SMART LANDING =====
   - ใช้ v1.4 premium background เป็นฐาน
   - เปลี่ยนการ์ด 4 ใบใต้ Hero เป็น Quick Action
   - เพิ่มรายชื่อทีมที่สมัครแล้ว
   - เพิ่มแผนผังสนาม
*/
.quick-action-strip{
  position:relative;
  z-index:10;
  margin-top:-74px;
  padding-bottom:54px;
}
.quick-action-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.quick-action-card{
  min-height:118px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 24px;
  align-items:center;
  gap:16px;
  padding:22px 20px;
  border-radius:22px;
  color:#14263c;
  text-decoration:none;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(232,194,125,.36);
  box-shadow:
    0 24px 54px rgba(8,24,42,.14),
    inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.quick-action-card:hover{
  transform:translateY(-5px);
  border-color:rgba(216,165,80,.56);
  box-shadow:
    0 30px 68px rgba(8,24,42,.18),
    0 0 36px rgba(216,165,80,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.quick-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.quick-icon.gold{color:#ac741f;background:linear-gradient(180deg,#fff3dc,#efd09a)}
.quick-icon.navy{color:#fff;background:linear-gradient(180deg,#123b60,#071d33)}
.quick-icon.green{color:#fff;background:linear-gradient(180deg,#2e7a61,#185740)}
.quick-icon.red{color:#fff;background:linear-gradient(180deg,#c7443d,#a22222)}
.quick-action-card small{
  display:block;
  color:#8a93a0;
  font-weight:800;
  font-size:12.5px;
}
.quick-action-card strong{
  display:block;
  margin-top:2px;
  color:#112640;
  font-size:18px;
  font-weight:900;
  line-height:1.2;
}
.quick-action-card em{
  display:block;
  margin-top:5px;
  color:#5d6a79;
  font-style:normal;
  font-weight:700;
  font-size:13px;
}
.quick-arrow{
  color:#bf8731;
  font-size:18px;
}

.smart-main{
  padding-top:24px;
}
.package-grid-smart{
  max-width:980px;
  margin:0 auto 58px;
}
.package-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  color:#0b2643;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}
.package-card.regular .package-cta{color:#8a5c13}
.package-card.vip .package-cta{color:#0b2643}

.team-map-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) 410px;
  gap:24px;
  margin-top:10px;
  align-items:start;
}
.team-preview-panel,
.course-preview-panel{
  border-radius:28px;
  padding:26px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(232,194,125,.32);
  box-shadow:0 24px 58px rgba(8,24,42,.11);
  backdrop-filter:blur(16px);
}
.smart-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.smart-section-head.compact{
  margin-bottom:14px;
}
.smart-section-head h2{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:#14263c;
  font-size:24px;
  font-weight:900;
}
.smart-section-head h2 i{color:#bf8731}
.smart-section-head p{
  margin:6px 0 0;
  color:#6b7788;
  font-weight:700;
  line-height:1.5;
}
.mini-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:max-content;
  color:#af741d;
  font-weight:900;
  text-decoration:none;
}
.team-preview-list{
  display:grid;
  gap:12px;
}
.team-preview-row{
  min-height:72px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 116px 58px;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:18px;
  text-decoration:none;
  color:#14263c;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(21,43,60,.06);
  box-shadow:0 10px 24px rgba(8,24,42,.055);
}
.team-logo{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  font-weight:900;
}
.team-logo.vip{background:#0b2643;color:#f1c76c}
.team-logo.regular{background:#1f6a52}
.team-preview-name strong{
  display:block;
  font-size:16px;
  font-weight:900;
}
.team-preview-name small{
  display:block;
  color:#6d7885;
  font-weight:700;
}
.team-preview-status{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
}
.team-preview-status.ok{
  color:#25834d;
  background:#e3f3e8;
}
.team-preview-status.wait{
  color:#b57b1e;
  background:#fff1cf;
}
.team-hole{
  min-height:32px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#0b2643;
  font-weight:900;
  background:#f3f5f6;
}
.course-map-thumb{
  display:block;
  padding:12px;
  border-radius:22px;
  background:linear-gradient(180deg,#f3eadb,#eee3d2);
  border:1px solid rgba(232,194,125,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70);
}
.course-map-thumb img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  border-radius:16px;
  filter:saturate(.84) contrast(.92) brightness(1.03);
}
.course-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.course-tags span{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  font-size:12px;
}
.course-tags .course-a{background:#a63a2d}
.course-tags .course-b{background:#246aa2}
.course-tags .course-c{background:#c0962f}

.smart-page .site-header + &,
.smart-page{
  background:
    radial-gradient(800px 360px at 12% 0%, rgba(214,174,99,.12), transparent 62%),
    linear-gradient(180deg,#fbfaf7,#f7f3ec);
}
.smart-list-card,
.course-full-card{
  max-width:1180px;
}
.course-map-full{
  margin-top:24px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,#f3eadb,#eee3d2);
  border:1px solid rgba(232,194,125,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70);
}
.course-map-full img{
  display:block;
  width:100%;
  max-height:720px;
  object-fit:contain;
  border-radius:18px;
  filter:saturate(.84) contrast(.92) brightness(1.03);
}
.course-info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:20px;
}
.course-info-grid div{
  min-height:86px;
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e7edf3;
  box-shadow:0 14px 30px rgba(10,28,47,.06);
}
.course-info-grid strong{
  display:block;
  color:#14263c;
  font-size:17px;
}
.course-info-grid small{
  display:block;
  color:#6d7885;
  font-weight:700;
}
.course-dot{
  display:inline-block;
  width:16px;
  height:16px;
  border-radius:50%;
  margin-right:8px;
}
.course-dot.a{background:#a63a2d}
.course-dot.b{background:#246aa2}
.course-dot.c{background:#c0962f}

@media(max-width:1180px){
  .quick-action-grid{grid-template-columns:repeat(2,1fr)}
  .team-map-section{grid-template-columns:1fr}
  .course-preview-panel{max-width:620px}
}
@media(max-width:860px){
  .quick-action-strip{
    margin-top:-36px;
    padding-bottom:32px;
  }
  .quick-action-grid,
  .package-grid-smart,
  .course-info-grid{
    grid-template-columns:1fr;
  }
  .quick-action-card{
    min-height:96px;
  }
  .team-preview-row{
    grid-template-columns:44px 1fr;
  }
  .team-preview-status,
  .team-hole{
    grid-column:2;
    justify-self:start;
    margin-top:4px;
  }
  .smart-section-head{
    display:grid;
  }
}


/* ===== CRMA47 v1.5.1 SESSION + SYSTEM PAGE LAYOUT FIX =====
   แก้หน้า register/status/details/admin ให้เนื้อหาไม่ต่ำเกินไป
   และคง style เดิมของหน้าแรกไว้
*/
.system-page{
  padding-top:34px !important;
  padding-bottom:76px !important;
}

.system-card{
  margin-top:0 !important;
}

.smart-page{
  padding-top:34px !important;
}

@media(max-width:860px){
  .system-page,
  .smart-page{
    padding-top:24px !important;
    padding-bottom:52px !important;
  }
}


/* ===== v1.5.2 mobile polish + course map overlay ===== */
.kicker-icon{display:none !important;}
.quick-action-button,
.mini-link-button,
.course-map-open{font:inherit;border:none;appearance:none;-webkit-appearance:none;text-align:left;width:100%;cursor:pointer;}
.mini-link-button{background:none;padding:0;}
.course-map-open{padding:12px;}

.team-preview-row{
  grid-template-columns:46px minmax(0,1fr) 18px;
  align-items:start;
}
.team-preview-main{display:grid;gap:8px;}
.team-preview-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.team-preview-top strong{display:block;font-size:16px;font-weight:900;color:#14263c;line-height:1.25;}
.team-preview-type{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.02em;}
.team-preview-type.vip{background:#0b2643;color:#f2ca71;}
.team-preview-type.regular{background:#eef2f6;color:#607084;}
.team-preview-meta{display:block;color:#6d7885;font-weight:700;line-height:1.4;}
.team-preview-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.team-preview-status{min-height:28px;padding:0 12px;font-size:12px;}
.team-hole-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:999px;background:#f4f7fb;color:#22364e;font-size:12px;font-weight:900;}
.team-preview-arrow{display:grid;place-items:center;min-height:100%;color:#8794a3;font-size:18px;}

.image-overlay{position:fixed;inset:0;display:none;z-index:1200;}
.image-overlay.is-open{display:block;}
.image-overlay-backdrop{position:absolute;inset:0;background:rgba(3,15,28,.72);backdrop-filter:blur(6px);}
.image-overlay-dialog{position:relative;z-index:1;width:min(94vw,1200px);max-height:92vh;margin:4vh auto;background:linear-gradient(180deg,#f3eadb,#eee3d2);border:1px solid rgba(255,255,255,.28);border-radius:26px;padding:18px;box-shadow:0 30px 90px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;}
.image-overlay-dialog img{display:block;max-width:100%;max-height:calc(92vh - 36px);object-fit:contain;border-radius:18px;filter:saturate(.92) contrast(.96) brightness(1.02);}
.image-overlay-close{position:absolute;top:10px;right:10px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(11,38,67,.88);color:#fff;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.22);}
.map-overlay-page{position:relative;}
.course-overlay-launcher{display:none;}

@media (max-width:560px){
  .team-preview-panel, .course-preview-panel{padding:20px 18px;border-radius:24px;}
  .smart-section-head h2{font-size:18px;line-height:1.25;}
  .smart-section-head p{font-size:13px;line-height:1.45;}
  .team-preview-row{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 14px 15px;}
  .team-preview-arrow{display:none;}
  .team-preview-type{font-size:10px;padding:0 9px;}
  .team-preview-foot{gap:8px;}
  .team-preview-status,.team-hole-pill{font-size:11px;}
  .course-map-thumb img{aspect-ratio:auto;}
  .image-overlay-dialog{width:min(96vw,1200px);padding:12px;border-radius:20px;margin:3vh auto;}
  .image-overlay-dialog img{max-height:calc(94vh - 24px);border-radius:14px;}
  .image-overlay-close{top:8px;right:8px;width:38px;height:38px;font-size:24px;}
}


/* ===== v1.5.3 mobile polish =====
   เพิ่มความเป็นระบบให้การ์ดทีมบนมือถือ + overlay แผนผังมีปุ่มซูม
*/
.team-preview-panel{
  position:relative;
  overflow:hidden;
}
.team-preview-panel::after{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(191,135,49,.12),transparent 68%);
  pointer-events:none;
}
.team-preview-list{
  position:relative;
  z-index:1;
}
.team-preview-row{
  position:relative;
}
.team-preview-row:hover{
  transform:translateY(-2px);
  border-color:rgba(191,135,49,.22);
  box-shadow:0 16px 34px rgba(8,24,42,.09);
}
.team-hole-pill{
  max-width:100%;
}

/* Overlay map controls */
.image-overlay-dialog{
  width:min(96vw,1280px);
  max-height:94vh;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.image-overlay-toolbar{
  position:relative;
  z-index:2;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px 10px 18px;
  color:#fff;
  background:linear-gradient(90deg,rgba(7,29,51,.96),rgba(14,47,76,.94));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.image-overlay-toolbar span{
  font-weight:900;
  letter-spacing:.02em;
}
.image-overlay-toolbar div{
  display:flex;
  align-items:center;
  gap:8px;
}
.image-overlay-toolbar button{
  min-width:40px;
  height:36px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-weight:900;
  font-size:17px;
  cursor:pointer;
}
.image-overlay-toolbar button:hover{
  background:rgba(255,255,255,.20);
}
.image-overlay-stage{
  flex:1;
  min-height:0;
  display:grid;
  place-items:center;
  padding:14px;
  overflow:auto;
  background:linear-gradient(180deg,#f3eadb,#eee3d2);
  touch-action:pan-x pan-y;
}
.image-overlay-stage img{
  display:block;
  max-width:100%;
  max-height:calc(94vh - 82px);
  object-fit:contain;
  border-radius:18px;
  transform-origin:center center;
  transition:transform .16s ease;
  filter:saturate(.92) contrast(.96) brightness(1.02);
}
.image-overlay-close{display:none;}

/* Public teams page: table becomes cards on mobile */
@media(max-width:720px){
  .smart-list-card .table-wrap{
    border:0;
    overflow:visible;
  }
  .smart-list-card .data-table,
  .smart-list-card .data-table thead,
  .smart-list-card .data-table tbody,
  .smart-list-card .data-table tr,
  .smart-list-card .data-table th,
  .smart-list-card .data-table td{
    display:block;
    width:100%;
  }
  .smart-list-card .data-table thead{
    display:none;
  }
  .smart-list-card .data-table tr{
    margin:0 0 14px;
    padding:16px;
    border:1px solid rgba(20,38,60,.08);
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 32px rgba(10,28,47,.07);
  }
  .smart-list-card .data-table td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:9px 0;
    border-bottom:1px solid #eef2f6;
    white-space:normal;
    text-align:right;
    font-weight:800;
  }
  .smart-list-card .data-table td:last-child{
    border-bottom:0;
  }
  .smart-list-card .data-table td::before{
    content:attr(data-label);
    flex:0 0 118px;
    text-align:left;
    color:#6d7885;
    font-weight:800;
  }
}

/* Better mobile homepage visual hierarchy */
@media(max-width:560px){
  .hero-copy{
    max-width:100%;
  }
  .hero-title{
    position:relative;
    z-index:2;
  }
  .hero-title::before{
    content:"";
    position:absolute;
    left:-10px;
    top:-8px;
    width:56px;
    height:56px;
    border-radius:18px;
    background:rgba(7,29,51,.34);
    filter:blur(1px);
    z-index:-1;
  }
  .team-preview-top{
    align-items:flex-start;
  }
  .team-preview-top strong{
    font-size:17px;
  }
  .team-preview-meta{
    font-size:13px;
  }
  .team-hole-pill{
    background:#eef3f7;
    color:#253a54;
  }
  .image-overlay-toolbar{
    min-height:50px;
    padding:8px 10px 8px 14px;
  }
  .image-overlay-toolbar span{
    font-size:14px;
  }
  .image-overlay-toolbar button{
    min-width:34px;
    height:34px;
    border-radius:10px;
    font-size:15px;
  }
  .image-overlay-toolbar button[data-map-zoom-reset]{
    min-width:48px;
    font-size:12px;
  }
  .image-overlay-stage{
    padding:10px;
  }
  .image-overlay-stage img{
    max-height:calc(94vh - 70px);
    border-radius:14px;
  }
}


/* ===== v1.6.0 LIFF supporting pages ===== */
.payment-info-grid,
.contact-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}
.payment-qr-card,
.payment-bank-card,
.contact-card{
  border:1px solid #e7edf3;
  border-radius:20px;
  background:#fff;
  box-shadow:0 14px 34px rgba(10,28,47,.07);
  padding:22px;
}
.payment-qr-card{
  display:grid;
  place-items:center;
  text-align:center;
  gap:10px;
}
.mock-qr{
  width:190px;
  height:190px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#0a3555;
  background:
    linear-gradient(90deg,#111 10px,transparent 10px) 0 0/20px 20px,
    linear-gradient(#111 10px,transparent 10px) 0 0/20px 20px,
    #fff;
  border:12px solid #fff;
  box-shadow:0 0 0 1px #dfe6ee,0 16px 34px rgba(10,28,47,.12);
}
.mock-qr i{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:18px;
  background:#fff;
  font-size:50px;
}
.payment-bank-card span{
  color:#b9852b;
  font-weight:900;
}
.payment-bank-card h2{
  margin:6px 0 14px;
  color:#071d33;
}
.contact-card{
  display:grid;
  gap:8px;
  text-decoration:none;
  color:#071d33;
}
.contact-card i{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#0b7048;
  background:#edf8f1;
  font-size:28px;
}
.contact-card strong{font-size:20px}
.contact-card span{color:#657285;font-weight:700}
@media(max-width:720px){
  .payment-info-grid,
  .contact-card-grid{grid-template-columns:1fr}
  .mock-qr{width:160px;height:160px}
}


/* ===== v1.7.2 Course Map Overlay Fix =====
   แก้ปัญหา overlay แผนผังสนามชน/ถูกบังโดย navbar และเกิด scroll แปลก ๆ
*/
body.overlay-open{
  overflow:hidden !important;
  height:100dvh;
}
body.overlay-open .site-header{
  visibility:hidden;
  pointer-events:none;
}
.image-overlay,
.image-overlay.is-open{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
}
.image-overlay.is-open{
  display:block !important;
}
.image-overlay[hidden]:not(.is-open){
  display:none !important;
}
.image-overlay-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
}
.image-overlay-dialog{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:min(96vw,1280px) !important;
  height:min(94dvh,880px) !important;
  max-height:94dvh !important;
  margin:0 !important;
  z-index:1 !important;
}
.image-overlay-toolbar{
  flex:0 0 auto !important;
}
.image-overlay-stage{
  width:100% !important;
  height:100% !important;
  overflow:auto !important;
}
.image-overlay-stage img{
  max-height:calc(94dvh - 78px) !important;
}
.course-map-full{
  cursor:zoom-in;
}
@media(max-width:720px){
  .image-overlay-dialog{
    width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }
  .image-overlay-stage img{
    max-height:calc(100dvh - 62px) !important;
  }
}

/* ===== v1.7.3 Course Map Fullscreen Modal Fix =====
   แก้ปัญหากดเมนูแผนผังสนามแล้ว toolbar ค้างทับหน้า Home
   สาเหตุหลัก: overlay อยู่ใน .main-section ที่มี isolation/stacking context
   แนวทางแก้: JS ย้าย overlay ไปไว้ใต้ body และ CSS บังคับ modal เต็มหน้าจอ
*/
html.overlay-open,
body.overlay-open{
  overflow:hidden !important;
  width:100%;
  height:100%;
  overscroll-behavior:none;
}
body.overlay-open .site-header{
  visibility:hidden;
  pointer-events:none;
}
.image-overlay{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483600 !important;
  display:none !important;
  width:100vw !important;
  height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  background:rgba(3,15,28,.88) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow:hidden !important;
}
.image-overlay.is-open{
  display:flex !important;
  flex-direction:column !important;
}
.image-overlay[hidden]:not(.is-open){
  display:none !important;
}
.image-overlay-backdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:transparent !important;
}
.image-overlay-dialog{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  z-index:1 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  background:linear-gradient(180deg,#f5ead8 0%,#efe3d2 100%) !important;
  overflow:hidden !important;
}
.image-overlay-toolbar{
  position:relative !important;
  z-index:3 !important;
  flex:0 0 auto !important;
  min-height:58px !important;
  padding:10px max(14px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  background:linear-gradient(90deg,rgba(7,29,51,.98),rgba(14,47,76,.97)) !important;
  border-bottom:1px solid rgba(255,255,255,.13) !important;
  color:#fff !important;
}
.image-overlay-toolbar > span{
  margin-right:auto;
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
}
.image-overlay-toolbar > div{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:auto;
}
.image-overlay-toolbar button{
  min-width:40px !important;
  height:38px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.20) !important;
  background:rgba(255,255,255,.13) !important;
  color:#fff !important;
  font-weight:900 !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.image-overlay-toolbar button[data-map-zoom-reset]{
  min-width:66px !important;
}
.image-overlay-stage{
  position:relative !important;
  z-index:2 !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  height:auto !important;
  display:grid !important;
  place-items:center !important;
  padding:16px !important;
  overflow:auto !important;
  background:linear-gradient(180deg,#f5ead8 0%,#efe3d2 100%) !important;
  overscroll-behavior:contain !important;
  touch-action:pan-x pan-y !important;
}
.image-overlay-stage img{
  display:block !important;
  width:auto !important;
  max-width:min(1600px, calc(100vw - 32px)) !important;
  max-height:calc(100dvh - 90px) !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:16px !important;
  transform-origin:center center !important;
  transition:transform .16s ease !important;
  box-shadow:0 18px 60px rgba(10,28,47,.22) !important;
}
@media(max-width:720px){
  .image-overlay-toolbar{
    min-height:56px !important;
    justify-content:space-between !important;
    padding:8px 10px !important;
  }
  .image-overlay-toolbar > span{
    font-size:14px;
  }
  .image-overlay-toolbar button{
    min-width:34px !important;
    height:34px !important;
    border-radius:10px !important;
    font-size:15px !important;
  }
  .image-overlay-toolbar button[data-map-zoom-reset]{
    min-width:54px !important;
    font-size:12px !important;
  }
  .image-overlay-stage{
    padding:10px !important;
  }
  .image-overlay-stage img{
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100dvh - 76px) !important;
    border-radius:12px !important;
  }
}


/* ===== v1.7.7 UI FLOW POLISH =====
   เป้าหมาย: ลดช่องว่างเกินจำเป็น, ทำ CTA/contact ให้สมดุล, ลด visual weight และปรับ Admin ให้เป็นหลังบ้านจริง
*/
.nav-admin-label{
  color:#dbe5f2;
  font-family:"Prompt","Noto Sans Thai",sans-serif;
  font-weight:800;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.main-section.smart-main{
  padding-top:70px;
  padding-bottom:42px;
}
.quick-action-strip{
  margin-bottom:0;
}
.team-map-section{
  gap:28px !important;
  margin-top:34px !important;
  align-items:start;
}
.team-preview-panel,
.course-preview-panel{
  min-height:auto !important;
}
.steps-wrap{
  margin-top:42px !important;
}
.steps-wrap .steps-title,
.steps-wrap .section-title{
  margin-top:0 !important;
  margin-bottom:24px !important;
}
.steps-grid{
  gap:22px !important;
}
.step-card{
  min-height:96px !important;
  grid-template-columns:56px 1fr !important;
  gap:10px !important;
  padding:14px 16px !important;
  border-radius:16px !important;
  box-shadow:0 16px 34px rgba(10,28,47,.09) !important;
}
.step-card:not(:last-child)::after{
  right:-18px !important;
  font-size:32px !important;
}
.step-number{
  width:24px !important;
  height:24px !important;
  font-size:13px !important;
}
.step-icon,
.step-icon .bi{
  padding-top:10px !important;
  font-size:30px !important;
}
.step-content strong{
  font-size:13.5px !important;
}
.step-content small{
  font-size:11.5px !important;
}

.cta-band{
  margin-top:44px !important;
  min-height:92px !important;
  grid-template-columns:285px minmax(0,1fr) 220px !important;
  gap:20px !important;
  padding:20px 28px !important;
  border-radius:22px !important;
}
.phone-block{
  gap:12px !important;
  min-width:0;
}
.phone-icon{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
  font-size:20px !important;
}
.phone-icon .bi{
  font-size:20px !important;
}
.phone-block small{
  font-size:12px !important;
}
.phone-block strong{
  font-size:20px !important;
  letter-spacing:.2px !important;
  line-height:1.16 !important;
}
.cta-text strong{
  font-size:20px !important;
}
.cta-text small{
  font-size:12.5px !important;
  line-height:1.45 !important;
}
.cta-band .btn{
  min-height:48px !important;
  font-size:15px !important;
}
.arrow{
  font-size:24px !important;
}

.admin-layout{
  grid-template-columns:230px minmax(0,1fr) !important;
  gap:22px !important;
}
.admin-sidebar{
  position:sticky;
  top:98px;
}
.system-page{
  padding:46px 0 64px !important;
}
.system-card{
  box-shadow:0 20px 50px rgba(10,28,47,.10) !important;
}
.admin-payment-table td,
.admin-payment-table th{
  vertical-align:top;
}
.payment-review-form textarea{
  min-height:62px;
}
.payment-review-form .btn{
  border-radius:10px;
}

@media (max-width:1160px){
  .cta-band{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  .cta-text{text-align:left !important;}
  .step-card:not(:last-child)::after{display:none !important;}
}
@media (max-width:860px){
  .nav-admin-label{display:none;}
  .main-section.smart-main{padding-top:48px;padding-bottom:34px;}
  .team-map-section{gap:18px !important;margin-top:24px !important;}
  .steps-wrap{margin-top:32px !important;}
  .steps-grid{grid-template-columns:1fr 1fr !important;gap:14px !important;}
  .cta-band{margin-top:32px !important;padding:18px !important;}
  .phone-block strong{font-size:18px !important;}
  .admin-sidebar{position:static;}
}
@media (max-width:560px){
  .steps-grid{grid-template-columns:1fr !important;}
  .step-card{min-height:88px !important;}
  .phone-block{align-items:flex-start !important;}
  .phone-block strong{font-size:17px !important;}
  .cta-text strong{font-size:18px !important;}
}

/* ===== v1.7.8 PARTIAL PAYMENT + RESPONSIVE ADMIN SLIP REVIEW ===== */
.admin-page-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.admin-page-head h1{margin:0;font-size:34px;line-height:1.15;color:#071d33}
.admin-page-head p{margin:6px 0 0;color:#657285;font-weight:700}
.admin-back-btn{color:#14263c!important;border-color:#d5dde7!important;background:#fff!important}
.payment-admin-card{max-width:none!important;overflow:visible!important}
.payment-filter-form{margin-bottom:18px}
.payment-filter-action{display:flex;justify-content:flex-end}
.payment-stats{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.team-no-text{font-size:20px;color:#071d33;line-height:1.1}
.slip-thumb{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid #e5e7eb;box-shadow:0 6px 16px rgba(10,28,47,.08)}
.payment-review-btn{min-height:38px!important;padding:9px 16px!important;border-radius:11px!important}
.payment-card-list{display:none}
.payment-mobile-empty{padding:18px;text-align:center;color:#768396;border:1px dashed #d9e2ec;border-radius:16px;background:#f8fafc}
.payment-mobile-card{display:grid;gap:14px;padding:16px;border:1px solid #e4ebf3;border-radius:18px;background:#fff;box-shadow:0 14px 32px rgba(10,28,47,.08)}
.payment-mobile-top,.payment-mobile-bottom{display:flex;justify-content:space-between;gap:12px;align-items:center}
.payment-mobile-top strong{display:block;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:22px;color:#071d33;line-height:1.1}
.payment-mobile-top small{display:block;color:#657285;font-weight:700;margin-top:3px}
.payment-mobile-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.payment-mobile-lines div{padding:10px 12px;border-radius:13px;background:#f8fafc;border:1px solid #edf2f7}
.payment-mobile-lines span{display:block;color:#708096;font-size:12px;font-weight:700}
.payment-mobile-lines b{display:block;color:#14263c;font-size:14px;line-height:1.25}
.review-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(3,15,28,.68);backdrop-filter:blur(5px)}
.review-modal:target{display:flex}
.review-modal-backdrop{position:absolute;inset:0}
.review-modal-panel{position:relative;z-index:1;width:min(1120px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 38px 90px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.4)}
.review-modal-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:20px 24px;background:linear-gradient(180deg,#fff,#f8fafc);border-bottom:1px solid #e8eef5;border-radius:24px 24px 0 0}
.review-modal-head small{display:block;color:#657285;font-weight:800}
.review-modal-head h2{margin:2px 0 0;color:#071d33;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:24px;line-height:1.2}
.review-close{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#eef3f8;color:#071d33;font-size:28px;font-weight:700;line-height:1}
.review-modal-grid{display:grid;grid-template-columns:minmax(280px,440px) minmax(0,1fr);gap:22px;padding:22px}
.review-slip-box{display:grid;align-content:start;gap:14px}
.review-slip-box img{width:100%;max-height:620px;object-fit:contain;border-radius:18px;border:1px solid #e6edf4;background:#f8fafc;box-shadow:0 18px 42px rgba(10,28,47,.10)}
.pdf-slip-box{min-height:240px;display:grid;place-items:center;text-align:center;border:1px dashed #d9e2ec;border-radius:18px;background:#f8fafc;color:#657285;font-weight:800}
.pdf-slip-box .bi{font-size:44px;color:#b9302b}
.review-detail-box{display:grid;gap:16px;align-content:start}
.review-amount-card{padding:16px 18px;border-radius:18px;border:1px solid #e7edf4;background:#f8fafc}
.review-amount-card span{display:block;font-weight:900;color:#657285}
.review-amount-card strong{display:block;margin-top:3px;font-family:"Prompt","Noto Sans Thai",sans-serif;font-size:32px;line-height:1.1;color:#071d33}
.review-amount-card small{display:block;margin-top:5px;color:#657285;font-weight:700}
.review-amount-card.ok{background:#ecfdf5;border-color:#bbf7d0}.review-amount-card.ok strong{color:#047857}
.review-amount-card.warn{background:#fffbeb;border-color:#fde68a}.review-amount-card.warn strong{color:#a16207}
.review-amount-card.danger{background:#fff1f2;border-color:#fecdd3}.review-amount-card.danger strong{color:#be123c}
.review-dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.review-dl div{padding:11px 12px;border:1px solid #edf2f7;border-radius:14px;background:#fff}
.review-dl dt{margin:0;color:#708096;font-size:12px;font-weight:800}.review-dl dd{margin:3px 0 0;color:#14263c;font-weight:800;line-height:1.3}
.payment-history-box{padding:14px;border-radius:18px;background:#f8fafc;border:1px solid #e8eef5}
.payment-history-box h3{margin:0 0 10px;font-size:16px;color:#071d33}
.history-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #e8eef5}
.history-row:first-of-type{border-top:0}.history-row span{font-size:12px;color:#657285;font-weight:700}.history-row strong{font-size:14px;color:#071d33}.history-row .badge{white-space:nowrap}
.payment-history-box p{margin:10px 0 0;color:#435266;font-weight:800}
.payment-modal-form{display:grid;gap:10px;padding:14px;border-radius:18px;border:1px solid #f1dfbd;background:#fffaf0}
.payment-modal-form label{font-weight:900;color:#14263c}.payment-modal-form textarea{width:100%;border:1px solid #dfe6ee;border-radius:14px;padding:10px 12px;resize:vertical;background:#fff}
.review-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.review-action-grid select{min-height:46px;border:1px solid #dfe6ee;border-radius:12px;padding:9px 10px;background:#fff}.review-action-grid .btn{min-height:46px;padding:10px 14px}.review-action-grid .btn:disabled{opacity:.58;cursor:not-allowed;filter:grayscale(.2)}
.review-readonly-note{padding:14px;border-radius:16px;background:#f8fafc;border:1px solid #e8eef5;color:#435266}
.badge.warn{background:#fff4ce;color:#8a5b0c}.badge.ok{background:#dcfce7;color:#166534}.badge.danger{background:#ffe4e6;color:#be123c}
.alert.warning{background:#fff7dc;border-color:#ffe6a3;color:#74510d}
@media (max-width:1180px){.payment-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}.review-modal-grid{grid-template-columns:1fr}.review-slip-box img{max-height:460px}.admin-page-head h1{font-size:30px}}
@media (max-width:768px){.payment-table-wrap{display:none!important}.payment-card-list{display:grid;gap:12px}.payment-stats{grid-template-columns:1fr 1fr!important}.payment-filter-action{justify-content:stretch}.payment-filter-action .btn{width:100%}.admin-page-head{align-items:stretch}.admin-back-btn{width:100%}.review-modal{padding:10px;align-items:flex-start}.review-modal-panel{max-height:96vh;border-radius:18px}.review-modal-head{padding:16px;border-radius:18px 18px 0 0}.review-modal-head h2{font-size:19px}.review-modal-grid{padding:14px;gap:14px}.review-dl{grid-template-columns:1fr}.review-action-grid{grid-template-columns:1fr}.payment-mobile-lines{grid-template-columns:1fr}.payment-mobile-bottom{align-items:stretch;flex-direction:column}.payment-mobile-bottom .btn{width:100%}.history-row{grid-template-columns:1fr auto}.history-row .badge{grid-column:1/-1;justify-self:start}.review-amount-card strong{font-size:26px}}