/* ============================================================================
 * index.css — สไตล์หน้าแรก (แยกออกจาก index.php)
 * ธีมขาว-น้ำเงิน SketchUP — ใช้คู่กับ Tailwind CDN + Prompt font
 * ============================================================================ */

/* ══════════ FONT WEIGHT — บางลง (ไม่ให้ดูอ้วน) ══════════ */
/* body/ข้อความทั่วไป: บางลงอีกขั้น */
.font-semibold { font-weight: 400 !important; }
.font-bold     { font-weight: 500 !important; }
.font-extrabold{ font-weight: 600 !important; }
.font-black    { font-weight: 700 !important; }
b, strong      { font-weight: 600 !important; }

/* หัวข้อ (h1-h3) คงความหนาให้เด่น ไม่ให้บางตาม */
h1, h2, h3 { font-weight: 600 !important; }
h1.font-extrabold, h2.font-extrabold, h3.font-extrabold,
h1.font-black, h2.font-black, h3.font-black { font-weight: 700 !important; }

/* ══════════ PURE WHITE + NAVY SKETCHUP THEME ══════════ */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    background: #FFFFFF;
    color: #1a1a1a;
    font-family: 'Prompt', sans-serif;
    overflow-x: hidden;
}
/* section โปร่งใส — ให้ background ของ detail-zone ส่องผ่าน */
section { background: transparent; }
.hero-bg-mask { mask-image: linear-gradient(to right, transparent 0%, black 25%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%); }
.hero-overlay { background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0.5) 30%, transparent 70%); }
.text-gradient { background: linear-gradient(90deg, #003D7A 0%, #005EB8 50%, #2196F3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.path-card { transition: all 0.3s ease; position: relative; }
.path-card::before { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; border-radius: inherit; padding: 2px; background: transparent; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: all 0.3s ease; }
.card-yellow:hover::before { background: #005EB8; } .card-orange:hover::before { background: #005EB8; }
.card-red:hover::before    { background: #005EB8; } .card-purple:hover::before { background: #003D7A; }
.card-blue:hover::before   { background: #2196F3; } .card-green:hover::before  { background: #1976D2; }
.line-separator-left  { background: linear-gradient(90deg,transparent,#005EB8); width:40px; height:2px; margin-right:16px; }
.line-separator-right { background: linear-gradient(90deg,#E5E7EB,transparent); width:80px; height:2px; margin-left:16px; }
.glass-card { background: #FFFFFF; border: 1px solid rgba(0,61,122,0.10); box-shadow: 0 2px 16px rgba(0,61,122,0.06); }
.glass-card-hover { transition: all 0.4s cubic-bezier(0.16,1,0.3,1); }
.glass-card-hover:hover { transform: translateY(-6px); background: #FFFFFF; border-color: rgba(0,94,184,0.25); box-shadow: 0 12px 32px rgba(0,94,184,0.15); }
.neon-glow-orange  { box-shadow: 0 4px 16px rgba(0,94,184,0.18); }
.neon-glow-blue    { box-shadow: 0 4px 16px rgba(33,150,243,0.18); }
.neon-glow-purple  { box-shadow: 0 4px 16px rgba(0,61,122,0.18); }
.month-tab { background: rgba(0,61,122,0.05); border: 1px solid rgba(0,61,122,0.10); color: #475569; }
.month-tab:hover { background: rgba(0,61,122,0.08); color: #1a1a1a; }
.month-tab.active-tab { background: rgba(0,94,184,0.12); border-color: rgba(0,94,184,0.30); color: #003D7A; }
.batch-group.hidden { display:none !important; }
/* DETAIL ZONE — base สี off-white นุ่มตา + ฟ้าจางแซม */
.detail-zone {
    position: relative;
    background:
        radial-gradient(ellipse 60% 40% at 0% 0%,    rgba(187,222,251,0.30) 0%, transparent 65%),
        radial-gradient(ellipse 55% 40% at 100% 0%,  rgba(144,202,249,0.25) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 0% 100%,  rgba(144,202,249,0.25) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(187,222,251,0.28) 0%, transparent 65%),
        #F6F8FB;
}
.detail-zone .detail-content { position: relative; z-index: 1; }
/* Top fade — blend จาก Hero/Path Cards (ขาว) เข้า detail-zone (off-white) */
.detail-zone::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px;
    background: linear-gradient(to bottom, #FFFFFF 0%, rgba(246,248,251,0.5) 60%, transparent 100%);
    z-index: 2; pointer-events: none;
}
/* Bottom fade — กลับเป็นขาวก่อนถึง footer */
.detail-zone::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 160px;
    background: linear-gradient(to top, #FFFFFF 0%, rgba(246,248,251,0.5) 60%, transparent 100%);
    z-index: 2; pointer-events: none;
}
.glow-blue   { position:absolute; border-radius:50%; pointer-events:none; z-index:0; background: #BBDEFB; opacity:0.35; filter:blur(140px); }
.glow-purple { position:absolute; border-radius:50%; pointer-events:none; z-index:0; background: #90CAF9; opacity:0.30; filter:blur(130px); }
.glow-orange { position:absolute; border-radius:50%; pointer-events:none; z-index:0; background: #BBDEFB; opacity:0.25; filter:blur(110px); }
.detail-curve { position: absolute; top: 0; right: 0; width: 55%; height: 70%; pointer-events: none; z-index: 0; opacity: 0.07; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: rgba(0,61,122,0.25); border-radius: 4px; }

/* ══════════ TEXT: ดำล้วน (สีเดียว ทุกระดับ) ══════════ */
body, body * { color: #1a1a1a; }
/* accent text → keep navy SketchUp */
.text-brandOrange { color: #005EB8 !important; }
.text-brandBlue   { color: #2196F3 !important; }
.text-brandPurple { color: #003D7A !important; }
.text-brandGreen  { color: #1976D2 !important; }
.text-red-500, .text-red-400 { color: #DC2626 !important; }
.text-yellow-500, .text-yellow-400 { color: #005EB8 !important; }
/* white text in dark sections → keep white if on dark bg, else black */
.text-white { color: #1a1a1a !important; }
.text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400, .text-gray-500, .text-gray-600 { color: #1a1a1a !important; }
/* hover text */
.hover\:text-white:hover { color: #003D7A !important; }
/* ปุ่ม navy gradient → ตัวอักษรขาว */
.bg-gradient-primary, .bg-gradient-primary * { color: #FFFFFF !important; }
.cta-navy, .cta-navy *, .cta-navy svg { color: #FFFFFF !important; stroke: #FFFFFF !important; }
[class*="bg-brandOrange"]:not([class*="bg-brandOrange/"]),
[class*="bg-brandOrange"]:not([class*="bg-brandOrange/"]) * { color: #FFFFFF !important; }
[class*="bg-brandPurple"]:not([class*="bg-brandPurple/"]),
[class*="bg-brandPurple"]:not([class*="bg-brandPurple/"]) * { color: #FFFFFF !important; }

/* ══════════ Dark backgrounds → white ══════════ */
.bg-\[\#0A0C10\], .bg-\[\#0A0C10\]\/90, .bg-\[\#0A0C10\]\/80 { background-color: rgba(255,255,255,0.92) !important; }
.bg-\[\#0B0F19\] { background-color: #FFFFFF !important; }
.bg-\[\#151820\] { background-color: #FFFFFF !important; }
.bg-brand-card, .bg-brand-dark { background-color: #FFFFFF !important; }
.border-brand-border { border-color: #E5E7EB !important; }
.from-\[\#0A0C10\] { --tw-gradient-from: rgba(255,255,255,0.95) !important; }
.to-\[\#0A0C10\] { --tw-gradient-to: rgba(255,255,255,0.95) !important; }
.via-\[\#0A0C10\] { --tw-gradient-via: rgba(255,255,255,0.5) !important; }
.from-brandDark, .to-brandDark { --tw-gradient-from: #FFFFFF !important; --tw-gradient-to: #FFFFFF !important; }
/* white/* overlays → navy tints */
.bg-white\/5  { background-color: rgba(0,61,122,0.03) !important; }
.bg-white\/10 { background-color: rgba(0,61,122,0.06) !important; }
.bg-white\/20 { background-color: rgba(0,61,122,0.10) !important; }
.hover\:bg-white\/5:hover  { background-color: rgba(0,61,122,0.05) !important; }
.hover\:bg-white\/10:hover { background-color: rgba(0,61,122,0.10) !important; }
.border-white\/5  { border-color: rgba(0,61,122,0.05) !important; }
.border-white\/10 { border-color: rgba(0,61,122,0.10) !important; }
.border-white\/20 { border-color: rgba(0,61,122,0.15) !important; }
/* gray borders */
.border-gray-600, .border-gray-700, .border-gray-800 { border-color: #E5E7EB !important; }
/* black overlays */
.bg-black\/60 { background-color: rgba(255,255,255,0.92) !important; border:1px solid rgba(0,61,122,0.1) !important; }
.bg-black\/50 { background-color: rgba(255,255,255,0.88) !important; }
.bg-black\/40 { background-color: rgba(255,255,255,0.85) !important; }
/* gray-700/50 etc */
.bg-gray-700\/50, .bg-gray-700 { background-color: rgba(0,61,122,0.06) !important; }
.bg-gray-800, .bg-gray-900 { background-color: #F8FAFC !important; }

/* ══════════ Gradient overrides → Navy SketchUp ══════════ */
[class*="from-brandOrange"] { --tw-gradient-from: #003D7A !important; }
[class*="via-brandOrange"]  { --tw-gradient-via:  #005EB8 !important; }
[class*="to-brandOrange"]   { --tw-gradient-to:   #005EB8 !important; }
[class*="from-brandPurple"] { --tw-gradient-from: #003D7A !important; }
[class*="via-brandPurple"]  { --tw-gradient-via:  #003D7A !important; }
[class*="to-brandPurple"]   { --tw-gradient-to:   #2196F3 !important; }
[class*="from-brandBlue"]   { --tw-gradient-from: #2196F3 !important; }
[class*="to-brandBlue"]     { --tw-gradient-to:   #2196F3 !important; }
[class*="from-brandGreen"]  { --tw-gradient-from: #1976D2 !important; }
[class*="to-brandGreen"]    { --tw-gradient-to:   #1976D2 !important; }

/* badges with tint variants */
[class*="bg-brandOrange/"] { background-color: rgba(0,94,184,0.10) !important; }
[class*="bg-brandBlue/"]   { background-color: rgba(33,150,243,0.10) !important; }
[class*="bg-brandPurple/"] { background-color: rgba(0,61,122,0.10) !important; }
[class*="bg-brandGreen/"]  { background-color: rgba(25,118,210,0.10) !important; }
[class*="border-brandOrange/"] { border-color: rgba(0,94,184,0.30) !important; }
[class*="border-brandBlue/"]   { border-color: rgba(33,150,243,0.30) !important; }
[class*="border-brandPurple/"] { border-color: rgba(0,61,122,0.30) !important; }
[class*="border-brandGreen/"]  { border-color: rgba(25,118,210,0.30) !important; }

/* ══════════ POPUP animation ══════════ */
@keyframes tsPop { from { opacity:0; transform:translateY(20px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }

/* ══════════ COVERFLOW SLIDER ══════════ */
.cf { position:relative; width:100%; padding:30px 0; }
.cf-stage { position:relative; height:560px; display:flex; align-items:center; justify-content:center; perspective:1600px; }
.cf-slide {
    position:absolute; top:50%; left:50%;
    width:92%; max-width:620px;
    transition:transform .55s cubic-bezier(.25,.8,.35,1), opacity .55s, filter .55s;
    transform-style:preserve-3d; will-change:transform,opacity;
}
.cf-slide img { width:100%; height:auto; display:block; }
/* สถานะต่างๆ — JS เป็นคนใส่ class pos-* ให้ */
.cf-slide.pos-center { transform:translate(-50%,-50%) translateZ(0) scale(1.25);         opacity:1;   z-index:30; filter:none; }
.cf-slide.pos-right  { transform:translate(-12%,-50%) translateZ(-220px) scale(.82) rotateY(-22deg); opacity:.22; z-index:20; filter:brightness(.6); }
.cf-slide.pos-left   { transform:translate(-88%,-50%) translateZ(-220px) scale(.82) rotateY(22deg);  opacity:.22; z-index:20; filter:brightness(.6); }
.cf-slide.pos-hide   { transform:translate(-50%,-50%) translateZ(-420px) scale(.6);     opacity:0;   z-index:10; pointer-events:none; }
.cf-nav {
    position:absolute; top:50%; transform:translateY(-50%); z-index:40;
    width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
    background:#FFFFFF; color:#005EB8; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(0,61,122,0.18); transition:all .2s;
}
.cf-nav:hover { background:#005EB8; color:#fff; box-shadow:0 8px 26px rgba(0,94,184,0.35); }
.cf-prev { left:0; }
.cf-next { right:0; }
.cf-dots { display:flex; justify-content:center; gap:8px; margin-top:18px; }
.cf-dot { width:9px; height:9px; border-radius:50%; background:rgba(0,94,184,0.22); cursor:pointer; transition:all .25s; }
.cf-dot.active { background:#005EB8; width:26px; border-radius:5px; }
@media (max-width:640px){ .cf-stage{height:340px;} .cf-slide{width:90%;} }