/*
Theme Name:   Flatsome Child — Wagyu En Asakusa
Theme URI:    https://your-domain.com
Description:  Child theme for Flatsome — Wagyu En Asakusa restaurant
Author:       Your Name
Template:     flatsome
Version:      1.0.0
Text Domain:  wagyu
*/

body{
	font-size: 16px;
	letter-spacing: 0.1em;
	color: #999;
	line-height: 1.9 !important;
}

/* Header */
.header .header-main .flex-row {
	max-width: 100%;
	padding: 2% 10%;
	background: rgba(0, 0, 0, 0.8);
}
.header .header-main li a{
	color: var(--primary-color);
	padding: 0;
	font-size: 18px;
	margin: 0 13px;
	font-weight: 600;
	position: relative;
	letter-spacing: 2px;
}
.header .header-main li.menu-item a::after,
body.page .off-canvas-center .nav-sidebar.nav-vertical li > a::after{
	content: "";
	position: absolute;
	bottom: 4px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	transition: .5s;
}
.header .header-main li a:hover::after,
body.page .off-canvas-center .nav-sidebar.nav-vertical li > a:hover::after{
	width: 100%;
}
.header .header-main .header-nav{
	position: static;
}
.header .header-main .social-icons i,
.header .header-main .social-icons a{
	font-size: 22px;
	min-width: 24px;
}
.header .header-main .header-social-icons{
	position: absolute;
	right: 40px;
}
.header .header-main .header-nav .nav-icon{
	position: absolute;
	right: 20px;
}
body.page .mfp-bg.off-canvas-center:not(.dark).mfp-ready {
	transform: scale(50);
}
body.page .mfp-wrap{
	z-index: 9999;
}
body.page .mfp-bg.off-canvas-center:not(.dark) {
	position: fixed;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #111111;
	opacity: 0.9;
	visibility: visible;
	transform: scale(0);
	right: -50px;
	top: -50px;
	transition: all .6s;
	z-index: 9999;
}
body.page .off-canvas-left.mfp-ready .mfp-content{
	background: transparent;
	top: 50% !important;
	left: 50%;
	transform: translate(-50%,-50%);
	overflow: inherit;
	height: fit-content;
	width: auto;
	box-shadow: none;
}
body.page .off-canvas-center .nav-sidebar.nav-vertical li > a{
	color: var(--primary-color);
	font-size: 20px;
	display: inline-block;
	text-align: center;
	padding: 0;
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 10px;
	letter-spacing: 2px;
}
body.page .off-canvas-center .nav-sidebar.nav-vertical li{
	border-top: 0;
	padding: 0;
	display: block;
	text-align: center;
}
body.page .off-canvas-center .nav-sidebar.nav-vertical li i{
	margin-right: 10px;
}
body.page .off-canvas-center .nav-sidebar .copylightnavi{
	color: var(--primary-color);
	margin-bottom: 25px;
	letter-spacing: 2px;
}
body.page .off-canvas-center:not(.dark) .mfp-close {
	top: 60px !important;
	right: 32px;
	color: var(--primary-color);
}

.container-width, .full-width .ubermenu-nav, .container, .section-content > .row{
	max-width: 100% !important;
	padding: 0 10% !important;
}
.shop-container > .row, .shop-container .row.content-row{
	padding: 0 10% !important;
}
.row{
	max-width: 100% !important;
	margin-left: 0 !important;
}
/* Slide */
.section-hero .slider .img.is-selected{
	animation: 5s ease-in zoomout infinite;
}
@keyframes zoomout{
	0%{
		transform: scale(1.15);
	}
	100%{
		transform: scale(1);
	}
}
.section-hero .section-content .text{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 9;
	max-width: 300px;
}
.section-hero .section-content::after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 8;
}
.sp{
	display: none;
}
.section-hero .section-content .slider-wrapper::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	z-index: 50;
	animation: 5s infinite ease-in slideright;
	z-index: 10;
}
@keyframes slideright{
	0%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}
.section .section-heading h2{
	font-size: 30px;
	letter-spacing: 2px;
}
.section .section-heading p{
	color: var(--primary-color);
	font-size: 14px;
}
/* Reccomend */
.st-recmd .box-text h3{
	font-size: 18px;
	margin-bottom: 13px;
	margin-top: 10px;
	font-weight: 500;
}
.st-recmd .box-text p{
	letter-spacing: 1.4px;
	line-height: 2;
}
/* Shopinfo */
.st-shopinfo_row{
	margin-top: 40px;
}
.st-shopinfo_row dt {
	font-weight: bold;
	color: var(--primary-color);
	padding-top: 3%;
	text-transform: none;
	font-size: 18px;
}
.st-shopinfo_row dd{
	display: block;
	margin: 0;
	text-transform: none;
	font-size: 16px;
}
.view-more{
	color: var(--primary-color);
	text-transform: none;
}
.st-atmos .row .gallery-col{
	padding: 5px;
}
.st-atmos .view-more.is-link:hover{
	color: var(--primary-color);
}

.st-reser {
	padding: 15% 0 10% !important;
	font-style: italic;
}
.st-reser .section-bg{
	background: url("/wp-content/uploads/2026/06/5.4-scaled.jpg") center center no-repeat;
	background-position: center;
	background-attachment: fixed;
}
.st-reser h2{
	color: #fff;
	letter-spacing: 3px;
	font-size: 30px;
	font-style: italic;
	font-weight: 500;
}
.st-reser .contact_header_txt{
	padding: 0.1px;
	letter-spacing: 0.04em;
	text-align: center;
	padding-left: 15%;
	padding-right: 15%;
	color: #cccccc;
	font-style: italic;
	font-size: 15px;
	font-weight: 500;
}
.st-reser p a{
	font-size: 24px;
}
.st-reser a.button{
	border-radius: 25px;
	width: 270px;
	line-height: 50px;
	text-transform: none;
	transition: .3s;
}
.st-reser a.button i{
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translatey(-50%);
}
.st-reser a.button span{
	font-size: 14px;
	font-style: normal;
}
.st-reser a.button.white.is-outline:hover{
	color: var(--primary-color) !important;
	background: transparent !important;
	border-color: inherit;
}

/* Footer */

.floating_btn{
	position: fixed;
	right: 0px;
	top: 25%;
	z-index: 999;
}
.floating_btn a{
	display: block;
	padding: 0px;
	text-decoration: none;
	color: var(--primary-color);
	position: relative;
	border: 2px solid var(--primary-color);
	border-right: 0;
	min-width: 50px;
	height: 200px;
	padding: 20px;
	text-align: center;
	display: block;
	writing-mode: vertical-rl;
	font-weight: bold;
	text-decoration: none;
	outline: none;
	transition: all .2s;
	letter-spacing: 3px;
}
.footer{
	background: url(/wp-content/uploads/2026/06/noise.png) repeat #000;
}
.footer .footer-menu_main .footer-menu,
.footer .footer-menu_main .social-icons{
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.footer .footer-menu_main .col-inner{
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}
.footer .footer-menu_main .ux-menu-link a{
	text-transform: uppercase;
	color: #333;
	position: relative;
}
.footer .footer-menu_main .ux-menu-link--active a{
	color: #333;
}
.footer .footer-menu_main .social-icons a{
	margin: 0;
	color: #333;
	position: relative;
	padding: 4px 3px;
}

.footer .footer-menu_main .ux-menu-link a::after,
.footer .footer-menu_main .social-icons a::after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	transition: .5s;
}
.footer .footer-menu_main .ux-menu-link a:hover::after,
.footer .footer-menu_main .social-icons a:hover::after{
	width: 100%;
}
.mn-privc{
	justify-content: center;
	flex-direction: row;
}
.mn-privc .ux-menu-link__link{
	color: #333;
	margin-top: -15px;
}
.mn-privc .ux-menu-link__link:hover{
	color: #333;
}
.absolute-footer.dark{
	display: none !important;
}
.absolute-footer .footer-primary.pull-left{
	float: none;
}
.atmos-st h2{
	margin-bottom: 30px;
}
h1.shop-page-title.is-xlarge {
    color: var(--primary-color);
    font-size: 34px;
    letter-spacing: 6px;
}
@media (max-width: 768px) {
	.footer .footer-menu_main .col-inner{
		flex-direction: column;
	}
	.footer .footer-menu_main .footer-menu, .footer .footer-menu_main .social-icons {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
	}
	.st-reser a.button{
		margin-right: 0;
	}
	.floating_btn a{
		border-width: 1px;
		height: 160px;
		padding: 10px;
		font-size: 14px;
	}
}

/* ── Page Concept ─────────────────────────────── */
.page-id-2263 .section-content > .row{
	padding: 0 20% !important;
}
.st-concept-hero {
	position: relative;
	overflow: hidden;
}
.st-concept-hero .section-content {
	position: relative;
}
.concept-hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.52);
	z-index: 10;
	padding-top: 10%;
}
.concept-hero-inner {
	text-align: center;
}
.concept-logo img {
	width: 120px;
	max-width: 180px;
	margin-bottom: 16px;
	filter: brightness(1.1);
}
.concept-label {
	color: var(--primary-color);
	font-size: 34px;
	letter-spacing: 6px;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0;
}

.st-concept-intro .section-heading h2 {
	color: var(--primary-color);
	font-size: 22px;
	letter-spacing: 2px;
	font-weight: 500;
	line-height: 1.7;
	font-style: italic;
}
.concept-quote {
	color: #ccc;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 20px;
	quotes: "\201C" "\201D";
}
.concept-quote::before { content: open-quote; }
.concept-quote::after  { content: close-quote; }

.concept-sub-heading {
	color: var(--primary-color);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top: 40px;
	margin-bottom: 10px;
}

/* Belief blocks */
.concept-belief {
	margin: 40px 0;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.concept-belief:last-child {
	border-bottom: none;
}
.belief-number {
	color: var(--primary-color);
	font-size: 13px;
	letter-spacing: 2px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.passion-heading {
	color: var(--primary-color);
	font-size: 26px;
	letter-spacing: 2px;
	font-weight: 500;
	margin-bottom: 30px;
}
.passion-quote {
	color: #e0e0e0;
	font-size: 18px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.8;
	margin-bottom: 24px;
}
.passion-philosophy {
	color: #888;
	font-size: 13px;
	line-height: 2;
	margin: 20px 0;
}
.passion-sub-heading {
	color: var(--primary-color);
	font-size: 15px;
	font-style: italic;
	font-weight: 600;
	margin: 36px 0 16px;
}

.st-concept-gallery {
	padding: 0 !important;
}
.st-concept-gallery .gallery-item img {
	transition: transform 0.5s ease, opacity 0.3s ease;
}
.st-concept-gallery .gallery-item:hover img {
	transform: scale(1.04);
	opacity: 0.85;
}

.about-eyebrow {
	color: var(--primary-color);
	font-size: 11px;
	letter-spacing: 6px;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 4px;
}
.about-sub {
	color: #777;
	font-size: 12px;
	letter-spacing: 3px;
	margin-bottom: 32px;
	font-style: italic;
}
.about-logo {
	margin: 0 auto 32px;
}
.about-logo img {
	width: 200px;
	filter: brightness(1.1);
}
.about-body {
	color: #999;
	font-size: 13px;
	line-height: 2.2;
	max-width: 600px;
	margin: 0 auto;
}


/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 768px) {
	.page-id-2263 .section-content > .row{
		padding: 0 5% !important;
	}
	.concept-logo img { width: 80px; }
	.passion-heading  { font-size: 20px; }
	.passion-quote    { font-size: 15px; }
	.reser-phone      { font-size: 18px; }
	.reser-btns       { flex-direction: column; align-items: center; }
}


/* Page Menu */

.menu-st h3{
	margin: 0;
	padding-top: 3%;
	padding-bottom: 1%;
	font-size: 25px;
}
.menu-st h4{
	padding-top: 3%;
	padding-bottom: 1%;
	font-size: 16px;
	line-height: 1.8;
}
.menu-st p{
	padding-top: 5%;
	padding-bottom: 7%;
	font-size: 14px;
	line-height: 2;
}
.menu-st .box-text div a{
	position: relative;
	font-size: 12px;
	line-height: 2;
	background: #111111;
	margin-top: 25px;
	padding: 6px 60px 6px 30px;
	display: inline-block;
	text-align: center;
	transition: all .2s linear;
	color: #777777 !important;
	text-decoration: none;
	border: transparent 2px solid;
	outline: none;
	border-radius: 100px;
}
.menu-st .box-text div a:hover{
	background: var(--primary-color);
	color: #ffffff !important;
	border-color: var(--primary-color);
}
.menu-st .box-text div a::after{
	content: '';
	position: absolute;
	top: 40%;
	right: 13px;
	border: 4px solid transparent;
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-left-color: #777777;
	transition: all .2s linear;
}

.menu-st .box-text div a:hover::after{
	border-left-color: #ffffff;
	right: 20px;
}
.menu-st .box-text div a::before{
	content: "";
	position: absolute;
	top: 49%;
	right: 20px;
	width: 20px;
	height: 1px;
	background: #777777;
}

.menu-st .box-text div a:hover::before{
	background: #ffffff;
	right: 25px;
}


/* ── Page SHOPINFO ── */
.st-shopinfo-main .section-heading h2,
.st-shopinfo-seat .section-heading h2 {
	color: var(--primary-color);
	font-size: 26px;
	letter-spacing: 4px;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.st-shopinfo-main .section-heading p,
.st-shopinfo-seat .section-heading p {
	color: #777;
	font-size: 12px;
	letter-spacing: 2px;
	font-style: italic;
}

.st-shopinfo-main {
	background: #0a0a0a;
}

.st-shopinfo-main .st-shopinfo_row {
	margin-top: 50px;
	padding-top: 40px;
}
.attention_box {
	display: inline-block;
	font-size: 12px;
	background-color: #111111;
	padding-top: 3%;
	padding-bottom: 3%;
	padding-left: 5%;
	padding-right: 5%;
}
.st-shopinfo-map {
	background: #000;
}
.shopinfo-map {
	line-height: 0;
	display: block;
}
.shopinfo-map iframe {
	width: 100%;
	height: 420px;
	border: 0;
	display: block;
	filter: grayscale(0.4) contrast(1.1) brightness(0.85);
}

.st-shopinfo-seat {
	background: #0a0a0a;
}
.seat-intro {
	color: #e0e0e0;
	font-size: 16px;
	font-style: italic;
	font-weight: 600;
	margin-bottom: 16px;
	letter-spacing: 1px;
}
.seat-details {
	padding: 20px 0 40px;
	margin-bottom: 8px;
	color: var(--primary-color);
	font-size: 13px;
}
.seat-details p {
	margin-bottom: 15px;
}
.seat-details p span {
	color: #999;
	display: block;
}

/* Hover zoom on seat images */
.st-shopinfo-seat .ux-image-box img,
.st-shopinfo-seat .ux-image img {
	transition: transform 0.5s ease, opacity 0.3s;
}
.st-shopinfo-seat .ux-image-box:hover img,
.st-shopinfo-seat .ux-image:hover img {
	transform: scale(1.03);
	opacity: 0.9;
}

.st-shopinfo-awards {
	background: #0a0a0a;
}
.awards-eyebrow {
	color: var(--primary-color);
	font-size: 26px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 24px;
}
.awards-badges img {
	max-width: 560px;
	width: 100%;
	margin: 0 auto 32px;
	display: block;
}
.awards-body {
	color: #888;
	font-size: 15px;
	line-height: 2.1;
	margin-bottom: 10px;
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 768px) {
	.st-shopinfo-seat .seat-details {
		padding: 16px 0 28px;
	}
	.shopinfo-map iframe {
		height: 280px;
	}
	.policy-block {
		font-size: 12px;
	}
}



/* ── Gallery wrap ──────────────────────────────── */
.course-gallery-wrap {
	position: sticky;
	top: 100px; /* dính khi scroll nội dung bên phải dài */
}

/* ── Main slider ───────────────────────────────── */
.course-main-slider {
	aspect-ratio: 4/3;
	overflow: hidden;
}
.course-main-slider .img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.course-main-slider .flickity-button {
	color: #fff !important;
	width: 36px !important;
	height: 36px !important;
}

/* ── Thumbnails ────────────────────────────────── */
.course-thumbs-wrap {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}
.course-thumbs-wrap .thumb-item {
	flex: 1;
	cursor: pointer;
	overflow: hidden;
	opacity: 0.4;
	transition: opacity .25s;
	aspect-ratio: 1/1;
}
.course-thumbs-wrap .thumb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.course-thumbs-wrap .thumb-item.is-active,
.course-thumbs-wrap .thumb-item:hover {
	opacity: 1;
}
.course-thumbs-wrap .thumb-item.is-active {
	outline: 2px solid var(--primary-color);
	outline-offset: -2px;
}

.course-main-slider .slider {
	min-height: 300px !important; 
	height: 100% !important;
}

.course-main-slider .flickity-viewport {
	height: 100% !important;
	min-height: 100%;
	width: 100% !important;
}

.course-tabs .nav-tabs+.tab-panels{
	background: transparent;
	border: 0;
	border-top: 3px solid #222222;
	padding: 40px 0;
}
.course-tabs .nav-tabs>li>a{
	background: #333;
	color: #fff;
	border: 0;
	margin: 0 2px;
	padding: 15px 15px;
	padding-left: 30px;
	padding-right: 30px;
	font-weight: bold;
	font-size: 13px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
.course-tabs .nav-tabs>li.active>a,
.course-tabs .nav-tabs>li:hover>a{
	background: #111;
}
.course-price {
	font-size: 22px;
	letter-spacing: 2px;
	color: var(--primary-color);
	margin-bottom: 6px;
}
.course-price span {
	display: block;
	font-size: 11px;
	color: #555;
	letter-spacing: 1px;
	margin-top: 4px;
	font-weight: 400;
}
.course-txt {
	font-size: 13px;
	line-height: 1.9;
	color: #888;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.course{
	padding-top: 3% !important;	
}
.course dt{
	font-size: 95%;
	font-weight: bold;
	color: #c7904a;
	padding-top: 2%;
}

.course dd{
	padding-bottom: 2%;
}
.course li {
	font-size: 95%;
	padding-top: 15px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #222222;
	line-height: 1.5em;
	min-height: 50px;
	vertical-align: top;
	display: block;
}
@media (max-width: 768px) {
	.container-width, .full-width .ubermenu-nav, .container, .section-content > .row {
		padding: 0 5% !important;
	}
	.course-tabs .nav-tabs>li{
		width: 49%;
	}
	.course-tabs .nav-tabs>li>a{
		width: 100%;
		justify-content: center;
	}	

	.header .header-main .header-social-icons{
		right: 0;
	}
}


.shop-page-title .page-title-inner{
	min-height: 200px;
}
.category-page-row,.shop-container > .product.type-product{
	padding: 70px 0;
}
p.name.product-title a{
	color: var(--primary-color);
	font-size: 18px;
	margin-top: 0;
	margin-bottom: 15px;
}
.price-wrapper .price *{
	color: var(--fs-experimental-link-color);
	font-size: 18px;
}
.price-wrapper .chu-lien-he a{
	color: #fff;
	font-size: 14px;
	margin-top: 10px;
	padding-bottom: 3px;
	text-decoration: underline;
	text-underline-offset: 6px;
}

.woocommerce-Price-amount .woocommerce-Price-currencySymbol{
	display: inline-block;
	vertical-align: middle;
	margin-right: 3px;
}
.woocommerce-Price-amount bdi{
	font-size: 18px;
}

.product-info .white.button{
	border-radius: 50px;
	margin-top: 20px;
	padding: 10px 20px;
	color: #fff !important;
}
.product-info .white.button:hover{
	color: #000 !important;
	background: var(--primary-color) !important;
	border-color: #000;
}
.product-footer{
	padding-top: 50px;
}
.related.related-products-wrapper{
	padding-top: 30px;
	margin-top: 30px;
}
.related.related-products-wrapper .product-section-title{
	padding: 0 !important;
	margin-bottom: 40px;
}

/* -----------------------------------------------
SECTION: HERO
----------------------------------------------- */

/* Overlay tối lên ảnh nền */
.st-buffet-hero .bg {
	background-size: cover !important;
	background-position: center center !important;
}
.st-buffet-hero .banner-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.45) 50%,
		rgba(0, 0, 0, 0.7) 100%
	);
	z-index: 1;
}
.st-buffet-hero .banner-inner .text-box {
	position: relative;
	z-index: 2;
}

/* Overline nhỏ phía trên tiêu đề */
.st-buffet-hero__overline {
	font-size: 11px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 16px;
	font-weight: 600;
}

/* Tiêu đề chính hero */
.st-buffet-hero__title {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
	margin-bottom: 20px;
}

/* Sub text hero */
.st-buffet-hero__sub {
	font-size: 15px;
	color: rgba(200, 200, 200, 0.85);
	letter-spacing: 0.03em;
	max-width: 540px;
	margin: 0 auto 36px;
	line-height: 1.7;
}

/* Wrapper chứa 2 button */
.st-buffet-hero__actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Base button hero */
.st-buffet-hero__btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

/* Button primary: nền gold */
.st-buffet-hero__btn--primary {
	background: var(--primary-color);
	color: #111 !important;
	border: 2px solid var(--primary-color);
}
.st-buffet-hero__btn--primary:hover {
	background: transparent;
	color: var(--primary-color) !important;
}

/* Button ghost: viền trắng */
.st-buffet-hero__btn--ghost {
	background: transparent;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, 0.6);
}
.st-buffet-hero__btn--ghost:hover {
	border-color: var(--primary-color);
	color: var(--primary-color) !important;
}

/* Responsive hero */
@media (max-width: 768px) {
	.st-buffet-hero__title {
		font-size: 32px;
	}
	.st-buffet-hero__sub {
		display: none;
	}
	.st-buffet-hero__title{
		margin-bottom: 40px !important;
	}
	.st-buffet-hero__btn {
		padding: 12px 22px;
		font-size: 12px;
	}
}

/* -----------------------------------------------
SECTION: PRICING
----------------------------------------------- */

.st-buffet-pricing {
	background: #111 !important;
}

/* Heading section */
.st-buffet-pricing__heading {
	font-size: 36px;
	font-weight: 600;
	color: var(--primary-color);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 60px;
}

/* Row chứa 3 cards — căn đều */
.st-buffet-pricing__row .col {
	display: flex;
}

/* -----------------------------------------------
COMPONENT: PRICE CARD
----------------------------------------------- */

/* Base card */
.st-price-card {
	position: relative;
	z-index: 5;
	background: #000;
	border: 1px solid rgba(201, 168, 76, 0.2);
	border-radius: 4px;
	padding: 36px 28px 32px;
	width: 100%;
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s ease;
	border-radius: 20px;
}
.st-price-card:hover {
	border-color: rgba(201, 168, 76, 0.5);
}

/* Card featured (card giữa) */
.st-price-card--featured {
	border: 2px solid var(--primary-color);
	background: #000;
	box-shadow: 0 0 40px rgba(201, 168, 76, 0.08);
}

/* Badge "BEST VALUE" trên card featured */
.st-price-card__badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary-color);
	color: #111;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	padding: 4px 16px;
	border-radius: 99px;
	white-space: nowrap;
}
.st-fam-grid__item{
    position: relative;
}
.required-star{
    position: absolute;
    top: -40px;
    left: 50%;
    font-size: 3rem;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 
               0 0 20px rgba(255, 215, 0, 0.4);
    animation: float 3s ease-in-out infinite;
    cursor: default;
    user-select: none;
    z-index: 5;
}
@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-5px) scale(1.1);
  }
}

/* Tag "SAVE 40%" trên card VIP */
.st-price-card__tag {
	display: inline-block;
	background: rgba(201, 168, 76, 0.15);
	color: var(--primary-color);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	padding: 3px 10px;
	border-radius: 3px;
	margin-top: 6px;
	border: 1px solid rgba(201, 168, 76, 0.3);
}

/* Header card: tier + subtitle */
.st-price-card__header {
	margin-bottom: 20px;
}
.st-price-card__tier {
	font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.st-price-card__subtitle span {
    font-weight: bold;
    color: #fff;
    font-size: 14px;
}
.st-price-card__subtitle {
	font-size: 10px;
	letter-spacing: 0.18em;
	color: #fff;
	text-transform: uppercase;
}
.text-note p {
    margin: 0;
    border: 1px solid #333;
    padding: 40px;
    border-radius: 15px;
}
/* Price display */
.st-price-card__price-wrap {
	display: flex;
	align-items: baseline;
	gap: 2px;
	margin-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding-bottom: 24px;
}
.st-price-card__currency {
	font-size: 30px;
	color: #fff;
	font-weight: 600;
	opacity: 0.7;
}
.st-price-card--featured .st-price-card__currency{
	color: var(--primary-color);
}
.buffet-gallery > .col > .col-inner{
    margin-top: 40px;
    padding: 20px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
}
.buffet-gallery .gallery-col .col-inner{
    border: 1px solid #fff;
    border-radius: 5px;
    overflow: hidden;
}
.st-price-card__amount {
	font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1;
    opacity: 0.7;
}
.st-price-card--featured .st-price-card__amount {
	color: var(--primary-color);
}
.st-price-card__per {
	font-size: 12px;
	color: #666;
	margin-left: 4px;
}

/* Danh sách features */
.st-price-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	flex: 1;
}
.st-price-card__features li {
	font-size: 16px;
	color: #fff;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	letter-spacing: 0.03em;
	line-height: 1.5;
}
.st-price-card__features li strong {
    font-weight: bold;
}
.st-price-card__features li:last-child {
	border-bottom: none;
}

/* Icon check trong danh sách */
.st-price-card__check {
	color: var(--primary-color);
	margin-right: 8px;
	font-size: 13px;
}

/* Ảnh VIP steak nhỏ */
.st-price-card__vip-img {
	margin: 0 -4px 20px;
	border-radius: 3px;
	overflow: hidden;
}
.st-price-card__vip-img img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
	opacity: 0.85;
}

/* Button trong card */
.st-price-card__btn {
	display: block;
	text-align: center;
	padding: 13px 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-radius: 3px;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-top: auto;
}

/* Button primary (card featured) */
.st-price-card__btn--primary {
	background: var(--primary-color);
	color: #111 !important;
	border: 2px solid var(--primary-color);
}
.st-price-card__btn--primary:hover {
	background: transparent;
	color: var(--primary-color) !important;
}

/* Button outline (card thường) */
.st-price-card__btn--outline {
	background: transparent;
	color: var(--primary-color) !important;
	border: 2px solid rgba(201, 168, 76, 0.5);
}
.st-price-card__btn--outline:hover {
	border-color: var(--primary-color);
	background: rgba(201, 168, 76, 0.08);
}

/* Responsive pricing */
@media (max-width: 768px) {
	.st-buffet-pricing__heading {
		font-size: 26px;
		margin-bottom: 40px;
	}
	.st-price-card {
		margin-bottom: 24px;
	}
	.st-price-card__amount {
		font-size: 36px;
	}
	/* Card featured hiển thị nổi bật hơn trên mobile */
	.st-price-card--featured {
		order: -1;
	}
}

/* ================================================
   PAGE: VIP FAMILY SET
   ================================================ */

/* Overlay gradient tối — đậm bên trái để text đọc được */
.st-fam-hero .banner-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.5) 55%,
        rgba(0, 0, 0, 0.15) 100%
    );
    z-index: 1;
}
.st-fam-hero .banner-inner .text-box {
    position: relative;
    z-index: 2;
}

/* Overline nhỏ */
.st-fam-hero__overline {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 600;
}

/* Tiêu đề hero — chữ lớn, stack dọc */
.st-fam-hero .st-fam-hero__title {
    font-size: 80px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 24px;
    text-transform: uppercase;
}

/* Chữ "Family" in nghiêng, màu gold */
.st-fam-hero .st-fam-hero__title-em {
    font-style: italic;
    color: var(--primary-color);
    font-weight: 700;
}
.editorial-text-mask {
    -webkit-text-stroke: 1px rgba(242, 202, 80, 0.3);
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* Sub text */
.st-fam-hero__sub {
    font-size: 14px;
    color: rgba(180, 180, 180, 0.85);
    line-height: 1.8;
    max-width: 380px;
    margin-bottom: 32px;
    letter-spacing: 0.02em;
}

/* Badges A5 + VIP */
.st-fam-hero__badges {
    display: flex;
    align-items: center;
    gap: 12px;
}
.st-fam-hero__badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    border-radius: 3px;
}
.st-fam-hero__badge small {
    font-size: 9px;
    letter-spacing: 0.1em;
    opacity: 0.8;
}
.st-fam-hero__badge--vip {
    background: var(--primary-color);
    color: #111;
}

/* Responsive hero */
@media (max-width: 768px) {
    .st-fam-hero__title {
        font-size: 48px;
    }
    .st-fam-hero__sub {
        font-size: 13px;
    }
}

/* -----------------------------------------------
   SECTION: CURATED SELECTION
   ----------------------------------------------- */

.st-fam-curated {
    background: #0a0a0a !important;
}

/* Heading lớn, serif feel bằng weight */
.st-fam-curated__heading {
    font-size: 56px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.1;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.st-fam-curated__sub {
    font-size: 14px;
    color: #8c8273;
    line-height: 1.8;
    max-width: 550px;
    margin-bottom: 0;
}

/* -----------------------------------------------
   COMPONENT: STAGGERED GRID
   Layout: card 1+3 trái 45%, card 2+4 phải 50%
   ----------------------------------------------- */

.st-fam-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    margin-top: 80px;
    position: relative;
}

/* Card trái: offset xuống để tạo hiệu ứng stagger */
.st-fam-grid__item--left {
    grid-column: 1;
    padding: 0 40px 0 0;
    /* Card 1 ở row 1, card 3 ở row 2 */
}
.st-fam-grid__item--right {
    grid-column: 2;
    padding: 0 0 0 20px;
    margin-top: 60px; /* stagger offset */
}

/* Đường kẻ vàng dọc giữa 2 cột */
.st-fam-grid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 5%;
    height: 90%;
    width: 0.5px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(201, 168, 76, 0.3) 20%,
        rgba(201, 168, 76, 0.3) 80%,
        transparent
    );
}

/* Spacing giữa các card trong cùng cột */
.st-fam-grid__item--left + .st-fam-grid__item--left,
.st-fam-grid__item--right + .st-fam-grid__item--right {
    margin-top: 40px;
}

/* -----------------------------------------------
   COMPONENT: PRICE CARD
   ----------------------------------------------- */

.st-fam-card {
    background: #000;
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 10px;
    padding: 32px 28px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 40px;
}
.st-fam-card:last-child {
    margin-bottom: 0;
}
.st-fam-card:hover {
    border-color: rgba(201, 168, 76, 0.4);
    box-shadow: 0 0 30px rgba(201, 168, 76, 0.05);
}

/* Card featured — border gold sáng */
.st-fam-card--featured {
    background: #000;
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 40px rgba(201, 168, 76, 0.1);
}

/* Card elite — nền hơi sáng hơn */
.st-fam-card--elite {
    background: #000;
    border: 1px solid rgba(201, 168, 76, 0.35);
}

/* Top row: tier label + icon số */
.st-fam-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.st-fam-card__tier-label {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 700;
}
.st-fam-card__icon {
    font-size: 120px;
    color: rgb(255 255 255 / 0.05);
    font-weight: 700;
    line-height: 1;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(35%, -25%);
    font-family: Playfair Display;
}

/* Tên course */
.st-fam-card__name {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

/* Price row */
.st-fam-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid rgba(201, 168, 76, 0.15);
}
.st-fam-card__currency {
    font-size: 30px;
    color: #fff;
    font-weight: 600;
	margin-left: 10px;
	opacity: 0.7;
}
.st-fam-card--featured .st-fam-card__currency{
	color: var(--primary-color);
}
.st-fam-card__amount {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
	opacity: 0.7;
}
.st-fam-card--featured .st-fam-card__amount {
    color: var(--primary-color);
}
.st-fam-card__per {
    font-size: 11px;
    color: #555;
    margin-left: 3px;
    letter-spacing: 0.05em;
}

/* Feature list */
.st-fam-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}
.st-fam-card__features li {
    font-size: 12px;
    color: #999;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.st-fam-card__features li:last-child {
    border-bottom: none;
}
.st-fam-card__icon-feat {
    color: var(--primary-color);
    font-size: 7px;
    flex-shrink: 0;
}

/* Buttons */
.st-fam-card__btn {
    display: block;
    text-align: center;
    padding: 12px 16px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}
.st-fam-card__btn--outline {
    background: transparent;
    color: var(--primary-color) !important;
    border: 1px solid rgba(201, 168, 76, 0.4);
}
.st-fam-card__btn--outline:hover {
    border-color: var(--primary-color);
    background: rgba(201, 168, 76, 0.06);
}
.st-fam-card__btn--primary {
    background: var(--primary-color);
    color: #111 !important;
    border: 1px solid var(--primary-color);
}
.st-fam-card__btn--primary:hover {
    background: transparent;
    color: var(--primary-color) !important;
}

/* Responsive grid — stack dọc trên mobile */
@media (max-width: 768px) {
    .st-fam-grid {
        grid-template-columns: 1fr;
        margin-top: 48px;
    }
    .st-fam-grid::before {
        display: none;
    }
    .st-fam-grid__item--left,
    .st-fam-grid__item--right {
        grid-column: 1;
        padding: 0;
        margin-top: 0;
    }
    .st-fam-grid__item--right {
        margin-top: 0;
    }
    .st-fam-curated__heading {
        font-size: 38px;
    }
	.st-fam-card__icon{font-size: 90px;}
}

/* -----------------------------------------------
   SECTION: ENDLESS JOY
   ----------------------------------------------- */

.st-fam-joy {
    background: #0a0a0a !important;
}

/* Cột ảnh — chiều cao full section */
.st-fam-joy__img-col {
    padding: 0 !important;
    position: relative;
}
.st-fam-joy__img-col .img-inner,
.st-fam-joy__img-col img {
    width: 100%;
    height: 100%;
    min-height: 580px;
    object-fit: cover;
    display: block;
}

/* Cột content — padding rộng */
.st-fam-joy__inner {
    padding: 20px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Overline */
.st-fam-joy__overline {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
}

/* Heading */
.st-fam-joy__heading {
    font-size: 64px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.05;
    letter-spacing: 0.1em;
    margin-bottom: 28px;
}

/* Body text */
.st-fam-joy__body {
    font-size: 14px;
    color: #888;
    line-height: 1.9;
    max-width: 550px;
    margin-bottom: 40px;
}

/* Stats row */
.st-fam-joy__stats {
    display: flex;
    gap: 48px;
    margin-bottom: 48px;
    padding-top: 32px;
    border-top: 0.5px solid rgba(201, 168, 76, 0.2);
}
.st-fam-joy__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.st-fam-joy__stat-num {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    letter-spacing: -0.02em;
}
.st-fam-joy__stat-label {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #555;
    font-weight: 700;
}

/* CTA button */
.st-fam-joy__btn {
    display: inline-block;
    padding: 15px 36px;
    background: var(--primary-color);
    color: #111 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid var(--primary-color);
    transition: all 0.3s ease;
    align-self: flex-start;
}
.st-fam-joy__btn:hover {
    background: transparent;
    color: var(--primary-color) !important;
}

/* Responsive Endless Joy */
@media (max-width: 768px) {
    .st-fam-joy__img-col img,
    .st-fam-joy__img-col .img-inner {
        min-height: 300px;
    }
    .st-fam-joy__inner {
        padding: 48px 20px;
    }
    .st-fam-joy__heading {
        font-size: 44px;
    }
    .st-fam-joy__stats {
        gap: 32px;
    }
    .st-fam-joy__btn {
        align-self: stretch;
        text-align: center;
    }
}