@charset "utf-8";

/* ==========================================
   1. FULLSCREEN & BACKGROUND
   ========================================== */
.promo-hero-fullscreen {
	width: 100%;
	position: relative;
	background-color: #0d0e12;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: auto;
	overflow: hidden;
	z-index: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* ป้องกัน Render Flicker บนมือถือ */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	padding-top: 10%;
	padding-right: 20px;
	padding-bottom: 10%;
	padding-left: 20px;
}

.promo-hero-fullscreen::before {
	content: '';
	position: absolute;
	top: -5%;
	left: -5%;
	width: 110%;
	height: 110%;
	background-image: 
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
		url(../images/bg-promotion-3.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	z-index: -1;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation: heroBgZoom 10s ease-in-out infinite alternate;
}

@keyframes heroBgZoom {
	0% { transform: scale(1) translateZ(0); }
	100% { transform: scale(1.12) translateZ(0); }
}

.hero-wave-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.wave-square {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 20px;
	border: 2px solid rgba(197, 18, 125, 0.5);
	box-shadow: 0 0 25px rgba(197, 18, 125, 0.25), inset 0 0 15px rgba(19, 147, 202, 0.2);
	animation: squareExpand 6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
	opacity: 0;
	box-sizing: border-box;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.wave-1 { animation-delay: 0s; }
.wave-2 { animation-delay: 2s; }
.wave-3 { animation-delay: 4s; }

@keyframes squareExpand {
	0% {
		width: 300px;
		height: 180px;
		opacity: 0.9;
		border-color: #C5127D;
		border-radius: 12px;
	}
	50% {
		opacity: 0.5;
		border-color: #1393CA;
		border-radius: 20px;
	}
	100% {
		width: 1400px;
		height: 850px;
		opacity: 0;
		border-color: transparent;
		border-radius: 40px;
	}
}

.light-spotlight {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(197, 18, 125, 0.18) 0%, rgba(19, 147, 202, 0.12) 45%, transparent 70%);
	filter: blur(70px);
	animation: pulseLight 4s ease-in-out infinite alternate;
}

@keyframes pulseLight {
	0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.6; }
	100% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

/* ==========================================
   2. MAIN CONTAINER
   ========================================== */
.hero-promo-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	background: rgba(22, 24, 35, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	padding: 18px 26px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);
	box-sizing: border-box;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.special-header-banner {
	text-align: center;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 10px;
}

.badge-fire-tag {
	display: inline-block;
	background: linear-gradient(135deg, #222, #444);
	color: #ffffff;
	font-family: 'Noto Sans Thai';
	font-size: 0.8rem;
	font-weight: bold;
	padding: 4px 14px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	margin-bottom: 6px;
	line-height: 1.2;
}

.mega-special-title {
	font-family: 'serithairegular';
	font-size: 2rem;
	font-weight: bold;
	margin: 2px 0;
	color: #ffffff;
	line-height: 1.45;
	padding-top: 6px;
	padding-bottom: 4px;
}

.special-subtitle {
	font-family: 'Noto Sans Thai';
	color: #aaaaaa;
	font-size: 0.95rem;
	margin: 2px 0 0 0;
	line-height: 1.45;
}

.pkg-menu-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 12px 0 18px 0;
	width: 100%;
	box-sizing: border-box;
}

.pkg-tabs-wrapper {
	display: inline-flex;
	background: rgba(0, 0, 0, 0.5);
	padding: 5px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
	gap: 8px;
	max-width: 100%;
	box-sizing: border-box;
}

.pkg-tab-btn {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	color: #888888;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 10px 18px;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	text-align: left;
	font-family: 'Noto Sans Thai';
	overflow: visible;
	box-sizing: border-box;
}

.pkg-tab-btn:not(.active)::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 10px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	animation: tabPulseWave 2s infinite;
	pointer-events: none;
}

@keyframes tabPulseWave {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.08, 1.25); opacity: 0; }
}

.pkg-tab-btn .tab-icon { font-size: 1.25rem; }
.pkg-tab-btn .tab-text { display: flex; flex-direction: column; }
.pkg-tab-btn .tab-text strong { font-family: 'serithairegular'; font-size: 1rem; line-height: 1.25; }
.pkg-tab-btn .tab-text small { font-family: 'Noto Sans Thai'; font-size: 0.78rem; opacity: 0.8; margin-top: 1px; line-height: 1.25; }
.pkg-tab-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); }

.pkg-tab-btn.active::after { display: none; }

.pkg-tab-btn.starter-tab.active {
	background: #ffffff;
	color: #000000;
	border-color: #ffffff;
	box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}
.pkg-tab-btn.starter-tab.active .tab-text small { color: #333333; }

.pkg-tab-btn.full-tab.active {
	background: linear-gradient(135deg, #1393CA, #C5127D);
	color: #ffffff;
	border-color: #D6C212;
	box-shadow: 0 4px 16px rgba(197, 18, 125, 0.4);
}
.pkg-tab-btn.full-tab.active .tab-text small { color: #f0f0f0; }

/* ==========================================
   3. GRID & LAYOUT DEFAULTS
   ========================================== */
.hero-content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	width: 100%;
	box-sizing: border-box;
}

.hero-left-col {
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}

.hero-right-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}

.hero-title {
	font-family: 'serithairegular';
	font-size: 1.45rem;
	line-height: 1.45;
	margin: 2px 0 10px 0;
	padding-top: 2px;
}

.hero-title .text-gradient {
	font-family: 'promptregular';
	font-weight: bold;
}

.hero-features-list { list-style: none; padding: 0; margin: 0 0 10px 0; }
.hero-features-list li { 
	display: flex; 
	align-items: flex-start; 
	gap: 10px; 
	font-family: 'Noto Sans Thai';
	font-size: 0.92rem; 
	line-height: 1.4; 
	margin-bottom: 8px; 
}

.check-icon, .cross-icon { 
	width: 20px; 
	height: 20px; 
	font-size: 0.75rem; 
	flex-shrink: 0; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	border-radius: 50%;
	margin-top: 2px;
}

.server-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bonus-list { list-style: none; padding: 0; margin: 0; }
.bonus-list li { font-family: 'Noto Sans Thai'; font-size: 0.88rem; margin-bottom: 4px; line-height: 1.35; }

/* ==========================================
   4. RIGHT COLUMN COMPONENTS
   ========================================== */
.box-text-free-01 {
	font-family: 'Noto Sans Thai';
	color: #ffffff;
	font-size: 0.88rem;
	line-height: 1.5;
	margin-top: 6px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 8px 12px;
	border-radius: 8px;
	box-sizing: border-box;
}

.site-menu-box-wrapper {
	border-radius: 8px;
	padding: 10px 12px;
	box-sizing: border-box;
}

.menu-box-title {
	font-family: 'serithairegular';
	font-size: 0.88rem;
	font-weight: bold;
	margin-bottom: 6px;
	line-height: 1.25;
}

.site-menu-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.menu-tag {
	font-family: 'Noto Sans Thai';
	font-size: 0.78rem;
	padding: 3px 8px;
	border-radius: 4px;
	line-height: 1.2;
	white-space: nowrap;
}

.hero-demo-section { 
	border-radius: 8px;
	padding: 10px 12px;
	box-sizing: border-box;
}

.demo-heading { 
	font-family: 'serithairegular'; 
	font-size: 0.88rem; 
	margin-bottom: 6px; 
	font-weight: bold; 
}

.demo-compact-grid { 
	display: grid; 
	grid-template-columns: repeat(4, 1fr); 
	gap: 6px; 
}

.demo-btn-mini { 
	font-family: 'Noto Sans Thai';
	display: inline-block; 
	text-align: center; 
	padding: 5px 4px; 
	border-radius: 6px; 
	text-decoration: none; 
	font-size: 0.82rem; 
	line-height: 1.25;
	transition: all 0.25s ease; 
	box-sizing: border-box;
}

.price-highlight-card {
	border-radius: 14px;
	padding: 14px 12px;
	text-align: center;
	position: relative;
	margin-top: 4px;
	box-sizing: border-box;
}

.old-price { font-family: 'Noto Sans Thai'; font-size: 0.88rem; color: #888888; }
.old-price span { text-decoration: line-through; }
.main-price-display { margin: 4px 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; }

.price-amount {
	font-family: KimberleyBl-Regular;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1;
}

.price-currency, .price-unit { 
	font-family: 'serithairegular'; 
	font-size: 1.1rem;
	font-weight: bold;
}

.payment-badge { border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-family: 'Noto Sans Thai'; box-sizing: border-box; }
.payment-title { font-size: 0.82rem; line-height: 1.25; }
.payment-detail { font-size: 0.88rem; line-height: 1.25; margin-top: 2px; }
.hero-target-text { font-family: 'Noto Sans Thai'; font-size: 0.82rem; margin-bottom: 10px; line-height: 1.35; }

.cta-action-btn { 
	font-family: 'serithairegular';
	display: block; 
	width: 100%; 
	text-decoration: none; 
	font-weight: bold; 
	font-size: 1rem; 
	padding: 10px 0; 
	border-radius: 8px; 
	line-height: 1.3;
	transition: all 0.3s ease; 
	text-align: center; 
	box-sizing: border-box;
}

/* ==========================================
   5. THEME 1: STARTER PACKAGE
   ========================================== */
.starter-pkg .hero-title { color: #ffffff; }
.starter-pkg .hero-title .text-gradient {
	background: linear-gradient(135deg, #ffffff 30%, #aaaaaa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.starter-pkg .hero-features-list li { color: #cccccc; }
.starter-pkg .check-icon { background: #333333; color: #ffffff; border: 1px solid #666666; }
.starter-pkg .cross-icon { background: #1a1a1a; color: #777777; border: 1px solid #444444; }
.starter-pkg .no-backoffice-item strong { color: #ffffff; }

.starter-pkg .server-box-wrapper {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid #444444;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 8px;
	box-sizing: border-box;
}
.starter-pkg .server-title { font-family: 'serithairegular'; color: #ffffff; font-size: 0.9rem; font-weight: bold; margin-bottom: 6px; line-height: 1.25; }
.starter-pkg .server-tag {
	background: #222222;
	color: #dddddd;
	border: 1px solid #555555;
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.88rem;
}

.starter-pkg .bonus-box-wrapper {
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed #666666;
	border-radius: 8px;
	padding: 10px 12px;
	box-sizing: border-box;
}

.starter-pkg .bonus-title { font-family: 'serithairegular'; color: #eeeeee; font-size: 0.9rem; font-weight: bold; margin-bottom: 6px; line-height: 1.25; }
.starter-pkg .bonus-list li { color: #bbbbbb; }
.starter-pkg .bonus-list li strong { color: #ffffff; }

.starter-pkg .site-menu-box-wrapper {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #444444;
}
.starter-pkg .menu-box-title { color: #ffffff; }
.starter-pkg .menu-tag { background: #222222; color: #dddddd; border: 1px solid #555555; }

.starter-pkg .hero-demo-section {
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed #444444;
}
.starter-pkg .demo-heading { color: #aaaaaa; }
.starter-pkg .demo-btn-mini { background: #1a1a1a; border: 1px solid #444444; color: #dddddd; }
.starter-pkg .demo-btn-mini:hover { background: #ffffff; color: #000000; border-color: #ffffff; font-weight: bold; }

.starter-pkg .price-highlight-card {
	background: #141414;
	border: 1.5px solid #444444;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.starter-pkg .price-amount {
	background: linear-gradient(90deg, #ffffff, #888888, #ffffff);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: whiteGrayTextShift 4s linear infinite;
	font-family: KimberleyBl-Regular;
}

@keyframes whiteGrayTextShift {
	0% { background-position: 0% center; }
	100% { background-position: 200% center; }
}

.starter-pkg .hot-sale-badge {
	font-family: 'Noto Sans Thai';
	position: absolute; top: -10px; right: 12px;
	background: #ffffff; color: #000000;
	font-size: 0.72rem; font-weight: bold; padding: 2px 10px; border-radius: 6px;
}
.starter-pkg .price-currency, .starter-pkg .price-unit { color: #ffffff; }
.starter-pkg .payment-badge { background: #1e1e1e; border: 1px dashed #444444; }
.starter-pkg .payment-title { color: #888888; }
.starter-pkg .payment-detail { color: #ffffff; }
.starter-pkg .hero-target-text { color: #aaaaaa; }
.starter-pkg .cta-action-btn { background: #ffffff; color: #000000; border: 1px solid #ffffff; }
.starter-pkg .cta-action-btn:hover { background: #dddddd; }

/* ==========================================
   6. THEME 2: FULL PACKAGE
   ========================================== */
.full-pkg .hero-title { color: #ffffff; }
.full-pkg .hero-title .text-gradient {
	background: linear-gradient(135deg, #D6C212, #f5e12e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.full-pkg .hero-features-list li { color: #d1d5e0; }
.full-pkg .check-icon { background: rgba(214, 194, 18, 0.15); color: #D6C212; border: 1.5px solid #D6C212; }
.full-pkg .backoffice-icon { background: rgba(19, 147, 202, 0.2); color: #1393CA; border: 1.5px solid #1393CA; }
.full-pkg .has-backoffice-item strong { color: #1393CA; }

.full-pkg .server-box-wrapper {
	background: rgba(19, 147, 202, 0.08);
	border: 1.5px solid #1393CA;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 8px;
	box-sizing: border-box;
}
.full-pkg .server-title { font-family: 'serithairegular'; color: #1393CA; font-size: 0.9rem; font-weight: bold; margin-bottom: 6px; line-height: 1.25; }
.full-pkg .server-tag {
	background: rgba(19, 147, 202, 0.15);
	color: #e0f7ff;
	border: 1px solid rgba(19, 147, 202, 0.5);
	font-family: 'Noto Sans Thai', sans-serif;
	font-size: 0.88rem;
}

.full-pkg .bonus-box-wrapper {
	background: linear-gradient(135deg, rgba(214, 194, 18, 0.08), rgba(197, 18, 125, 0.08));
	border: 1.5px dashed #D6C212;
	border-radius: 8px;
	padding: 10px 12px;
	box-sizing: border-box;
}
.full-pkg .bonus-title { font-family: 'serithairegular'; color: #D6C212; font-size: 0.9rem; font-weight: bold; margin-bottom: 6px; line-height: 1.25; }
.full-pkg .bonus-list li { color: #d1d5e0; }
.full-pkg .bonus-list li strong { color: #D6C212; }

.full-pkg .site-menu-box-wrapper {
	background: rgba(19, 147, 202, 0.08);
	border: 1.5px solid #1393CA;
}
.full-pkg .menu-box-title { color: #1393CA; }
.full-pkg .menu-tag { background: rgba(214, 194, 18, 0.15); color: #f5e12e; border: 1px solid rgba(214, 194, 18, 0.4); }

.full-pkg .hero-demo-section {
	background: rgba(19, 147, 202, 0.05);
	border: 1px dashed rgba(19, 147, 202, 0.4);
}
.full-pkg .demo-heading { color: #1393CA; }
.full-pkg .demo-btn-mini { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(19, 147, 202, 0.4); color: #ffffff; }
.full-pkg .demo-btn-mini:hover { background: #1393CA; color: #ffffff; border-color: #1393CA; font-weight: bold; }

.full-pkg .price-highlight-card {
	background: rgba(18, 19, 26, 0.85);
	border: 2px solid #D6C212;
	box-shadow: 0 0 25px rgba(214, 194, 18, 0.2);
}

.full-pkg .price-amount {
	background: linear-gradient(90deg, #ff0055, #ff9900, #33cc33, #00ccff, #9933ff, #ff0055);
	background-size: 300% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: rainbowTextShift 5s linear infinite;
	font-family: KimberleyBl-Regular;
}

@keyframes rainbowTextShift {
	0% { background-position: 0% center; }
	100% { background-position: 300% center; }
}

.full-pkg .hot-sale-badge {
	font-family: 'Noto Sans Thai';
	position: absolute; top: -10px; right: 12px;
	background: #C5127D; color: #fff;
	font-size: 0.72rem; font-weight: bold; padding: 2px 10px; border-radius: 6px;
}
.full-pkg .price-currency, .full-pkg .price-unit { color: #D6C212; }
.full-pkg .payment-badge { background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(153, 153, 153, 0.4); }
.full-pkg .payment-title { color: #999999; }
.full-pkg .payment-detail { color: #ffffff; }
.full-pkg .hero-target-text { color: #999999; }
.full-pkg .cta-action-btn { background: linear-gradient(135deg, #D6C212, #b8a60e); color: #000000; border: 1.5px solid #ffffff; }
.full-pkg .cta-action-btn:hover { background: linear-gradient(135deg, #f5e12e, #D6C212); }

/* ==========================================
   7. RESPONSIVE DESIGN & MOBILE FIXES
   ========================================== */
@media (max-width: 900px) {
	.promo-hero-fullscreen {
	overflow: hidden;
	padding-top: 10%;
	padding-right: 10px;
	padding-bottom: 10%;
	padding-left: 10px;
	}
	.hero-promo-container { 
		padding: 14px 12px; 
		width: 100%;
		max-width: 100%;
		background: rgba(22, 24, 35, 0.92);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.hero-content-grid { 
		grid-template-columns: 1fr; 
		gap: 16px; 
	}
	.mega-special-title { font-size: 1.5rem; line-height: 1.35; }
	.hero-title { font-size: 1.25rem; line-height: 1.4; }
	.pkg-tabs-wrapper {
		width: 100%;
		justify-content: space-between;
	}
	.pkg-tab-btn { 
		padding: 8px 10px; 
		flex: 1;
		justify-content: center;
	}
	.pkg-tab-btn .tab-text small { display: none; }
	.demo-compact-grid { grid-template-columns: repeat(2, 1fr); }
	
	/* ปิดอนิเมชั่นขยับสีพื้นหลังบนมือถือ เพื่อแก้ปัญหาสีกระพริบวูบวาบ */
	.starter-pkg .price-amount {
	font-family: KimberleyBl-Regular;
	color: #CCC;
	
	}
	.full-pkg .price-amount {
	font-family: KimberleyBl-Regular;
	color: #6F0;
	}
	.starter-pkg,
    .full-pkg,
    .starter-pkg .price-amount,
    .full-pkg .price-amount {
        animation: none !important;
        transition: none !important;
}