@charset "utf-8";
/* =========================================================
   premium.css
   Site-wide "หรูหรา พรีเมียม" polish layer.
   Loads AFTER style.css + css_card.css and only refines/overrides
   shared chrome (header, footer, buttons, section titles, content
   tables) so every page — old or new — reads as one cohesive brand.
   Uses the --brand-* tokens already defined in css_card.css.
========================================================= */

/* ---------- Header: soft glass bar + gold-blue accent, sticky ---------- */
.header{
	box-shadow:0 1px 0 rgba(4,49,79,.06);
	position:sticky;
	top:0;
	z-index:1000;
}
.header .topbar{
	background:linear-gradient(90deg,var(--brand-900,#04314F),var(--brand-800,#045A94));
	border-bottom:none;
	padding:8px 0;
}
.header .topbar .top-link li,
.header .topbar .top-contact li{
	color:#fff;
	opacity:.92;
	font-size:12.5px;
}
.header .topbar .top-contact li i{
	color:var(--brand-400,#F4C430);
}
.header .nav li{
	margin-right:15px;
}
.header .nav li.nav-cta{
	margin-left:22px;
	margin-right:0;
	padding-left:10px;
	padding-right:50px;
	border-left:1px solid rgba(4,49,79,.12);
}
.header .nav li.nav-cta a{
	padding:10px 24px !important;
	background:linear-gradient(135deg,var(--brand-600,#0785DC),var(--brand-800,#045A94));
	color:#fff !important;
	border-radius:50px;
	transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1);
	box-shadow:var(--shadow-1,0 10px 28px -14px rgba(4,49,79,.35));
}
.header .nav li.nav-cta a::before{
	display:none;
}
.header .nav li.nav-cta a:hover{
	transform:translateY(-2px);
	box-shadow:var(--shadow-2,0 20px 40px -16px rgba(4,49,79,.45));
	color:#fff !important;
}
.header .header-inner{
	background:rgba(255,255,255,.85);
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	backdrop-filter:saturate(180%) blur(14px);
	box-shadow:0 8px 30px -18px rgba(4,49,79,.25);
}
.header .nav li a::before{
	background:linear-gradient(90deg,var(--brand-600,#2F8F5B),var(--brand-400,#D4A54D));
	height:3px;
	border-radius:6px;
}
.header .nav li.active a,
.header .nav li:hover a{
	color:var(--brand-600,#2F8F5B);
}
.header .logo img{
	transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.header .logo:hover img{
	transform:scale(1.04);
}

.header .logo img{
	max-height:58px;
	width:auto;
	display:block;
}
.header .header-inner .inner .row{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	justify-content:space-between;
}
.header .header-inner .inner .row > div{
	float:none;
}
.header .main-menu{
	display:flex;
	justify-content:flex-end;
	width:100%;
}
.header .nav.menu{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	justify-content:flex-end;
	list-style:none;
	padding:0;
	margin:0;
}

/* ---------- Buttons: gold-green gradient pill ---------- */
.get-quote .btn,
.contact-us .form .btn,
a.btn{
	background:linear-gradient(135deg,var(--brand-800,#1F3327),var(--brand-600,#2F8F5B));
	border:none;
	color:#fff;
	border-radius:50px;
	padding:14px 34px;
	font-weight:600;
	letter-spacing:.01em;
	box-shadow:var(--shadow-1,0 10px 28px -14px rgba(4,49,79,.35));
	transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.get-quote .btn:hover,
.contact-us .form .btn:hover,
a.btn:hover{
	color:#fff;
	transform:translateY(-3px);
	box-shadow:var(--shadow-2,0 20px 40px -16px rgba(4,49,79,.45));
}

/* ---------- Section titles: gold kicker + underline flourish ---------- */
.contact-us .container > h2,
.section-title h2{
	position:relative;
	font-family:'Sora','Noto Sans Thai',sans-serif;
	font-weight:700;
	letter-spacing:-.01em;
	color:var(--brand-800,#1F3327);
	padding-bottom:15px;
	margin-bottom:20px;
}
.contact-us .container > h2::after,
.section-title h2::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:64px;
	height:4px;
	border-radius:4px;
	background:linear-gradient(90deg,var(--brand-600,#2F8F5B),var(--brand-400,#D4A54D));
}
.section-title{
	text-align:center;
}
.section-title h2::after{
	left:50%;
	transform:translateX(-50%);
}

/* ---------- Content tables (benefits / health / product / packing) ---------- */
.contact-us table{
	border-collapse:separate;
	border-spacing:0;
}
.contact-us table td{
	transition:background-color .25s ease;
}
.contact-us .tb_pi table{
	border-radius:var(--radius-sm,16px);
	overflow:hidden;
	box-shadow:var(--shadow-1,0 10px 28px -14px rgba(4,49,79,.18));
}
.contact-us .tb_pi .packi{
	background:linear-gradient(135deg,var(--brand-800,#1F3327),var(--brand-600,#2F8F5B));
	color:#fff;
	padding:12px 0;
	font-family:'Sora','Noto Sans Thai',sans-serif;
}
.contact-us .tb_pi .packi_1,
.contact-us .tb_pi .packi_2{
	padding:10px 8px;
	border-bottom:1px solid rgba(4,49,79,.08);
}
.contact-us .tb_pi tr:hover td{
	background-color:var(--brand-100,#eaf7f0);
}

/* ---------- Footer: gold divider + lifted cards feel ---------- */
.footer .footer-top{
	background:linear-gradient(135deg,var(--brand-800,#1F3327),var(--brand-600,#2F8F5B));
}
.footer .single-footer h2::before{
	background:linear-gradient(90deg,var(--brand-400,#D4A54D),#fff);
	width:44px;
}
.footer .single-footer .social li a:hover{
	color:var(--brand-600,#2F8F5B);
}
.footer .copyright{
	background:var(--brand-900,#14251b);
}

/* ---------- Floating scroll-to-top + footer newsletter button ---------- */
#scrollUp{
	background:var(--brand-600,#0785DC);
}
#scrollUp:hover{
	background:var(--brand-800,#045A94);
}
.footer .single-footer .newsletter-inner .button{
	color:var(--brand-600,#0785DC);
}
.footer .single-footer .newsletter-inner .button:hover{
	background:var(--brand-800,#045A94);
}

/* ---------- Homepage hero: gradient banner with gold kicker ---------- */
.hero-premium{
	position:relative;
	overflow:hidden;
	padding:110px 8% 130px;
	text-align:center;
	background:linear-gradient(135deg,var(--brand-800,#1F3327),var(--brand-600,#2F8F5B));
	color:#fff;
}
.hero-premium::before,
.hero-premium::after{
	content:"";
	position:absolute;
	border-radius:50%;
	border:14px solid rgba(255,255,255,.08);
	z-index:0;
}
.hero-premium::before{
	width:260px;
	height:260px;
	left:-80px;
	top:-80px;
}
.hero-premium::after{
	width:180px;
	height:180px;
	right:-40px;
	bottom:-60px;
}
.hero-premium-inner{
	position:relative;
	z-index:1;
	max-width:720px;
	margin:0 auto;
}
.hero-kicker{
	display:inline-block;
	padding:6px 18px;
	margin-bottom:18px;
	border-radius:50px;
	background:rgba(255,255,255,.12);
	border:1px solid rgba(255,255,255,.25);
	color:var(--brand-400,#D4A54D);
	font-size:13px;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
}
.hero-premium h1{
	font-family:'Sora','Noto Sans Thai',sans-serif;
	font-size:56px;
	font-weight:800;
	letter-spacing:-.02em;
	margin-bottom:18px;
	color:#fff;
}
.hero-premium .hero-th{
	font-size:19px;
	margin-bottom:6px;
	opacity:.95;
}
.hero-premium .hero-en{
	font-size:16px;
	margin-bottom:32px;
	opacity:.8;
}
.hero-premium .btn{
	background:linear-gradient(135deg,var(--brand-400,#D4A54D),#f0c876);
	color:var(--brand-900,#14251b);
	box-shadow:0 16px 34px -14px rgba(0,0,0,.45);
}
.hero-premium .btn:hover{
	color:var(--brand-900,#14251b);
}
@media(max-width:768px){
	.hero-premium{padding:80px 6% 96px;}
	.hero-premium h1{font-size:38px;}
}

/* ---------- Homepage brand statement (replaces misused .card wrapper) ---------- */
.brand-statement{
	max-width:1000px;
	margin:56px auto 0;
	padding:36px 40px;
	text-align:center;
	background:var(--brand-100,#eaf7f0);
	border-left:4px solid var(--brand-400,#D4A54D);
	border-radius:var(--radius-md,24px);
	border-right:4px solid var(--brand-400,#D4A54D);
}
.brand-statement .eng{
	margin:0 0 14px;
	font-size:17px !important;
	line-height:1.8;
	color:var(--brand-800,#1F3327) !important;
}
.brand-statement .eng:last-child{
	margin-bottom:0;
}

/* ---------- About page: responsive card grid ---------- */
.about-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
	gap:28px;
	margin-top:8px;
}

/* ---------- Standard / cert badges ---------- */
.standard-certs img{
	transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.standard-certs img:hover{
	transform:translateY(-6px);
}

/* ---------- Contact info block: quiet card lift ---------- */
.contact-us .contact-info{
	background:#fff;
	border-radius:var(--radius-md,24px);
	padding:28px 32px;
	box-shadow:var(--shadow-1,0 10px 28px -14px rgba(4,49,79,.18));
}

@media(max-width:768px){
	.contact-us .container > h2,
	.section-title h2{
		font-size:26px;
	}
}