/* Trang chủ GEMMI: Flash Sale, 4 ưu đãi, vé giảm giá. Màu theo màu chính của theme. */
:root {
	--gm-brand: #a50e43;
	--gm-brand-light: #d4245f;
	--gm-brand-dark: #7a0931;
	--gm-tint: #fbeef3;
	--gm-line: #f0d3de;
	--gm-bg: #fff; /* phải trùng màu nền trang để khuyết vé hiển thị đúng */
}

/* ---------- Khoảng cách trang chủ ---------- */
/* Các hàng [row class="gm-row"] bỏ lề trên 30px mặc định, khoảng cách do padding cột quyết định. */
.row.gm-row {
	margin-top: 0 !important;
}
/* Footer sát nội dung hơn: bỏ lề 50px + dải trắng 30px có kẻ viền ở đầu footer. */
.home footer#footer {
	margin-top: 10px;
	padding-top: 0;
	border-top: 0;
}

/* ---------- Flash Sale ---------- */
.gm-flash {
	border: 1px solid var(--gm-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--gm-bg);
}
.gm-flash__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 18px;
	background: linear-gradient(90deg, var(--gm-brand-dark), var(--gm-brand) 45%, var(--gm-brand-light));
	color: #fff;
}
.gm-flash__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 22px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .5px;
}
.gm-flash__title svg {
	width: 22px;
	height: 22px;
	fill: #ffd54a;
}
.gm-flash__timer {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
}
.gm-flash__label {
	margin-right: 4px;
	opacity: .9;
}
.gm-flash__timer b {
	min-width: 30px;
	padding: 3px 0;
	border-radius: 5px;
	background: #fff;
	color: var(--gm-brand);
	font-size: 15px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.gm-flash__timer i {
	font-style: normal;
	font-weight: 700;
}
.gm-flash__all {
	margin-left: auto;
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
}
.gm-flash__all:hover {
	color: #fff;
	text-decoration: underline;
}
.gm-flash__body {
	padding: 18px 18px 0;
}
.gm-flash__body .row {
	margin-left: -8px !important;
	margin-right: -8px !important;
}

/* ---------- 4 ưu đãi ---------- */
.gm-policies {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 0;
}
.col-inner:has(> .gm-policies) {
	padding-top: 6px !important;
}
.col-inner:has(> .gm-policies) > :not(.gm-policies) {
	display: none;
}
.gm-policy {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 20px;
}
.gm-policy + .gm-policy {
	border-left: 1px solid var(--gm-line);
}
.gm-policy__icon {
	flex: 0 0 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--gm-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
.gm-policy__icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: var(--gm-brand);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gm-policy__text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.gm-policy__text strong {
	color: #2b0a16;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
}
.gm-policy__text span {
	color: #555;
	font-size: 13px;
}
.gm-policy__phone {
	margin-left: 4px;
	color: var(--gm-brand);
	font-size: inherit;
	font-weight: 800;
	white-space: nowrap;
}

/* Hàng ưu đãi ngay trên footer (các trang trừ trang chủ) */
.gm-footer-policies {
	margin-top: 10px;
	padding: 12px 0;
	border-top: 1px solid #eee;
}

/* ---------- Vé giảm giá ---------- */
.gm-coupons {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 250px));
	justify-content: center;
	gap: 22px;
	padding: 6px 0;
}
.gm-coupon {
	--split: 60%;
	position: relative;
	display: flex;
	height: 96px;
	border-radius: 8px;
	color: #fff;
	background: linear-gradient(160deg, var(--gm-brand-light), var(--gm-brand) 55%, var(--gm-brand-dark));
	box-shadow: 0 4px 12px rgba(165, 14, 67, .18);
}
/* Mép răng cưa hai bên */
.gm-coupon::before,
.gm-coupon::after {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 6px;
	width: 6px;
	background: radial-gradient(circle at 0 50%, var(--gm-bg) 2.6px, transparent 3px) 0 0 / 6px 9px repeat-y;
}
.gm-coupon::before {
	left: 0;
}
.gm-coupon::after {
	right: 0;
	transform: scaleX(-1);
}
.gm-coupon__main {
	position: relative;
	flex: 0 0 var(--split);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-right: 1px dashed rgba(255, 255, 255, .55);
	line-height: 1;
}
/* Hai khuyết tròn trên/dưới đường cắt */
.gm-coupon__main::before,
.gm-coupon__main::after {
	content: "";
	position: absolute;
	right: -7px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--gm-bg);
}
.gm-coupon__main::before {
	top: -7px;
}
.gm-coupon__main::after {
	bottom: -7px;
}
.gm-coupon__label {
	font-size: 13px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .5px;
	opacity: .95;
}
.gm-coupon__amount {
	margin-top: 4px;
	font-size: 34px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: -1px;
}
.gm-coupon__side {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding-right: 6px;
}
.gm-coupon__badge {
	padding: 2px 7px;
	border-radius: 3px;
	background: #fff;
	color: var(--gm-brand);
	font-size: 10px;
	font-weight: 800;
	white-space: nowrap;
}
.gm-coupon__min {
	font-size: 17px;
	font-weight: 900;
	font-style: italic;
	line-height: 1;
}
.gm-coupon__copy {
	position: relative;
	margin: 0;
	padding: 2px;
	min-height: 0;
	border: 0;
	background: none;
	color: #fff;
	line-height: 0;
	cursor: pointer;
}
.gm-coupon__copy svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}
.gm-coupon__copy.is-copied::after {
	content: "Đã sao chép";
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 7px;
	border-radius: 4px;
	background: #222;
	color: #fff;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
}
.gm-coupon__out {
	font-size: 11px;
	opacity: .85;
}
.gm-coupon.is-out {
	filter: grayscale(.8);
	opacity: .6;
}

/* ---------- Từng danh mục ---------- */
.gm-catsec + .gm-catsec {
	margin-top: 8px;
}
/* Bớt khoảng trắng dưới thẻ sản phẩm (mặc định 30px) cho các khu vực gần nhau hơn khi lướt. */
.gm-catsec .product-small.col,
.gm-flash .product-small.col {
	padding-bottom: 12px !important; /* thắng padding 19.6px của slider Flatsome */
}
@media (max-width: 549px) {
	.gm-catsec .product-small.col,
	.gm-flash .product-small.col {
		padding-bottom: 0 !important;
	}
	.gm-catsec + .gm-catsec {
		margin-top: 0;
	}
	.gm-catsec__head {
		margin-bottom: 6px;
		padding-bottom: 4px;
	}
	.gm-catsec__head h3 {
		font-size: 17px;
	}
	/* Khung hình đầu tiên: ảnh bìa phủ gần hết màn hình, chừa ~40px cho dải ưu đãi lấp ló.
	 * Chiều cao --gm-hero-h tính 1 lần khi mở trang (inc/gemmi-home.php) rồi khóa lại: thanh địa chỉ điện thoại
	 * co / giãn khi lướt không làm ảnh (và slider) đổi cỡ theo nữa. */
	.home .slider-wrapper.show-for-small .slider .img-inner,
	.home .slider-wrapper.show-for-small .slider .img-inner img,
	.home .slider-wrapper.show-for-small .flickity-viewport {
		height: var(--gm-hero-h, 560px) !important;
	}
	.home .slider-wrapper.show-for-small .flickity-viewport {
		transition: none !important;
	}
	.home .slider-wrapper.show-for-small .slider .img-inner {
		padding-top: 0 !important;
	}
	.home .slider-wrapper.show-for-small .slider .img-inner img {
		position: static;
		width: 100%;
		object-fit: cover;
		object-position: center top;
	}
}
.gm-catsec .box-text-products,
.gm-flash .box-text-products {
	padding-bottom: 0;
}
.gm-catsec .row,
.gm-flash .row {
	margin-bottom: 0 !important;
}
.gm-catsec__banner {
	display: block;
	margin-bottom: 18px;
	overflow: hidden;
	border-radius: 10px;
}
.gm-catsec__banner img {
	display: block;
	width: 100%;
}
.gm-catsec__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #eee;
}
.gm-catsec__head h3 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
}
.gm-catsec__head h3 a {
	position: relative;
	color: #222;
}
.gm-catsec__head h3 a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -9px;
	width: 100%;
	height: 2px;
	background: var(--gm-brand);
}
.gm-catsec__head h3 span {
	color: var(--gm-brand);
}
.gm-catsec__more {
	color: #777;
	font-size: 13px;
	white-space: nowrap;
}
.gm-catsec__more:hover {
	color: var(--gm-brand);
}

/* ---------- Tablet / điện thoại ---------- */
@media (max-width: 849px) {
	/* Dòng 1: ⚡ FLASH SALE · đồng hồ. Dưới: "Xem thêm ›" chữ nhỏ, canh phải. */
	.gm-flash__head {
		flex-wrap: wrap;
		gap: 2px 8px;
		padding: 10px 12px 6px;
	}
	.gm-flash__title {
		flex: none;
		gap: 4px;
		font-size: 20px;
		letter-spacing: .2px;
		white-space: nowrap;
	}
	.gm-flash__title svg {
		width: 20px;
		height: 20px;
	}
	.gm-flash__label {
		display: none;
	}
	.gm-flash__timer {
		flex: none;
		gap: 3px;
		margin-left: auto;
	}
	.gm-flash__timer b {
		min-width: 0;
		padding: 1px 4px;
		border-radius: 4px;
		font-size: 16px;
		line-height: 1.3;
	}
	.gm-flash__all {
		flex-basis: 100%;
		font-size: 11.5px;
		line-height: 1.4;
		text-align: right;
		opacity: .9;
	}
	.gm-flash__body {
		padding: 12px 10px 0;
	}
	.gm-policies {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px 0;
	}
	.gm-policy {
		min-width: 0;
		padding: 2px;
		gap: 6px;
	}
	.gm-policy + .gm-policy {
		border-left: 0;
	}
	.gm-policy__icon {
		flex-basis: 28px;
		height: 28px;
	}
	.gm-policy__icon svg {
		width: 16px;
		height: 16px;
	}
	.gm-policy__text {
		min-width: 0;
	}
	/* Tiêu đề 1 dòng, mô tả tối đa 2 dòng */
	.gm-policy__text strong {
		overflow: hidden;
		font-size: 11px;
		letter-spacing: -.1px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.gm-policy__text span {
		display: -webkit-box;
		overflow: hidden;
		min-height: 2.7em; /* luôn đủ chỗ 2 dòng: 4 ô cao bằng nhau */
		font-size: 11px;
		line-height: 1.35;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.gm-policy__phone {
		margin-left: 2px;
	}
	.gm-coupons {
		display: flex;
		justify-content: flex-start;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 8px 2px 10px;
	}
	.gm-coupon {
		flex: 0 0 210px;
		height: 84px;
		scroll-snap-align: start;
	}
	.gm-coupon__amount {
		font-size: 28px;
	}
	.gm-catsec + .gm-catsec {
		margin-top: 18px;
	}
	.gm-catsec__head h3 {
		font-size: 16px;
	}
}