/* ==========================================================================
   dlb-single-product.css — CSS RIÊNG cho trang chi tiết sản phẩm WooCommerce
   (templates/single-product.html), thêm 2026-08-30 đối chiếu demo-ui/
   chai-xit-xa-vai-kho-layagi-perfume-100ml.html theo yêu cầu người dùng.

   CHỈ enqueue khi is_product() (xem functions.php) — không ảnh hưởng trang khác.
   Dùng LẠI đúng block LÕI của WooCommerce (product-image-gallery, add-to-cart-form,
   product-details...) — không viết lại logic gallery/biến thể/giỏ hàng, chỉ CSS.

   Bảng màu: xanh #006d4c · vàng hổ phách #fcb900 · chữ #111111 · chữ phụ #6b7280 ·
   viền #e5e7eb · nền phụ #f7faf9 — lấy đúng từ demo-ui/styles.css (đã đối chiếu khớp
   màu thật của header/footer site này).
   ========================================================================== */

.dlb-sp {
	--dlb-sp-green: #006d4c;
	--dlb-sp-green-dark: #00563c;
	--dlb-sp-amber: #fcb900;
	--dlb-sp-ink: #111111;
	--dlb-sp-muted: #6b7280;
	--dlb-sp-line: #e5e7eb;
	--dlb-sp-tint: #e8f1ed;
	--dlb-sp-surface: #f7faf9;
}

/* ---------- breadcrumbs ---------- */
.dlb-sp__breadcrumbs {
	font-size: 13px;
	color: var(--dlb-sp-muted);
	margin-bottom: 20px;
}
.dlb-sp__breadcrumbs a {
	color: var(--dlb-sp-muted);
}
.dlb-sp__breadcrumbs a:hover {
	color: var(--dlb-sp-green);
}

/* ---------- bố cục 2 cột trên cùng ---------- */
.dlb-sp__top {
	gap: 48px !important;
	margin-bottom: 56px !important;
}
@media (max-width: 782px) {
	.dlb-sp__top {
		gap: 24px !important;
	}
}

/* ---------- khung ảnh gallery — thêm thẻ/shadow, WooCommerce không có sẵn ---------- */
.dlb-sp__gallery-col .wp-block-woocommerce-product-image-gallery {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--dlb-sp-line);
	border-radius: 16px;
	padding: 10px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 24px rgba(17, 17, 17, .06);
}
.dlb-sp__gallery-col .woocommerce-product-gallery__image,
.dlb-sp__gallery-col .woocommerce-product-gallery__image img {
	border-radius: 10px;
}

/* Badge "Giảm giá!" (.onsale, do WooCommerce tự render, KHÔNG phải block riêng) — mặc
   định WooCommerce đặt position âm (top:-1px;left:-1px) NEO VÀO GÓC khung gallery, trên
   di động khung này sát mép màn hình nên bị cắt mất 1 phần (xác nhận qua Playwring khi
   khảo sát: "G" trong "Giảm giá!" bị cắt ở 390px). Đưa hẳn vào TRONG góc + đổi màu theo
   thương hiệu thay vì màu mặc định của WooCommerce. */
.dlb-sp__gallery-col span.onsale {
	/* !important bat buoc tren tung dong toa do -- xac nhan qua debug thuc te (2026-08-30):
	   co 1 rule CSS khac (rieng cho di dong, khong ro nguon) van thang "left" du "top" o
	   day da thang (cung 1 block, cung specificity) -- ep het toan bo toa do/kich thuoc
	   dung !important cho chac, khong con phu thuoc thu tu nap CSS. */
	position: absolute !important;
	top: 20px !important;
	left: 20px !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 3;
	margin: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--dlb-sp-amber);
	color: var(--dlb-sp-ink);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	box-shadow: 0 4px 12px rgba(17, 17, 17, .18);
}

/* ---------- cột thông tin ---------- */
.dlb-sp__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dlb-sp-green);
	margin-bottom: 10px;
}
.dlb-sp__eyebrow a {
	color: inherit;
}

.dlb-sp__title.wp-block-post-title {
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--dlb-sp-ink);
	margin: 0 0 14px;
}

.dlb-sp__rating {
	margin-bottom: 16px;
}
.dlb-sp__rating .star-rating {
	color: var(--dlb-sp-amber);
}
.dlb-sp__rating .star-rating span::before {
	color: var(--dlb-sp-amber);
}
.dlb-sp__rating .woocommerce-review-link {
	color: var(--dlb-sp-muted);
	font-size: 14px;
}

/* Khung giá — bo/nền nhạt nổi bật, WooCommerce mặc định chỉ ra 1 dòng số trần */
.dlb-sp__price {
	display: inline-block;
	background: var(--dlb-sp-tint);
	color: var(--dlb-sp-green) !important;
	padding: 16px 22px;
	border-radius: 12px;
	margin: 0 0 18px;
	font-weight: 800;
}
.dlb-sp__price,
.dlb-sp__price * {
	color: var(--dlb-sp-green) !important;
}
.dlb-sp__price del {
	color: var(--dlb-sp-muted) !important;
	opacity: 1;
	font-weight: 500;
	margin-right: 8px;
}

.dlb-sp__summary {
	color: var(--dlb-sp-muted);
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 20px;
}

/* ---------- form thêm giỏ hàng (block lõi WooCommerce, chỉ chỉnh CSS) ---------- */
.dlb-sp__add-to-cart .variations {
	margin-bottom: 18px;
}
.dlb-sp__add-to-cart .variations td.label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dlb-sp-ink);
	padding-bottom: 10px;
}
/* Nút swatch biến thể (plugin Woo Variation Swatches có sẵn, chỉ chỉnh màu viền/trạng
   thái chọn cho khớp thương hiệu — không đụng logic JS của plugin đó). Đổi sang dạng
   "pill" bo tròn hết cỡ (999px) + đệm rộng hơn — thêm 2026-09-04 đối chiếu đúng kiểu
   ".pill" trong demo-ui (trước đó bo góc nhẹ 8px, viền quá mảnh nên nhìn "trơn"/kém nổi
   bật so với demo, theo yêu cầu người dùng "chỉnh lại trang chi tiết sản phẩm cho đẹp
   hơn"). */
.dlb-sp__add-to-cart .variable-item.button-variable-item {
	border-radius: 999px !important;
	border: 1.5px solid var(--dlb-sp-line) !important;
	padding: 10px 20px !important;
	color: var(--dlb-sp-ink) !important;
	font-weight: 600;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.dlb-sp__add-to-cart .variable-item.button-variable-item:hover {
	border-color: var(--dlb-sp-green) !important;
}
.dlb-sp__add-to-cart .variable-item.button-variable-item.selected,
.dlb-sp__add-to-cart .variable-item.button-variable-item[aria-checked="true"] {
	border-color: var(--dlb-sp-green) !important;
	background: var(--dlb-sp-tint) !important;
	color: var(--dlb-sp-green) !important;
}

/* ---------- khối tin cậy (kiểm tra hàng/giao toàn quốc/chất lượng/hotline) ----------
   Thêm 2026-09-04, đối chiếu đúng khối ".pdp-trust" có sẵn trong demo-ui (trước đó
   template thật CHƯA có khối này) — dùng lại ĐÚNG NGUYÊN VĂN 4 lời cam kết đã xuất
   hiện thật trên site (topbar/5 icon tính năng ở Trang chủ: "Giao hàng nhanh chóng
   toàn quốc", "Kiểm tra trước khi nhận hàng", "Đảm bảo chất lượng"...) — không tự
   bịa thêm chính sách mới (vd "đổi trả 7 ngày" trong demo KHÔNG dùng vì chưa xác
   nhận đây có phải chính sách thật của shop hay không). */
.dlb-sp__trust {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--dlb-sp-line);
}
.dlb-sp__trust-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.dlb-sp__trust-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--dlb-sp-ink);
}
.dlb-sp__trust-list a {
	color: var(--dlb-sp-green);
	font-weight: 700;
	text-decoration: none;
}
/* Phòng đúng lỗi đã gặp nhiều lần trong phiên này (theme.json tự thêm gạch chân
   ":hover" cho MỌI thẻ <a>, thắng độ đặc hiệu rule "text-decoration:none" thường —
   xem giải thích đầy đủ ở "dlb-main-menu-rz84.css" vòng 81) — link số hotline ở đây
   cũng là thẻ <a> thật, chặn trước thay vì đợi người dùng báo lại lần nữa. */
.dlb-sp__trust-list a:hover,
.dlb-sp__trust-list a:focus,
.dlb-sp__trust-list a:active {
	text-decoration: none;
}
.dlb-sp__trust-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--dlb-sp-tint);
	color: var(--dlb-sp-green);
}

.dlb-sp__add-to-cart .quantity .qty,
.dlb-sp__add-to-cart .quantity input[type="number"] {
	height: 48px;
	width: 64px;
	border: 1px solid var(--dlb-sp-line);
	border-radius: 8px;
	text-align: center;
	font-size: 15px;
}
.dlb-sp__add-to-cart .single_add_to_cart_button,
.dlb-sp__add-to-cart button[type="submit"] {
	background: var(--dlb-sp-amber) !important;
	color: var(--dlb-sp-ink) !important;
	border: none !important;
	border-radius: 8px !important;
	height: 48px;
	padding: 0 32px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	transition: background .15s ease;
}
.dlb-sp__add-to-cart .single_add_to_cart_button:hover,
.dlb-sp__add-to-cart button[type="submit"]:hover {
	background: #e0a400 !important;
}
.dlb-sp__add-to-cart .single_add_to_cart_button:disabled {
	opacity: .5;
}

/* Giá/trạng thái biến thể đang chọn (single_variation_wrap) — dùng lại đúng khung giá ở trên */
.dlb-sp__add-to-cart .woocommerce-variation-price .price {
	color: var(--dlb-sp-green);
	font-weight: 800;
}
.dlb-sp__add-to-cart .woocommerce-variation-availability {
	font-size: 13px;
	color: var(--dlb-sp-muted);
	margin-top: 6px;
}

/* ---------- meta (SKU/danh mục/thẻ) ---------- */
.dlb-sp__meta {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--dlb-sp-line);
	font-size: 13px;
	color: var(--dlb-sp-muted);
}
.dlb-sp__meta a {
	color: var(--dlb-sp-green);
	text-decoration: none;
}
.dlb-sp__meta a:hover {
	text-decoration: underline;
}

/* ---------- tabs Mô tả/Thông tin bổ sung/Đánh giá ---------- */
.dlb-sp__details.wp-block-woocommerce-product-details {
	margin-top: 8px;
}
.dlb-sp__details ul.tabs.wc-tabs li {
	border: none;
	background: none;
}
.dlb-sp__details ul.tabs.wc-tabs li a {
	color: var(--dlb-sp-muted);
	font-weight: 600;
	padding: 12px 4px;
	margin-right: 28px;
	border-bottom: 2px solid transparent;
}
.dlb-sp__details ul.tabs.wc-tabs li.active a {
	color: var(--dlb-sp-green);
	border-bottom-color: var(--dlb-sp-green);
}
.dlb-sp__details .woocommerce-Tabs-panel {
	padding-top: 24px;
	color: var(--dlb-sp-ink);
	line-height: 1.8;
}
.dlb-sp__details .woocommerce-Tabs-panel p {
	margin: 0 0 14px;
}

/* ---------- sản phẩm liên quan — khớp đúng card trắng của dlb-item-grid-di90 (2026-08-30) ---------- */
.dlb-sp__related {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--dlb-sp-line);
}
.dlb-sp__related .wp-block-woocommerce-product-collection > h2,
.dlb-sp__related h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--dlb-sp-ink);
	margin-bottom: 24px;
}
.dlb-sp__related li.product {
	background: #ffffff;
	border: 1px solid var(--dlb-sp-line);
	border-radius: 12px;
	padding: 14px !important;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.dlb-sp__related li.product:hover {
	box-shadow: 0 10px 30px rgba(17, 17, 17, .10);
	border-color: #d8dedb;
	transform: translateY(-4px);
}
.dlb-sp__related li.product img {
	border-radius: 8px;
}
.dlb-sp__related li.product .wp-block-woocommerce-product-title,
.dlb-sp__related li.product h3,
.dlb-sp__related li.product h3 a {
	color: var(--dlb-sp-ink) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.dlb-sp__related li.product h3 a:hover {
	color: var(--dlb-sp-green) !important;
}
.dlb-sp__related li.product .price {
	color: var(--dlb-sp-ink) !important;
}
.dlb-sp__related li.product .wp-block-button__link,
.dlb-sp__related li.product a.button {
	background: var(--dlb-sp-green) !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
}
.dlb-sp__related li.product .wp-block-button__link:hover,
.dlb-sp__related li.product a.button:hover {
	background: var(--dlb-sp-green-dark) !important;
}

/* ---------- di động ---------- */
@media (max-width: 600px) {
	.dlb-sp__gallery-col .wp-block-woocommerce-product-image-gallery {
		padding: 8px;
		border-radius: 12px;
	}
	.dlb-sp__price {
		display: block;
		padding: 14px 16px;
		/* LỖI THẬT phát hiện 2026-09-02 (người dùng báo qua ảnh: giá bị nút liên hệ
		   nhanh/giỏ hàng nổi — position:fixed góc phải dưới — đè lên, chữ giá cuối
		   dòng bị che khuất mất). Dải giá "display:block" tự nở full-width sát mép
		   phải màn hình, đúng ngay tầm nút nổi (fixed, luôn đứng yên 1 chỗ trên màn
		   hình bất kể cuộn tới đâu) khi trang cuộn tới đúng vị trí này. Chừa hẳn
		   margin phải đủ rộng (nút nổi rộng 53px + right:20px + dư an toàn) để dải
		   giá không bao giờ chạm vùng nút, dù cuộn tới đâu. */
		margin-right: 90px;
	}
	.dlb-sp__title.wp-block-post-title {
		font-size: 22px;
	}
}