/* ============================================================
   Sản phẩm — Danh mục sản phẩm (taxonomy-danh-muc-san-pham.php)
   + Chi tiết sản phẩm (single-products.php)
   Nguồn: Figma "TÂN Á Đại Thành" › Danh mục sản phẩm (4261:281, 4261:2)
                                   › Chi tiết sản phẩm (4261:591)
   Khung gốc 1920px · vùng nội dung 1542px (gutter 9.84375vw) — giống trang chủ / giới thiệu
   Màu: #1854b5 (xanh chính) · #01a0e2 (cyan) · #e9f2ff (nền nhạt) · #e0e0e0 (viền thẻ)
   Bố cục dùng flex/grid; chỉ 4 thẻ kính trên banner được đặt toạ độ (rải tự do trên ảnh).
   Co giãn: kích thước dùng clamp() theo vw, thêm mốc 1450 / 1200 / 900 / 640 / 380px.
   ============================================================ */

.dnm-prd-page {
	--prd-gutter: max(9.84375vw, calc((100vw - 1542px) / 2));
	--prd-blue: #1854b5;
	--prd-cyan: #01a0e2;
	--prd-soft: #e9f2ff;
	--prd-grad: linear-gradient(260.42deg, #1854b5 11.806%, #1284d2 65.339%, #09cfff 107.21%);
	font-family: 'Wix Madefor Display', 'Segoe UI', Roboto, Arial, sans-serif;
	color: #000;
	background: #fff;
}

.dnm-prd-page *,
.dnm-prd-page *::before,
.dnm-prd-page *::after {
	box-sizing: border-box;
}

.dnm-prd-page a {
	text-decoration: none;
}

/* Văn bản chỉ dành cho trình đọc màn hình (icon mở menu con của header) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Nút gradient dùng chung (Xem chi tiết / Liên hệ mua hàng) */
.dnm-prd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 146px;
	height: 39px;
	padding: 0 24px;
	border-radius: 38px;
	background: var(--prd-grad);
	font-size: 18px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.54px;
	white-space: nowrap;
	color: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.dnm-prd-btn:hover,
.dnm-prd-btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(24, 84, 181, 0.35);
	filter: brightness(1.1);
	color: #fff;
}

.dnm-prd-btn:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(24, 84, 181, 0.3);
}

/* ------------------------------------------------------------
   1. HERO (banner xanh + 4 thẻ kính ưu điểm)
   Khung 1920 × 991 — toạ độ thẻ tính theo --px (= 1px của khung 1920)
   Các lớp (ảnh / lớp phủ / nội dung) xếp chồng bằng grid, không dùng absolute.
   ------------------------------------------------------------ */
.dnm-prd-hero {
	display: grid;
	overflow: hidden;
	background: #3842d8;
}

.dnm-prd-hero > * {
	grid-area: 1 / 1;
	min-width: 0;
}

.dnm-prd-hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.dnm-prd-hero__shade {
	background: linear-gradient(41.457deg, rgb(56, 66, 216) 15.42%, rgba(30, 35, 114, 0) 75.363%);
}

.dnm-prd-hero__stage {
	display: grid;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	aspect-ratio: 1920 / 991;
	container-type: inline-size;
}

.dnm-prd-hero__stage > * {
	grid-area: 1 / 1;
	min-width: 0;
}

.dnm-prd-hero__title {
	--px: calc(100cqw / 1920);
	align-self: end;
	margin: 0 0 calc(83 * var(--px)) calc(188 * var(--px));
	padding-left: calc(36 * var(--px));
	background: linear-gradient(#d9d9d9, #d9d9d9) no-repeat 0 calc(14 * var(--px)) / 4px calc(125 * var(--px));
	font-size: max(30px, calc(64 * var(--px)));
	font-weight: 700;
	line-height: 1.125;
	letter-spacing: 0.02em;
	color: #fff;
}

.dnm-prd-hero__title span {
	display: block;
}

.dnm-prd-hero__title span + span {
	margin-top: calc(7 * var(--px));
}

/* Thẻ kính: vỏ ngoài (kính mờ) đặt theo toạ độ; ruột (gradient) là flex icon + chữ */
.dnm-prd-badges {
	--px: calc(100cqw / 1920);
	position: relative;
	pointer-events: none;
}

.dnm-prd-badge {
	position: absolute;
	left: calc(var(--x) * var(--px));
	top: calc((var(--y) + 3) * var(--px));
	display: flex;
	width: calc(var(--w) * var(--px));
	height: calc(105 * var(--px));
	padding: calc(10 * var(--px)) calc(12 * var(--px));
	border-radius: calc(60 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)) calc(60 * var(--px));
	background: rgba(217, 217, 217, 0.2);
	box-shadow: 0 calc(17 * var(--px)) calc(50.9 * var(--px)) calc(15 * var(--px)) rgba(0, 0, 0, 0.25);
	color: #f7f0e6;
}

/* hai vệt sáng trang trí ở mép trên / dưới */
.dnm-prd-badge::before,
.dnm-prd-badge::after {
	content: "";
	position: absolute;
	width: calc(161 * var(--px));
	height: calc(7 * var(--px));
	background: url(../demo-images/products/glow.svg) center / 100% 100% no-repeat;
}

.dnm-prd-badge::before {
	top: calc(-3 * var(--px));
	left: calc(38 * var(--px));
}

.dnm-prd-badge::after {
	bottom: calc(-3 * var(--px));
	right: calc(6 * var(--px));
}

.dnm-prd-badge__body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: calc(17 * var(--px));
	min-width: 0;
	padding-left: calc(14 * var(--px));
	border: 1px solid #fff;
	border-radius: calc(45 * var(--px)) calc(14 * var(--px)) calc(14 * var(--px)) calc(45 * var(--px));
	background: linear-gradient(180deg, #2d9aff 9.412%, #1854b5 60.588%, #001a6e 111.77%);
}

.dnm-prd-badge__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: calc(60 * var(--px));
	height: calc(60 * var(--px));
	border-radius: 50%;
	background: #f8f0e8;
}

.dnm-prd-badge__icon img {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(46 * var(--px));
	max-height: calc(46 * var(--px));
}

.dnm-prd-badge__text {
	margin: 0;
	padding-top: calc(3 * var(--px));
	font-size: max(11px, calc(20 * var(--px)));
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

/* biến thể icon bên phải: đảo chiều, chữ căn phải */
.dnm-prd-badge--right {
	border-radius: calc(16 * var(--px)) calc(60 * var(--px)) calc(60 * var(--px)) calc(16 * var(--px));
}

.dnm-prd-badge--right::before {
	left: auto;
	right: calc(38 * var(--px));
}

.dnm-prd-badge--right::after {
	right: auto;
	left: calc(6 * var(--px));
}

.dnm-prd-badge--right .dnm-prd-badge__body {
	flex-direction: row-reverse;
	padding-left: 0;
	padding-right: calc(14 * var(--px));
	border-radius: calc(14 * var(--px)) calc(45 * var(--px)) calc(45 * var(--px)) calc(14 * var(--px));
	text-align: right;
}

/* ------------------------------------------------------------
   2. GIỚI THIỆU + TAB DANH MỤC
   ------------------------------------------------------------ */
.dnm-prd-intro {
	padding: clamp(36px, 3vw, 58px) var(--prd-gutter) 0;
	text-align: center;
}

.dnm-prd-intro__title {
	margin: 0;
	font-size: clamp(30px, 2.5vw, 48px);
	font-weight: 700;
	line-height: 1.31;
	letter-spacing: 0.02em;
	text-transform: capitalize;
	color: var(--prd-blue);
}

.dnm-prd-intro__desc {
	max-width: 1383px;
	margin: 20px auto 0;
	font-size: clamp(16px, 1.04vw, 20px);
	line-height: 1.36;
	letter-spacing: 0.03em;
	color: #000;
}

.dnm-prd-intro__desc p {
	margin: 0;
}

.dnm-prd-tabs {
	display: flex;
	        flex-wrap: wrap;
        justify-content: center;
	gap: 5px;
	max-width: 1542px;
	margin: clamp(48px, 5.2vw, 99px) auto 0;
	padding: 0;
	list-style: none;
}

.dnm-prd-tabs li {
	margin: 0;
	flex: 0 1 auto;
}

.dnm-prd-tabs a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(42px, 2.66vw, 51px);
	padding: 0 clamp(14px, 1.15vw, 22px);
	border: 1px solid var(--prd-soft);
	border-radius: 26px;
	background: #fff;
	font-size: clamp(15px, 1.04vw, 20px);
	line-height: 1.75;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--prd-blue);
	transition: background-color 0.2s;
}

.dnm-prd-tabs a:hover {
	background: var(--prd-soft);
}

.dnm-prd-tabs .is-active a {
	background: var(--prd-soft);
	font-weight: 700;
}

/* ------------------------------------------------------------
   3. LƯỚI SẢN PHẨM 4 CỘT + THẺ SẢN PHẨM
   Thẻ cao theo nội dung, các thẻ cùng hàng bằng nhau; nút nằm trong luồng, căn giữa.
   ------------------------------------------------------------ */
.dnm-prd-list {
	padding: clamp(36px, 4.3vw, 82px) var(--prd-gutter) 0;
}

.dnm-prd-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.8vw, 54px) clamp(16px, 2.13vw, 41px);
	max-width: 1542px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.dnm-prd-grid > li {
	display: flex;
	margin: 0;
	min-width: 0;
}

.dnm-prd-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: clamp(24px, 2.3vw, 44px) clamp(14px, 1.04vw, 20px) clamp(22px, 1.6vw, 30px);
	border: 1px solid #e0e0e0;
	border-radius: clamp(22px, 1.67vw, 32px);
	background: #fff;
	text-align: center;
	color: inherit;
	transition: box-shadow 0.3s, border-color 0.3s;
}

.dnm-prd-card:hover,
.dnm-prd-card:focus-within {
	border-color: transparent;
	box-shadow: 0 0 58.9px 22px rgba(0, 95, 255, 0.12);
}

.dnm-prd-card__media {
	display: block;
	flex: none;
	width: 100%;
}

.dnm-prd-card__media {
	overflow: hidden;
}

.dnm-prd-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.6s ease;
}

/* hover thẻ: ảnh sản phẩm zoom nhẹ */
.dnm-prd-card:hover .dnm-prd-card__media img,
.dnm-prd-card:focus-within .dnm-prd-card__media img {
	transform: scale(1.08);
}

/* ảnh vuông (đá, vật liệu rời): tối đa 238 × 238, bo 26 */
.dnm-prd-card--square .dnm-prd-card__media {
	width: min(238px, 100%);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 26px;
}

.dnm-prd-card--square .dnm-prd-card__media img {
	object-fit: cover;
	object-position: 50% 25%;
}

/* ảnh đứng (bao xi măng…): cao tối đa 212, giữ nguyên tỉ lệ */
.dnm-prd-card--portrait .dnm-prd-card__media {
	height: clamp(150px, 11vw, 212px);
}

.dnm-prd-card__body {
	flex: 1;
	width: 100%;
	margin-top: clamp(20px, 2.08vw, 40px);
}

.dnm-prd-card__title {
	margin: 0;
	font-size: clamp(16px, 1.04vw, 20px);
	font-weight: 700;
	line-height: 1.35;
	text-wrap: balance;
	color: var(--prd-blue);
}

.dnm-prd-card--portrait .dnm-prd-card__title {
	font-size: clamp(15px, 0.94vw, 18px);
}

.dnm-prd-card__title a {
	color: inherit;
}

.dnm-prd-card__desc {
	margin: 10px 0 0;
	font-size: clamp(14px, 0.83vw, 16px);
	line-height: 1.4;
	letter-spacing: 0.06em;
	color: #000;
}

.dnm-prd-card--square .dnm-prd-card__desc {
	max-width: 278px;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(14px, 0.94vw, 18px);
	letter-spacing: 0.06em;
	line-height: 1.5;
}

.dnm-prd-card__more {
	margin-top: 20px;
}

.dnm-prd-empty {
	max-width: 1542px;
	margin: 0 auto;
	padding: 60px 0 40px;
	text-align: center;
	font-size: 20px;
	color: var(--prd-blue);
}

/* ------------------------------------------------------------
   4. PHÂN TRANG 1 2 3 4
   ------------------------------------------------------------ */
.dnm-prd-pagination {
	min-height: 56px;
	margin: clamp(40px, 4.6vw, 88px) auto 0;
}

.dnm-prd-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dnm-prd-pagination li {
	margin: 0;
}

.dnm-prd-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 56px;
	padding: 0 12px;
	border: 1px solid var(--prd-blue);
	border-radius: 50%;
	background: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	color: var(--prd-blue);
	transition: background-color 0.2s, color 0.2s;
}

.dnm-prd-pagination a.page-numbers:hover {
	background: var(--prd-soft);
}

.dnm-prd-pagination .page-numbers.current {
	border-color: transparent;
	background: var(--prd-blue);
	color: #fff;
}

.dnm-prd-pagination .page-numbers.dots {
	min-width: 0;
	border-color: transparent;
	background: transparent;
}

/* khoảng đệm trước footer (Figma: ~120px từ phân trang / mũi tên tới footer) */
.dnm-prd-end {
	height: clamp(30px, 3.9vw, 75px);
}

.dnm-prd-page--single .dnm-prd-end {
	height: clamp(24px, 2.8vw, 53px);
}

/* ------------------------------------------------------------
   5. CHI TIẾT SẢN PHẨM
   ------------------------------------------------------------ */
.dnm-prd-single {
	padding: clamp(120px, 9.2vw, 176px) var(--prd-gutter) 0;
}

.dnm-prd-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1542px;
	margin: 0 auto;
	padding: 0 2px;
	list-style: none;
	font-size: clamp(14px, 0.94vw, 18px);
	line-height: 1.95;
	letter-spacing: 0.02em;
	color: #8e8e8e;
}

.dnm-prd-crumb li {
	margin: 0;
}

.dnm-prd-crumb li + li::before {
	content: "|";
	margin: 0 12px;
	color: #8e8e8e;
}

.dnm-prd-crumb a {
	color: #8e8e8e;
}

.dnm-prd-crumb a:hover {
	color: var(--prd-blue);
}

.dnm-prd-crumb li:last-child,
.dnm-prd-crumb li:last-child a {
	color: var(--prd-blue);
}

/* ảnh 510 | thông tin 772 — tỉ lệ giữ như Figma, co giãn theo màn */
.dnm-prd-top {
	display: grid;
	grid-template-columns: minmax(0, 510fr) minmax(0, 772fr);
	column-gap: clamp(32px, 8.2vw, 157px);
	align-items: start;
	max-width: 1542px;
	margin: clamp(32px, 5.3vw, 101px) auto 0;
	padding: 0 12px 0 clamp(0px, 4.74vw, 91px);
}

/* ảnh + nhãn tên sản phẩm xếp chồng bằng grid */
.dnm-prd-top__media {
	display: grid;
	width: 100%;
	overflow: hidden;
	border-radius: clamp(24px, 1.9vw, 36px);
	background: var(--prd-soft);
}

.dnm-prd-top__media > * {
	grid-area: 1 / 1;
}

.dnm-prd-top__media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}

/* hover ảnh chi tiết: zoom trong khung (nhãn tên ảnh đứng yên) */
.dnm-prd-top__media:hover img {
	transform: scale(1.07);
}

.dnm-prd-top__caption {
	align-self: end;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin: 0 clamp(8px, 0.63vw, 12px) clamp(12px, 1.15vw, 22px);
	padding: 4px 16px;
	border-radius: 38px;
	background: #fff;
	font-size: clamp(15px, 1.04vw, 20px);
	font-weight: 700;
	line-height: 1.36;
	letter-spacing: 0.03em;
	text-align: center;
	color: var(--prd-blue);
}

.dnm-prd-top__title {
	margin: 0;
	font-size: clamp(26px, 2.08vw, 40px);
	font-weight: 700;
	line-height: 1.36;
	letter-spacing: 0.015em;
	color: var(--prd-blue);
}

.dnm-prd-top__heading {
	margin: clamp(10px, 1.15vw, 22px) 0 0;
	font-size: clamp(19px, 1.25vw, 24px);
	font-weight: 700;
	line-height: 2;
	color: #000;
}

.dnm-prd-top__specs {
	font-size: clamp(14px, 0.83vw, 16px);
	line-height: 1.36;
	letter-spacing: 0.03em;
	color: #000;
}

.dnm-prd-top__specs.dnm-prd-rich li {
	margin-bottom: 13px;
}

.dnm-prd-top__btn {
	min-width: 209px;
	height: 49px;
	margin-top: 26px;
}

.dnm-prd-detail {
	max-width: 1542px;
	margin: clamp(48px, 5.2vw, 100px) auto 0;
}

.dnm-prd-detail__title {
	margin: 0 0 24px;
	padding-left: clamp(0px, 4.74vw, 91px);
	font-size: clamp(26px, 2.08vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--prd-blue);
}

.dnm-prd-detail__box {
	min-height: 200px;
	padding: clamp(24px, 2.6vw, 50px) clamp(18px, 2.13vw, 41px);
	border-radius: clamp(22px, 1.67vw, 32px);
	background: var(--prd-soft);
}

/* Nội dung soạn bằng trình soạn thảo (the_content / SCF wysiwyg) */
.dnm-prd-rich {
	font-size: clamp(14px, 0.83vw, 16px);
	line-height: 1.36;
	letter-spacing: 0.03em;
	color: #000;
	overflow-wrap: break-word;
}

.dnm-prd-rich > :first-child {
	margin-top: 0;
}

.dnm-prd-rich > :last-child {
	margin-bottom: 0;
}

.dnm-prd-rich p {
	margin: 0;
}

.dnm-prd-rich ul + p,
.dnm-prd-rich ol + p,
.dnm-prd-rich p + p {
	margin-top: 10px;
}

.dnm-prd-rich h2,
.dnm-prd-rich h3,
.dnm-prd-rich h4 {
	margin: 18px 0 8px;
	line-height: 1.3;
	color: var(--prd-blue);
}

.dnm-prd-rich ul,
.dnm-prd-rich ol {
	margin: 0;
	padding-left: 24px;
}

.dnm-prd-rich ul {
	list-style: disc;
}

.dnm-prd-rich ol {
	list-style: decimal;
}

.dnm-prd-rich li {
	margin: 0;
}

.dnm-prd-rich img {
	max-width: 100%;
	height: auto;
}

.dnm-prd-rich table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.dnm-prd-rich th,
.dnm-prd-rich td {
	padding: 8px 12px;
	border: 1px solid #c9d8f0;
}

.dnm-prd-rich a {
	color: var(--prd-blue);
	text-decoration: underline;
}

.dnm-prd-rich .alignleft { float: left; margin: 0 20px 10px 0; }
.dnm-prd-rich .alignright { float: right; margin: 0 0 10px 20px; }
.dnm-prd-rich .aligncenter { display: block; margin: 0 auto 10px; }

/* ------------------------------------------------------------
   6. SẢN PHẨM KHÁC (slider cùng danh mục)
   ------------------------------------------------------------ */
.dnm-prd-related {
	padding: clamp(56px, 5.6vw, 107px) var(--prd-gutter) 0;
}

.dnm-prd-related__title {
	margin: 0;
	font-size: clamp(30px, 2.5vw, 48px);
	font-weight: 700;
	line-height: 1.31;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--prd-blue);
}

.dnm-prd-related__slider {
	max-width: 1542px;
	margin: clamp(24px, 2.55vw, 49px) auto 0;
}

/* chừa chỗ cho bóng đổ khi hover thẻ */
.dnm-prd-related__swiper {
	margin: -70px -40px 0;
	padding: 70px 40px 20px;
}

.dnm-prd-related__swiper .swiper-slide {
	display: flex;
	height: auto;
}

.dnm-prd-related__swiper .dnm-prd-card {
	flex: 1;
}

.dnm-prd-related__nav {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
	margin-top: clamp(24px, 3.4vw, 64px);
}

.dnm-prd-related__btn {
	display: block;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: opacity 0.2s;
}

.dnm-prd-related__btn svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.dnm-prd-related__btn circle {
	fill: #fff;
	stroke-width: 1;
	transition: fill 0.2s;
}

.dnm-prd-related__btn--prev circle { stroke: var(--prd-cyan); }
.dnm-prd-related__btn--next circle { stroke: var(--prd-blue); }
.dnm-prd-related__btn--prev path { fill: var(--prd-cyan); stroke: var(--prd-cyan); }
.dnm-prd-related__btn--next path { fill: var(--prd-blue); stroke: #3842d8; }

.dnm-prd-related__btn:hover circle {
	fill: var(--prd-soft);
}

.dnm-prd-related__btn.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.dnm-prd-btn,
	.dnm-prd-card__media img,
	.dnm-prd-top__media img {
		transition: none;
	}

	.dnm-prd-card:hover .dnm-prd-card__media img,
	.dnm-prd-top__media:hover img,
	.dnm-prd-btn:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------ */

/* Laptop 1201–1450px: giữ 4 cột, tab xuống dòng nếu chật */
@media (max-width: 1450px) {
	.dnm-prd-tabs {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}

	.dnm-prd-btn {
		min-width: 0;
		font-size: 16px;
	}

	.dnm-prd-top__btn {
		min-width: 190px;
		height: 46px;
	}

	.dnm-prd-pagination .page-numbers {
		min-width: 48px;
		height: 48px;
		font-size: 18px;
	}
}

/* Tablet ngang / laptop nhỏ ≤1200px: 3 cột */
@media (max-width: 1200px) {
	.dnm-prd-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dnm-prd-top {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: 40px;
		padding: 0;
	}

	.dnm-prd-detail__title {
		padding-left: 0;
	}

	.dnm-prd-related__swiper {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Tablet dọc ≤900px: banner chuyển sang xếp dọc, 2 cột */
@media (max-width: 900px) {
	.dnm-prd-hero__stage {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 28px;
		aspect-ratio: auto;
		container-type: normal;
		min-height: 520px;
		padding: 120px var(--prd-gutter) 40px;
	}

	.dnm-prd-hero__title {
		--px: 1px;
		order: 2;
		margin: 0;
		padding-left: 20px;
		background-position: 0 6px;
		background-size: 4px calc(100% - 12px);
		font-size: 34px;
	}

	.dnm-prd-badges {
		--px: 1px;
		order: 1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.dnm-prd-badge {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: 105px;
	}

	.dnm-prd-badge__text {
		font-size: 15px;
		white-space: normal;
	}

	.dnm-prd-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* chi tiết: ảnh trên, thông tin dưới */
	.dnm-prd-top {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.dnm-prd-top__media {
		max-width: 520px;
		margin: 0 auto;
	}
}

/* Điện thoại ≤640px */
@media (max-width: 640px) {
	.dnm-prd-page {
		--prd-gutter: 20px;
	}

	.dnm-prd-hero__stage {
		min-height: 0;
		padding-top: 110px;
	}

	.dnm-prd-hero__title {
		font-size: 28px;
	}

	/* thẻ ưu điểm gọn lại (x0.8) để banner không quá cao */
	.dnm-prd-badges {
		--px: 0.8px;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.dnm-prd-badge {
		height: calc(105 * var(--px));
	}

	.dnm-prd-badge__text {
		font-size: 14px;
	}

	.dnm-prd-intro {
		padding-top: 32px;
	}

	.dnm-prd-intro__title,
	.dnm-prd-related__title {
		line-height: 1.3;
	}

	/* tab danh mục: một hàng cuộn ngang, chạm vuốt được */
	.dnm-prd-tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin: 28px calc(var(--prd-gutter) * -1) 0;
		padding: 0 var(--prd-gutter) 6px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dnm-prd-tabs::-webkit-scrollbar {
		display: none;
	}

	.dnm-prd-tabs a {
		height: 42px;
		font-size: 15px;
	}

	.dnm-prd-grid {
		gap: 16px 12px;
	}

	.dnm-prd-card {
		padding: 18px 10px 18px;
	}

	.dnm-prd-card__body {
		margin-top: 14px;
	}

	.dnm-prd-card__title,
	.dnm-prd-card--portrait .dnm-prd-card__title {
		font-size: 15px;
	}

	.dnm-prd-card__desc,
	.dnm-prd-card--square .dnm-prd-card__desc {
		font-size: 13px;
		letter-spacing: 0.02em;
	}

	.dnm-prd-card--portrait .dnm-prd-card__media {
		height: 150px;
	}

	.dnm-prd-card--square .dnm-prd-card__media {
		border-radius: 18px;
	}

	.dnm-prd-btn {
		height: 36px;
		padding: 0 14px;
		font-size: 14px;
	}

	.dnm-prd-card__more {
		margin-top: 14px;
	}

	.dnm-prd-pagination .page-numbers {
		min-width: 42px;
		height: 42px;
		font-size: 16px;
	}

	/* chi tiết sản phẩm */
	.dnm-prd-single {
		padding-top: 100px;
	}

	.dnm-prd-top__title {
		font-size: 26px;
	}

	.dnm-prd-top__btn {
		width: 100%;
		min-width: 0;
		margin-top: 20px;
	}

	.dnm-prd-detail__title {
		margin-bottom: 16px;
	}

	.dnm-prd-detail__box {
		padding: 22px 16px;
	}

	.dnm-prd-rich ul,
	.dnm-prd-rich ol {
		padding-left: 20px;
	}

	.dnm-prd-related__swiper {
		margin: -50px -20px 0;
		padding: 50px 20px 10px;
	}

	.dnm-prd-related__nav {
		justify-content: center;
		margin-top: 16px;
	}

	.dnm-prd-related__btn {
		width: 46px;
		height: 46px;
	}
}

/* Màn rất hẹp ≤380px: lưới 1 cột */
@media (max-width: 380px) {
	.dnm-prd-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}