/**
 * Responsive — toàn site (header, footer, layout, overflow).
 *
 * @package hanoi26
 */

:root {
	--hanoi26-topbar-h: 2.25rem;
	--hanoi26-header-h: 5rem;
	--hanoi26-sticky-offset: calc(var(--hanoi26-topbar-h) + var(--hanoi26-header-h));
	--hanoi26-touch-min: 2.75rem;
	--hanoi26-mobile-buy-bar-h: 4.5rem;
	--hanoi26-safe-bottom: env(safe-area-inset-bottom, 0px);
	--hanoi26-page-pad-bottom-mobile: calc(var(--hanoi26-mobile-buy-bar-h) + var(--hanoi26-safe-bottom));
	--hanoi26-z-header: 50;
	--hanoi26-z-filter: 40;
	--hanoi26-z-chatbot: 45;
	--hanoi26-z-buy-bar: 50;
	--hanoi26-z-mini-cart: 110;
	--hanoi26-z-modal: 70;
	--hanoi26-z-lightbox: 80;
}

@media (max-width: 767px) {
	:root {
		--hanoi26-topbar-h: 2rem;
		--hanoi26-header-h: 4.5rem;
	}
}

/* Tránh scroll ngang toàn trang */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* Sticky dưới topbar + header */
body .sticky.top-20,
body .sticky.top-28,
body .lg\:sticky.top-28 {
	top: var(--hanoi26-sticky-offset) !important;
}

@media (max-width: 1023px) {
	.hanoi26-my-account-shell .sticky.top-28,
	.woocommerce-account .sticky.top-28,
	.woocommerce-account .lg\:sticky.top-28 {
		position: static !important;
		top: auto !important;
	}

	body .hanoi26-blog-filter-bar.sticky {
		position: sticky !important;
		top: var(--hanoi26-sticky-offset) !important;
		z-index: var(--hanoi26-z-filter) !important;
	}
}

/* —— Header —— */
.hanoi26-site-header__layout {
	min-width: 0;
}

.hanoi26-site-header__row--main {
	min-height: 4rem;
}

@media (min-width: 1024px) {
	.hanoi26-site-header__row--main {
		min-height: 5rem;
	}
}

.hanoi26-site-header__search-slot {
	min-width: 0;
	max-width: 100%;
	display: none;
}

@media (min-width: 1024px) {
	.hanoi26-site-header__search-slot {
		display: block;
		flex: none;
	}
}

.hanoi26-site-header > .w-full > .flex,
.hanoi26-site-header__row--main {
	min-width: 0;
}

.hanoi26-site-header .hanoi26-site-logo img {
	max-width: 8.75rem;
}

@media (min-width: 640px) {
	.hanoi26-site-header .hanoi26-site-logo img {
		max-width: 11rem;
	}
}

@media (min-width: 768px) {
	.hanoi26-site-header .hanoi26-site-logo img {
		max-width: 13rem;
	}
}

.hanoi26-site-header .hanoi26-site-header__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hanoi26-touch-min);
	min-height: var(--hanoi26-touch-min);
	flex-shrink: 0;
}

.hanoi26-site-header .hanoi26-mobile-toggle {
	display: none !important;
}

@media (max-width: 1023px) {
	.hanoi26-site-header .hanoi26-mobile-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: var(--hanoi26-touch-min);
		min-height: var(--hanoi26-touch-min);
		flex-shrink: 0;
	}
}

@media (max-width: 1023px) {
	.hanoi26-site-header .hanoi26-site-header__actions {
		flex-wrap: nowrap;
		justify-content: flex-end;
		max-width: 100%;
	}
}

body.hanoi26-mobile-nav-open {
	overflow: hidden;
}

/* —— Mobile header compact khi scroll —— */
.hanoi26-mobile-scroll-bar {
	display: none;
}

@media (max-width: 1023px) {
	body.hanoi26-header-compact {
		--hanoi26-topbar-h: 0px;
		--hanoi26-header-h: 3.75rem;
	}

	body.hanoi26-header-compact .hanoi26-topbar {
		display: none;
	}

	body.hanoi26-header-compact .hanoi26-site-header__row--main {
		display: none !important;
	}

	body.hanoi26-header-compact .hanoi26-mobile-scroll-bar {
		display: block;
	}

	.hanoi26-mobile-scroll-bar__inner {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		min-height: 3.75rem;
		padding-block: 0.5rem;
	}

	.hanoi26-mobile-scroll-bar__menu {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 0;
		background: transparent;
		color: #ffffff;
		font-size: 1.375rem;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.hanoi26-mobile-scroll-bar__search {
		flex: 1 1 auto;
		min-width: 0;
	}

	.hanoi26-mobile-scroll-bar .hanoi26-site-header__search-input {
		min-height: 2.625rem;
		padding-top: 0.625rem;
		padding-bottom: 0.625rem;
		padding-left: 1rem;
		padding-right: 2.5rem;
		border-radius: 9999px;
		background: #ffffff !important;
		color: #111827 !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	}

	.hanoi26-mobile-scroll-bar .hanoi26-site-header__search-input::placeholder {
		color: #9ca3af !important;
	}

	.hanoi26-mobile-scroll-bar .hanoi26-site-header__search-input:focus {
		background: #ffffff !important;
		box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.35);
	}

	.hanoi26-mobile-scroll-bar .hanoi26-site-header__search-icon {
		color: #374151 !important;
		right: 0.875rem;
	}

	.hanoi26-site-header .hanoi26-mobile-scroll-bar__cart.hanoi26-open-mini-cart,
	.hanoi26-site-header .hanoi26-mobile-scroll-bar__cart.hanoi26-open-mini-cart.is-active,
	.hanoi26-mobile-scroll-bar__cart {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 2.5rem;
		height: 2.5rem;
		min-width: 2.5rem;
		min-height: 2.5rem;
		padding: 0 !important;
		margin: 0;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		box-shadow: none !important;
		outline: none !important;
		color: #ffffff !important;
		font-size: 1.25rem;
		cursor: pointer;
		transition: none;
		-webkit-tap-highlight-color: transparent;
		appearance: none;
		-webkit-appearance: none;
	}

	.hanoi26-site-header .hanoi26-mobile-scroll-bar__cart.hanoi26-open-mini-cart:hover,
	.hanoi26-site-header .hanoi26-mobile-scroll-bar__cart.hanoi26-open-mini-cart:focus-visible,
	.hanoi26-mobile-scroll-bar__cart:hover,
	.hanoi26-mobile-scroll-bar__cart:focus-visible {
		background: transparent !important;
		background-color: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		color: #ffffff !important;
		outline: none !important;
	}

	.hanoi26-mobile-scroll-bar__cart i {
		color: inherit !important;
		background: transparent !important;
	}

	.hanoi26-mobile-scroll-bar__cart .hanoi26-cart-count span {
		background: #e53e3e !important;
		color: #ffffff !important;
	}

	/* Dropdown gợi ý tìm kiếm — full width màn hình trên mobile */
	.hanoi26-mobile-scroll-bar .hanoi26-header-search-suggest,
	.hanoi26-site-header__search--mobile-bar .hanoi26-header-search-suggest,
	.hanoi26-header-search-suggest--portal {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		margin: 0 !important;
		transform: none !important;
		border-radius: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		box-sizing: border-box !important;
		z-index: 120 !important;
	}
}

footer .hanoi26-footer-social {
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* —— Footer —— */
.hanoi26-site-footer__grid {
	min-width: 0;
}

/* —— Lưới sản phẩm (toàn site) —— */
.hanoi26-shop-grid,
.hanoi26-product-grid {
	min-width: 0;
}

.hanoi26-shop-grid,
.hanoi26-product-grid.hanoi26-shop-grid,
.hanoi26-shop-archive .hanoi26-shop-grid,
.hanoi26-search-page .hanoi26-shop-grid,
.hanoi26-home-products .hanoi26-shop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 768px) {
	.hanoi26-shop-grid,
	.hanoi26-product-grid.hanoi26-shop-grid,
	.hanoi26-shop-archive .hanoi26-shop-grid,
	.hanoi26-search-page .hanoi26-shop-grid,
	.hanoi26-home-products .hanoi26-shop-grid {
		gap: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.hanoi26-shop-grid,
	.hanoi26-product-grid.hanoi26-shop-grid,
	.hanoi26-shop-archive .hanoi26-shop-grid,
	.hanoi26-search-page .hanoi26-shop-grid,
	.hanoi26-home-products .hanoi26-shop-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1600px) {
	.hanoi26-shop-grid,
	.hanoi26-product-grid.hanoi26-shop-grid,
	.hanoi26-shop-archive .hanoi26-shop-grid,
	.hanoi26-search-page .hanoi26-shop-grid,
	.hanoi26-home-products .hanoi26-shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hanoi26-product-grid-wrap,
.hanoi26-shop-main,
.hanoi26-shop-archive main {
	overflow-x: clip;
}

/* —— Product card — giá xếp dọc trên mobile —— */
@media (max-width: 767px) {
	.product-card__price-row {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 0.125rem;
	}

	.product-card__price-row > span,
	.product-card__price-row del,
	.product-card__price-row ins {
		display: block;
		width: 100%;
		white-space: nowrap;
		line-height: 1.25;
	}

	.product-card__price-row .price {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.125rem;
		width: 100%;
	}

	.product-card__price-row .price del,
	.product-card__price-row .price ins {
		display: block;
		white-space: nowrap;
	}
}

/* —— Slider Sản phẩm mới — mobile —— */
@media (max-width: 767px) {
	.h26-new-slider-section__title {
		font-size: 1.125rem;
		letter-spacing: 0.02em;
		max-width: 18rem;
	}

	#hanoi26-new-products-slider .hanoi26-carousel__viewport {
		padding-top: 0.25rem;
		padding-bottom: 0.75rem;
	}

	#hanoi26-new-products-slider .hanoi26-carousel__btn {
		width: 2.25rem;
		height: 2.25rem;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
	}
}

@media (max-width: 767px) {
	.product-card:not(.product-card--on-trend):not(.product-card--flash-sale):hover,
	.product-card:not(.product-card--on-trend):not(.product-card--flash-sale):focus-within,
	#hanoi26-new-products-slider .product-card:hover,
	#hanoi26-new-products-slider .product-card:focus-within {
		margin: 0;
	}
}

/* Hero / banner — chip voucher không tràn màn hình */
#hero-slider .flex.gap-4,
.hanoi26-hero-voucher-row {
	flex-wrap: wrap;
}

.hanoi26-hero-voucher-scroll {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.75rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	padding-bottom: 0.25rem;
}

.hanoi26-hero-voucher-scroll > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
	max-width: min(100%, 20rem);
}

/* —— Trang tìm kiếm —— */
@media (max-width: 639px) {
	.hanoi26-search-page #hanoi26-search-hero {
		padding-right: 1rem;
		padding-left: 3rem;
		font-size: 0.9375rem;
	}

	.hanoi26-search-page form.relative .absolute.right-2 {
		position: static;
		width: 100%;
		margin-top: 0.5rem;
		border-radius: 9999px;
		padding: 0.75rem 1rem;
	}

	.hanoi26-search-page form.relative {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.hanoi26-search-page form.relative > .absolute.inset-y-0.left-0 {
		top: 0.85rem;
		bottom: auto;
		transform: none;
	}
}

.hanoi26-search-page .search-tab-btn {
	min-height: var(--hanoi26-touch-min);
	display: inline-flex;
	align-items: center;
}

/* —— PDP —— */
@media (max-width: 1023px) {
	body.hanoi26-has-mobile-buy-bar,
	body.hanoi26-single-product-page.hanoi26-has-mobile-buy-bar {
		padding-bottom: var(--hanoi26-page-pad-bottom-mobile) !important;
	}

	.hanoi26-mobile-buy-bar {
		padding-bottom: var(--hanoi26-safe-bottom);
		z-index: var(--hanoi26-z-buy-bar);
	}
}

.hanoi26-single-product-page .hanoi26-product-description table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 639px) {
	.hanoi26-single-product-page .hanoi26-product-voucher-card {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.hanoi26-single-product-page .hanoi26-product-voucher-card__action {
		justify-self: start;
		min-width: 0;
	}
}

/* —— Giỏ hàng —— */
.hanoi26-cart-qty-btn,
.woocommerce .quantity .qty-btn {
	min-width: var(--hanoi26-touch-min);
	min-height: var(--hanoi26-touch-min);
}

/* —— Blog single —— */
@media (max-width: 767px) {
	body.hanoi26-magazine-page .hanoi26-blog-single h2 {
		font-size: 1.25rem;
	}

	body.hanoi26-magazine-page .hanoi26-blog-single h3 {
		font-size: 1.0625rem;
	}
}

@media (max-width: 1023px) {
	body.hanoi26-magazine-page .hanoi26-blog-single-sidebar__sticky,
	.hanoi26-blog-single-sidebar__sticky {
		position: static !important;
		top: auto !important;
	}
}

/* —— Checkout —— */
.hanoi26-checkout-sidebar {
	align-self: start;
}

@media (max-width: 1023px) {
	.hanoi26-checkout-sidebar,
	.woocommerce-checkout .hanoi26-checkout-sidebar {
		position: static !important;
		top: auto !important;
	}
}

@media (max-width: 767px) {
	.hanoi26-wc-payment .hanoi26-payment-method__head {
		padding: 0.85rem 0.9rem;
	}

	.hanoi26-wc-payment .wc_payment_method .payment_box {
		padding-left: 2.7rem;
		padding-right: 0.9rem;
	}

	.hanoi26-wc-payment .hanoi26-payment-method__title,
	.hanoi26-wc-payment .hanoi26-payment-method__badge {
		font-size: 0.875rem;
		word-break: break-word;
	}

	.woocommerce-checkout .form-row input,
	.woocommerce-checkout .form-row select,
	.woocommerce-checkout .form-row textarea {
		width: 100%;
		max-width: 100%;
	}
}

/* —— Account —— */
.hanoi26-account-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 2rem !important;
	align-items: start;
}

@media (min-width: 1024px) {
	.hanoi26-account-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
	}

	.hanoi26-account-grid > .lg\:col-span-4 {
		grid-column: span 4 / span 4 !important;
	}

	.hanoi26-account-grid > .lg\:col-span-8,
	.hanoi26-account-grid > .woocommerce-MyAccount-content {
		grid-column: span 8 / span 8 !important;
	}
}

.hanoi26-my-account-shell .woocommerce-EditAccountForm .form-row,
.hanoi26-my-account-shell .hanoi26-edit-address-form .form-row,
.hanoi26-my-account-shell .hanoi26-address-book-form .form-row {
	float: none !important;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
}

.hanoi26-order-filters-track {
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline: 1rem;
}

.hanoi26-order-filters-track .hanoi26-order-filter {
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* —— Blog filter —— */
.hanoi26-blog-filter-track {
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline: 1rem;
}

.hanoi26-blog-filter-chip {
	scroll-snap-align: start;
}

.hanoi26-article-content img,
.hanoi26-blog-single img {
	max-width: min(100%, 36rem);
	height: auto;
}

/* —— Brand bar —— */
.hanoi26-brand-bar {
	scroll-snap-type: x proximity;
	scroll-padding-inline: 0.5rem;
}

.hanoi26-brand-bar__pill {
	scroll-snap-align: start;
}

/* —— Z-index layers —— */
.hanoi26-header-shell {
	z-index: var(--hanoi26-z-header);
}

.hanoi26-site-header {
	z-index: 1;
}

#ai-chatbot-container {
	z-index: var(--hanoi26-z-chatbot);
}

body.hanoi26-has-mobile-buy-bar #ai-chatbot-container {
	bottom: calc(var(--hanoi26-mobile-buy-bar-h) + 1rem + var(--hanoi26-safe-bottom));
}

#mini-cart-panel,
#mini-cart-overlay {
	z-index: var(--hanoi26-z-mini-cart) !important;
}

@media (max-width: 639px) {
	.hanoi26-sg {
		padding: 0;
		align-items: flex-end;
	}

	.hanoi26-sg__panel {
		max-width: 100%;
		width: 100%;
		max-height: 92vh;
		border-radius: 1rem 1rem 0 0;
		margin: 0;
	}
}

.hanoi26-size-guide-modal,
.hanoi26-membership-tiers-modal,
.hanoi26-reviews-modal {
	z-index: var(--hanoi26-z-modal);
}

/* —— Login reCAPTCHA —— */
.hanoi26-login-card .g-recaptcha-wrap {
	max-width: 100%;
	overflow-x: auto;
}

.hanoi26-login-card .g-recaptcha-wrap > div {
	max-width: 100%;
}

/* —— Vouchers account mobile —— */
@media (max-width: 639px) {
	.hanoi26-voucher-row {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 0.75rem;
	}

	.hanoi26-voucher-row .hanoi26-voucher-actions {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
}

/* —— Hero trang chủ —— */
@media (max-width: 639px) {
	#hero-slider {
		min-height: calc(32rem + 16px) !important;
	}

	#hero-slider .slide {
		align-items: flex-start;
	}

	#hero-slider .slide > .relative.z-10 {
		padding-top: 2rem;
		padding-bottom: 3.5rem;
	}

	#hero-slider .slide .mb-8 {
		margin-bottom: 1rem;
	}

	#hero-slider .slide .mb-10 {
		margin-bottom: 1.25rem;
	}

	#hero-slider .slide h2.mb-6 {
		margin-bottom: 1rem;
	}

	#hero-slider .font-display.text-5xl,
	#hero-slider h2.font-display {
		font-size: 1.875rem;
		line-height: 1.15;
	}
}

@media (min-width: 640px) and (max-width: 767px) {
	#hero-slider {
		min-height: calc(31rem + 16px) !important;
	}

	#hero-slider .slide {
		align-items: flex-start;
	}

	#hero-slider .slide > .relative.z-10 {
		padding-bottom: 3rem;
	}
}

/* Payment confirmed — see assets/css/payment-confirmed.css */

body.hanoi26-front-page .hanoi26-section-deals .hanoi26-on-trend-grid,
body.hanoi26-front-page .hanoi26-section-deals .hanoi26-home-products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 1rem !important;
}

@media (min-width: 768px) {
	body.hanoi26-front-page .hanoi26-section-deals .hanoi26-on-trend-grid,
	body.hanoi26-front-page .hanoi26-section-deals .hanoi26-home-products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 1.25rem !important;
	}
}

@media (min-width: 1024px) {
	body.hanoi26-front-page .hanoi26-section-deals .hanoi26-on-trend-grid,
	body.hanoi26-front-page .hanoi26-section-deals .hanoi26-home-products {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 1.5rem !important;
	}
}

@media (min-width: 1536px) {
	body.hanoi26-front-page .hanoi26-section-deals .hanoi26-on-trend-grid,
	body.hanoi26-front-page .hanoi26-section-deals .hanoi26-home-products {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}
}

body.hanoi26-front-page .hanoi26-product-grid:not(.hanoi26-shop-grid) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 1024px) {
	body.hanoi26-front-page .hanoi26-product-grid:not(.hanoi26-shop-grid) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 1600px) {
	body.hanoi26-front-page .hanoi26-product-grid:not(.hanoi26-shop-grid) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

[id].scroll-mt-24 {
	scroll-margin-top: var(--hanoi26-sticky-offset);
}