/* Site public Chị Ba Cầu Lông — phần custom bổ sung cho theme Falcon */

body
{
	padding-bottom: 70px;
}

.img-cover
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Chấm đỏ nhấp nháy LIVE */
.live-dot
{
	width: 9px;
	height: 9px;
	background: #fff;
	border-radius: 50%;
	display: inline-block;
	animation: nhay 1s infinite;
}
@keyframes nhay
{
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* Thanh cuộn danh mục */
.cat-scroll
{
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.cat-scroll::-webkit-scrollbar
{
	display: none;
}

/* Hero + banner live */
.hero
{
	background: linear-gradient(135deg, #064e3b, #0e9f6e 55%, #16a34a);
	color: #fff;
	padding: 36px 28px;
	position: relative;
	overflow: hidden;
}
.hero::after
{
	content: '🏸';
	position: absolute;
	right: 6px;
	bottom: -24px;
	font-size: 140px;
	opacity: 0.14;
	transform: rotate(-18deg);
	pointer-events: none;
}
.hero::before
{
	content: '';
	position: absolute;
	top: -60px;
	right: 120px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	pointer-events: none;
}
.hero-badge
{
	display: inline-block;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.4px;
	margin-bottom: 10px;
}
.hero h1
{
	font-size: 30px;
	margin-bottom: 6px;
}
.hero p
{
	opacity: 0.92;
	max-width: 560px;
}
@media (max-width: 640px)
{
	.hero
	{
		padding: 26px 18px;
	}
	.hero h1
	{
		font-size: 23px;
	}
	.hero::after
	{
		font-size: 100px;
	}
}
.live-banner
{
	background: linear-gradient(120deg, #7f1d1d, #e02424);
	color: #fff;
	padding: 18px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.live-banner::after
{
	content: '📺';
	position: absolute;
	right: 4px;
	bottom: -18px;
	font-size: 90px;
	opacity: 0.15;
	transform: rotate(-12deg);
	pointer-events: none;
}

/* Slider trang chủ */
.slider-box
{
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 1;
	background: #eef2f7;
}
@media (max-width: 640px)
{
	.slider-box
	{
		aspect-ratio: 2 / 1;
	}
}
.slider-item
{
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.6s;
	pointer-events: none;
}
.slider-item.active
{
	opacity: 1;
	pointer-events: auto;
}
.slider-item img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.slider-dots
{
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 7px;
	z-index: 2;
}
.slider-dots span
{
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background 0.2s, width 0.2s;
}
.slider-dots span.active
{
	background: #fff;
	width: 22px;
	border-radius: 999px;
}

/* Tiêu đề section có thanh nhấn */
.section-heading
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 26px 0 14px;
}
.section-heading .tieu-de
{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 800;
	margin: 0;
	color: #232e3c;
}
.section-heading .tieu-de::before
{
	content: '';
	width: 5px;
	height: 22px;
	border-radius: 3px;
	background: linear-gradient(180deg, #0e9f6e, #16a34a);
}
.section-heading a
{
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}

/* Empty state */
.empty-box
{
	border: 1.5px dashed #d8e2ef;
	border-radius: 14px;
	background: #fff;
	padding: 44px 16px;
	text-align: center;
	color: #748194;
}
.empty-box .icon
{
	font-size: 44px;
	margin-bottom: 8px;
}

/* Card sản phẩm */
.sp-card
{
	transition: box-shadow 0.18s, transform 0.18s;
}
.sp-card:hover
{
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}
.sp-card .ratio img
{
	transition: transform 0.3s;
}
.sp-card:hover .ratio img
{
	transform: scale(1.05);
}
.sp-ten a
{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 36px;
	text-decoration: none;
}
.badge-ton.het
{
	color: #9da9bb !important;
	background: transparent;
}

/* Toast thông báo */
.site-toast
{
	position: fixed;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	background: #00864e;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: 999px;
	z-index: 1200;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Trang chi tiết: thumbnail + chip chọn màu/size */
.thumb-list
{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.thumb
{
	width: 62px;
	height: 62px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	position: relative;
	background: #f5f7fa;
}
.thumb img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.thumb.active
{
	border-color: #2c7be5;
}
.thumb .thumb-mau
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 10px;
	text-align: center;
	padding: 1px 2px;
	white-space: nowrap;
	overflow: hidden;
}

.chon-nhom
{
	margin-bottom: 14px;
}
.chon-nhom .nhan
{
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
}
.chip-list
{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.chip
{
	padding: 7px 16px;
	border: 1.5px solid #d8e2ef;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.chip.active
{
	border-color: #2c7be5;
	color: #2c7be5;
	background: #eaf1fd;
}

/* Ô số lượng */
.qty-row
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.qty-box
{
	display: flex;
	align-items: center;
	border: 1.5px solid #d8e2ef;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.qty-box button
{
	width: 38px;
	height: 38px;
	border: none;
	background: #f5f7fa;
	font-size: 18px;
	cursor: pointer;
}
.qty-box input
{
	width: 52px;
	height: 38px;
	border: none;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
}

/* Thanh giỏ hàng nổi */
.cart-bar
{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1e2e50;
	color: #fff;
	z-index: 1050;
	cursor: pointer;
	box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.18);
}
.cart-bar-inner
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 54px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 16px;
}
.cart-bar-total
{
	font-size: 17px;
	font-weight: 800;
}
.cart-bar-btn
{
	background: #e02424;
	padding: 8px 16px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
	white-space: nowrap;
}

/* Modal custom (không cần JS bootstrap) */
.modal-overlay
{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 1100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
@media (min-width: 640px)
{
	.modal-overlay
	{
		align-items: center;
	}
}
.modal-box
{
	background: #fff;
	width: 100%;
	max-width: 520px;
	max-height: 92vh;
	overflow-y: auto;
	border-radius: 16px 16px 0 0;
}
@media (min-width: 640px)
{
	.modal-box
	{
		border-radius: 16px;
	}
}
.modal-head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #edf2f9;
	font-size: 16px;
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}
.modal-close
{
	border: none;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #748194;
}
.modal-body
{
	padding: 16px;
}

/* Modal chọn biến thể */
.bt-sp-row
{
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}
.bt-sp-row img, .bt-sp-row .khong-anh
{
	width: 74px;
	height: 74px;
	border-radius: 10px;
	object-fit: cover;
	background: #f5f7fa;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
}
.bt-ten
{
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
}
.bt-gia
{
	color: #e02424;
	font-weight: 800;
	font-size: 17px;
	margin-top: 4px;
}
.bt-ton
{
	font-size: 13px;
	color: #748194;
	margin-top: 2px;
}

/* Giỏ hàng */
.text-price
{
	color: #e02424;
	font-weight: 800;
}
.cart-item
{
	display: flex;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #edf2f9;
	align-items: center;
}
.cart-item img, .cart-item .khong-anh
{
	width: 54px;
	height: 54px;
	border-radius: 8px;
	object-fit: cover;
	background: #f5f7fa;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.cart-item-info
{
	flex: 1;
	min-width: 0;
}
.cart-item-ten
{
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
.cart-item-bien-the
{
	font-size: 12px;
	color: #748194;
}
.cart-item-gia
{
	font-size: 13px;
	color: #e02424;
	font-weight: 700;
}
.cart-item .qty-box button
{
	width: 30px;
	height: 30px;
	font-size: 15px;
}
.cart-item .qty-box input
{
	width: 38px;
	height: 30px;
	font-size: 14px;
}
.cart-item-xoa
{
	border: none;
	background: none;
	color: #748194;
	font-size: 18px;
	cursor: pointer;
	padding: 4px;
}
.cart-total-row
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	font-size: 16px;
}
.cart-total-row .text-price
{
	font-size: 20px;
}
.cart-trong
{
	text-align: center;
	color: #748194;
	padding: 24px 0;
}

/* Form đặt hàng */
.checkout-form h4
{
	margin: 6px 0 10px;
	font-size: 15px;
	font-weight: 700;
}
.checkout-form input
{
	width: 100%;
	border: 1.5px solid #d8e2ef;
	border-radius: 10px;
	padding: 11px 12px;
	font-size: 15px;
	margin-bottom: 9px;
}
.checkout-form input:focus
{
	outline: none;
	border-color: #2c7be5;
}
.form-err
{
	background: #fde8e8;
	color: #9b1c1c;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	margin-bottom: 9px;
}
.btn-order
{
	background: #e02424;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px 26px;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	width: 100%;
}
.btn-order:hover
{
	background: #c81e1e;
}
.btn-order:disabled
{
	background: #cbd5e1;
	cursor: not-allowed;
}
.order-note
{
	font-size: 12.5px;
	color: #748194;
	text-align: center;
	margin-top: 8px;
}

/* Modal thành công */
.success-icon
{
	font-size: 48px;
	margin-bottom: 8px;
}
.success-ma-don
{
	font-size: 30px;
	font-weight: 800;
	color: #0f9d76;
	letter-spacing: 2px;
	margin: 6px 0 10px;
}

/* Nội dung mô tả sản phẩm (HTML từ CKEditor) */
.noi-dung-mo-ta
{
	line-height: 1.65;
	overflow-wrap: break-word;
}
.noi-dung-mo-ta img
{
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 6px 0;
}
.noi-dung-mo-ta iframe
{
	max-width: 100%;
}
.noi-dung-mo-ta table
{
	max-width: 100%;
}
.noi-dung-mo-ta a
{
	color: #2c7be5;
	text-decoration: underline;
}

/* Card danh mục trang chủ */
.dm-card
{
	text-decoration: none;
	transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.dm-card:hover
{
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
	border-color: #0e9f6e !important;
}
.dm-icon
{
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: linear-gradient(135deg, #e6f7f1, #d1fae5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 auto 8px;
	overflow: hidden;
}
.dm-icon img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Header */
.header-hotline
{
	background: #e6f7f1;
	color: #057a55 !important;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.brand-icon
{
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, #0e9f6e, #16a34a);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
}