/**
 * iw-pdh-detail — PDH detail page (global, dùng chung mọi template).
 *
 * Element: [pdh_detail] · render bởi includes/elements/global/pdh-detail.php
 * Scope: tất cả selector dưới `.iw-pdh-detail` để không leak global.
 * Mirror cho dev-preview link relative; sửa file này = cập nhật cả 2 chỗ.
 */
/* Nền xám cho trang PDH — Flatsome set #fff trên #wrapper (ID, specificity cao),
   nên phải target #wrapper kèm class body để đè (ID+class > #main #wrapper). */
.tcdt-pdh-detail main { background-color: #F3F3F3 !important; }
.iw-pdh-detail { font-family: inherit; color: #1f2937; }

/* Flatsome áp `margin-left: 1.3em` lên `.col-inner ul li` / `.entry-content ul li`
   (specificity 0,1,2) và flatsome.css load SAU component CSS → tie thua. Dùng
   !important trong scope component để reset chắc chắn (list dùng flex-gap, không
   cần margin/padding trên ul/li nên ép 0 an toàn). */
/* .iw-pdh-detail ul,
.iw-pdh-detail ol {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.iw-pdh-detail ul li,
.iw-pdh-detail ol li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
} */

/*
 * Inner container — match home/page convention via global tokens
 * (see assets/css/global/base.css). Width breakpoints flip from :root.
 */
.iw-pdh-detail__container {
	max-width: var(--iw-container-max);
	margin: 0 auto;
	padding: 0 var(--iw-container-pad-x);
	box-sizing: border-box;
}

/*
 * Fullwidth breakout — every section spans viewport regardless of the
 * Flatsome `.row-main` / `.col-inner` constraint applied by page.php.
 * Pattern khớp `iw-hero`, `iw-features-row`. Inner container above
 * brings content back to project max-width.
 */
.iw-pdh-detail__banner,
.iw-pdh-detail__breadcrumb,
.iw-pdh-detail__intro,
.iw-pdh-detail__extra,
.iw-pdh-detail__price-row,
.iw-pdh-detail__bonus,
.iw-pdh-detail__notes,
.iw-pdh-detail__faq,
.iw-pdh-detail__regform,
.iw-pdh-detail__notfound {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* padding: 40px 0 40px; */
}

/*
 * Form đăng ký cuối trang — Figma 5917:175300/175332. Band cam full-bleed,
 * heading+note (trái) · 2 input + nút (phải). Mobile dọc. scroll-target #dang-ky.
 */
.iw-pdh-detail__regform {
	margin-top: 30px;
	scroll-margin-top: 90px;
	padding: 28px 0;
	/* Ảnh nền (hoạ tiết + cam) đè lên gradient cam fallback. Path tương đối từ
	   assets/css/global/ → assets/img/. */
	background-image: url(../../img/banner-form-details-bg.jpg), linear-gradient(202deg, #fc6d12 45%, #fd690f 60%, #fe660e 74%);
	background-size: cover, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	box-shadow: 0 -12px 16px -4px rgba(16, 24, 40, 0.08), 0 -4px 6px -2px rgba(16, 24, 40, 0.03);
}
.iw-pdh-regform__inner {
	max-width: var(--iw-container-max);
	margin: 0 auto;
	padding: 0 var(--iw-container-pad-x);
	box-sizing: border-box;
	/* Desktop: [title | form] / [note | form] — form chiếm cột phải, span 2 hàng. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "title form" "note form";
	column-gap: 40px;
	row-gap: 8px;
	align-items: center;
}
.iw-pdh-regform__title { grid-area: title; }
.iw-pdh-regform__note  { grid-area: note; }
.iw-pdh-regform__form  { grid-area: form; }
.iw-pdh-regform__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
}
.iw-pdh-regform__note {
	margin: 0;
	font-size: 16px;
	line-height: 28px;
	font-weight: 400;
	color: #fff;
}
.iw-pdh-regform__note a { color: #fff; text-decoration: underline; }

/* Form: 2 input + nút trên 1 hàng, đáy thẳng (label trên input).
   Override .iw-lead-form__form (flex-direction:column) — class JS bắt buộc dùng. */
.iw-pdh-regform__form {
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 20px;
	width: auto;
	max-width: none;
	margin: 0;
	position: relative;
}
.iw-pdh-regform__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 257px;
}
.iw-pdh-regform__label {
	font-size: 16px;
	line-height: 22px;
	font-weight: 510;
	color: #fff;
	margin: 0;
}
.iw-pdh-regform__label span { color: #fff3f6; }
/* Input — scope .__form để đè style input mặc định của Flatsome (margin-bottom,
   box-shadow inset, height 2.5em…). Box 48px khớp chiều cao button. */
.iw-pdh-regform__form .iw-pdh-regform__input {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 12px;
	border: 1px solid #d1d1d1;
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	font-size: 16px;
	line-height: 22px;
	color: #3d3d3d;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.iw-pdh-regform__form .iw-pdh-regform__input::placeholder { color: #d1d1d1; opacity: 1; }
.iw-pdh-regform__form .iw-pdh-regform__input:focus {
	outline: none;
	border-color: #4564ed;
	box-shadow: none;
}
/* Error mode = placeholder: border đỏ + message hiện dạng placeholder đỏ trong field. */
.iw-pdh-regform__form .iw-lead-form__field--error .iw-pdh-regform__input { border-color: #e02424; }
.iw-pdh-regform__form .iw-lead-form__field--error .iw-pdh-regform__input::placeholder { color: #e02424; opacity: 1; }

/* Button — scope .__form để đè Flatsome button (uppercase, letter-spacing,
   box-shadow, min-width). Figma: "Nhận tư vấn" KHÔNG viết hoa. */
.iw-pdh-regform__form .iw-pdh-regform__cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	min-width: 0;
	margin: 0;
	padding: 13px 24px;
	border: 0;
	border-radius: 8px;
	background: #4564ed;
	color: #fff;
	font-size: 16px;
	line-height: 22px;
	font-weight: 510;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s;
}
.iw-pdh-regform__form .iw-pdh-regform__cta:hover { background: #3a55cc; color: #fff; }
.iw-pdh-regform__form .iw-pdh-regform__cta[disabled] { opacity: .6; cursor: default; }
.iw-pdh-regform__feedback {
	position: absolute;
	left: 0;
	bottom: -22px;
	font-size: 13px;
	color: #fff;
}
.iw-pdh-regform__feedback--success { color: #eafff1; font-weight: 600; }
.iw-pdh-regform__feedback--error { color: #fff3f6; }

/* Breadcrumb — sát trên cùng, padding gọn (element iw_breadcrumb tự lo style). */
.iw-pdh-detail__breadcrumb { padding: 0; }

.iw-pdh-detail__intro,
.iw-pdh-detail__extra,
.iw-pdh-detail__price-row,
.iw-pdh-detail__bonus,
.iw-pdh-detail__notes,
.iw-pdh-detail__faq,
.iw-pdh-detail__notfound {
	padding: 30px 0;
}

/* Banner = full bleed image, không có inner container. */
.iw-pdh-detail__banner picture,
.iw-pdh-detail__banner a { display: block; }
.iw-pdh-detail__banner img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	/* Cap chiều cao trên màn lớn — image > 565px tall sẽ crop center thay vì
	   stretch full. `aspect-ratio: auto` để tỉ lệ gốc giữ được khi viewport
	   chưa đủ rộng để chạm cap. */
	max-height: 565px;
	object-fit: cover;
	object-position: center;
}

/*
 * Section: Intro — title + gradient underline + lead paragraph.
 * Figma 407:46494 (desktop) / 407:46588 (mobile).
 */
.iw-pdh-detail__intro {
	text-align: center;
}
.iw-pdh-detail__intro-head {
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
}
.iw-pdh-detail__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.4;
	font-weight: 700;
	color: #3D3D3D;
}
.iw-pdh-detail__title-underline {
	display: block;
	width: 48px;
	height: 3px;
	border-radius: 9999px;
	background: linear-gradient(to right, var(--iw-banner-grad-from, #0593eb), var(--iw-banner-grad-to, #1057cb));
}
/*
 * Section: Extra — "Thông tin chi tiết" card.
 * Figma 2121:181924 — card trắng radius 12, padding 24, gap 16; mỗi feature
 * row = check icon xanh 24px + text 18px (label đậm + mô tả thường), #3D3D3D.
 */
.iw-pdh-detail__extra { 
	/* padding: 0 0 0px;  */
}
.iw-pdh-detail__extra-card {
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 24px rgba(16, 87, 203, 0.06);
}
.iw-pdh-detail__extra-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
}
.iw-pdh-detail__extra-title {
	margin: 0;
	font-size: 40px;
	line-height: 1.4;
	font-weight: 700;
	color: #3D3D3D;
	text-align: center;
}
.iw-pdh-detail__extra-underline {
	display: block;
	width: 48px;
	height: 3px;
	border-radius: 9999px;
	background: linear-gradient(to right, var(--iw-banner-grad-from, #0593eb), var(--iw-banner-grad-to, #1057cb));
}
.iw-pdh-detail__extra-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.iw-pdh-detail__extra-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 !important;
}
.iw-pdh-detail__extra-check {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 3px;
}
.iw-pdh-detail__extra-text {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 400;
	color: #3D3D3D;
}
.iw-pdh-detail__extra-label { font-weight: 700; }

/*
 * Section: Price row — 3 cards (price + speed + device) + CTA below.
 * Figma 2121:181883 — flex, 3 cột đều (flex:1), gap 24, card bg trắng radius 12.
 */
.iw-pdh-detail__price-row { 
	/* padding: 0px 0 0px;  */
}
.iw-pdh-detail__price-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: stretch;
	justify-content: center;
	margin: 0 auto 0px;
}

.iw-pdh-detail__price-card,
.iw-pdh-detail__speed-card,
.iw-pdh-detail__device-card {
	flex: 1 1 280px;
	min-width: 280px;
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 16px rgba(17, 87, 203, 0.06);
	box-sizing: border-box;
}

/* Price card — name (top center) + row [Chỉ từ | giá | /tháng] baseline-aligned */
.iw-pdh-detail__price-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.iw-pdh-detail__price-card-name {
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
	color: #3D3D3D;
	text-align: center;
}
.iw-pdh-detail__price-card-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	padding-top: 4px;
}
.iw-pdh-detail__price-card-label,
.iw-pdh-detail__price-card-period {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #3D3D3D;
}
.iw-pdh-detail__price-card-value {
	font-size: 56px;
	line-height: 64px;
	font-weight: 700;
	white-space: nowrap;
	background-image: linear-gradient(to right, var(--iw-banner-grad-from, #0593eb), var(--iw-banner-grad-to, #1057cb));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.iw-pdh-detail__price-currency {
	/* Inline span để đ kế giá, share gradient từ parent */
	font-size: inherit;
}

/* Speed card — icon (left) + body (right: label row + value row) */
.iw-pdh-detail__speed-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.iw-pdh-detail__speed-icon,
.iw-pdh-detail__device-icon {
	height: 64px;
	width: auto;
	flex-shrink: 0;
	object-fit: contain;
}
.iw-pdh-detail__speed-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.iw-pdh-detail__speed-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #3D3D3D;
	white-space: nowrap;
}
.iw-pdh-detail__speed-label-main {
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
}
.iw-pdh-detail__speed-label-sub {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}
.iw-pdh-detail__speed-row {
	display: flex;
	align-items: center;
	gap: 4px;
}
.iw-pdh-detail__speed-value {
	font-size: 56px;
	line-height: 64px;
	font-weight: 700;
	white-space: nowrap;
	background-image: linear-gradient(-84deg, #eb2e0f 0%, #f6921e 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.iw-pdh-detail__speed-unit-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	color: #3D3D3D;
}
.iw-pdh-detail__speed-unit {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}
.iw-pdh-detail__speed-sub {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}
.iw-pdh-detail__speed-sub strong { font-weight: 700; }

/* Device card — icon (left) + body (right: label row + value row). Figma 2121:181905 */
.iw-pdh-detail__device-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.iw-pdh-detail__device-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.iw-pdh-detail__device-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #3D3D3D;
	white-space: nowrap;
}
.iw-pdh-detail__device-label-main {
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
}
.iw-pdh-detail__device-label-sub {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}
.iw-pdh-detail__device-row {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.iw-pdh-detail__device-value {
	font-size: 56px;
	line-height: 64px;
	font-weight: 700;
	white-space: nowrap;
	background-image: linear-gradient(266deg, #40d87d 9%, #17ba58 98%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.iw-pdh-detail__device-suffix {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #3D3D3D;
}

/* CTA button — Brand/Blue/Primary, h48, radius 8 */
.iw-pdh-detail__cta-wrap {
	text-align: center;
	margin: 24px 0 0;
}
.iw-pdh-detail__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 8px 24px;
	background: var(--iw-cta-bg, #4564ed);
	color: var(--iw-cta-fg, #ffffff);
	font-size: 16px;
	font-weight: 510;
	line-height: 1.4;
	border-radius: 8px;
	text-decoration: none;
	transition: background .15s;
}
.iw-pdh-detail__cta:hover,
.iw-pdh-detail__cta:focus { background: var(--iw-cta-bg-hover, #3a55cc); color: var(--iw-cta-fg, #ffffff); }

/*
 * Shared section heading — H2 + gradient underline.
 * Same visual rule as intro `__intro-head`/`__title`/`__title-underline`
 * but at H2 scale. Used by Bonus, Notes (Đặc quyền), v.v.
 */
.iw-pdh-detail__section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
}
.iw-pdh-detail__section-title {
	margin: 0;
	font-size: 40px;
	line-height: 1.4;
	font-weight: 700;
	color: #3D3D3D;
	text-align: center;
}
.iw-pdh-detail__section-underline {
	display: block;
	width: 48px;
	height: 3px;
	border-radius: 9999px;
	background: linear-gradient(to right, var(--iw-banner-grad-from, #0593eb), var(--iw-banner-grad-to, #1057cb));
}

/*
 * Section: Bonus — "Nhận thêm trong gói này".
 * Figma 407:46523 (desktop) / 407:46619 (mobile).
 */
.iw-pdh-detail__bonus { 
	/* padding: 0 0 0px;  */
}
.iw-pdh-detail__bonus-list {
	list-style: none;
	margin: 0;
	/* padding-bottom chừa chỗ cho thanh scroll khi tràn */
	padding: 0 0 8px;
	display: flex;
	flex-wrap: nowrap;
	/* `safe center`: căn giữa khi đủ chỗ, tự về flex-start khi tràn để cuộn
	   được tới item đầu (tránh bị kẹt khi justify-center + overflow). */
	justify-content: safe center;
	align-items: flex-start;
	gap: 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.iw-pdh-detail__bonus-item {
	flex: 0 0 220px;
	width: 220px;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	box-shadow: 0 4px 24px rgba(16, 87, 203, 0.06);
}
.iw-pdh-detail__bonus-thumb {
	width: 220px;
	height: 220px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.iw-pdh-detail__bonus-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.iw-pdh-detail__bonus-title {
	width: 100%;
	padding: 0 16px 16px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: #3D3D3D;
	text-align: center;
}

/*
 * Section: Notes — "Đặc quyền".
 * Figma 2121:181997 — grid card trắng radius 12 + shadow; mỗi card =
 * featured icon box (48px, nền xanh nhạt) + title 20px semibold + desc 16px.
 */
.iw-pdh-detail__notes { 
	/* padding: 0 0 0px;  */
}
.iw-pdh-detail__notes-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.iw-pdh-detail__notes-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 24px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(16, 24, 40, 0.02), 0 2px 32px rgba(16, 24, 40, 0.04);
	margin: 0 !important;
}
.iw-pdh-detail__notes-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 12px;
	/* background: rgba(221, 228, 252, 0.8);
	border: 8px solid #f0f3fe; */
	box-sizing: border-box;
	overflow: hidden;
}
.iw-pdh-detail__notes-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.iw-pdh-detail__notes-card-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.iw-pdh-detail__notes-card-title {
	margin: 0;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 600;
	color: #3D3D3D;
}
.iw-pdh-detail__notes-card-desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: #3D3D3D;
}

/*
 * Section: FAQ — head căn giữa (như extra/notes) + card trắng bọc accordion.
 * [iw_qa] render section riêng; trong scope này neutralize bg/inner-width của nó
 * để khớp card chung của trang chi tiết.
 */
.iw-pdh-detail__faq-card {
	background: #fff;
	border-radius: 12px;
	padding: 24px 24px;
	box-shadow: 0 4px 24px rgba(16, 87, 203, 0.06);
}
.iw-pdh-detail__faq-card .iw-qa {
	/* Tắt full-bleed breakout (100vw + margin âm) của iw-qa standalone — ở đây
	   nó nằm trong card nên phải về đúng bề rộng card. */
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	background: transparent;
}
.iw-pdh-detail__faq-card .iw-qa__inner {
	max-width: none;
	padding: 0;
	margin: 0;
}
/* Bộ Q&A thứ 2+ trong cùng card — đường ngăn cách trên cho liền mạch. */
.iw-pdh-detail__faq-card .iw-qa + .iw-qa { margin-top: 0; }

/*
 * Sticky toolbar — Figma 2121:182399. Fixed bottom, ẩn mặc định (trượt xuống +
 * mờ), `.is-visible` (JS toggle) hiện lên. Icon 60px + tên gói + CTA.
 */
.iw-pdh-detail__sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	padding: 0 16px 16px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(100%);
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.iw-pdh-detail__sticky-bar.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.iw-pdh-detail__sticky-inner {
	max-width: var(--iw-container-max);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px 16px 16px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 32px -4px rgba(16, 24, 40, 0.08), 0 4px 16px 10px rgba(16, 24, 40, 0.02), 0 4px 4px -8px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}
.iw-pdh-detail__sticky-info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
.iw-pdh-detail__sticky-icon {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
}
.iw-pdh-detail__sticky-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.iw-pdh-detail__sticky-name {
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.iw-pdh-detail__sticky-price {
	flex-shrink: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}
.iw-pdh-detail__sticky-price-label,
.iw-pdh-detail__sticky-price-period {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #3D3D3D;
}
.iw-pdh-detail__sticky-price-value {
	font-size: 28px;
	line-height: 32px;
	font-weight: 700;
	white-space: nowrap;
	background-image: linear-gradient(to right, var(--iw-banner-grad-from, #0593eb), var(--iw-banner-grad-to, #1057cb));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.iw-pdh-detail__sticky-price-currency { font-size: inherit; }
.iw-pdh-detail__sticky-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
.iw-pdh-detail__sticky-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 162px;
	padding: 13px 24px;
	border-radius: 8px;
	background: var(--iw-cta-bg, #4564ed);
	color: var(--iw-cta-fg, #fff);
	font-size: 16px;
	line-height: 22px;
	font-weight: 510;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s;
}
.iw-pdh-detail__sticky-cta:hover { background: var(--iw-cta-bg-hover, #3a55cc); color: var(--iw-cta-fg, #fff); }

/* ============================================================
   Mobile (≤ 767px) — Figma 407:46588
   ============================================================ */
@media (max-width: 767px) {

	.iw-pdh-detail__intro { padding: 40px 0 0; }
	.iw-pdh-detail__title { font-size: 24px; }

	.iw-pdh-detail__extra { padding: 0 0 40px; }
	.iw-pdh-detail__extra-card { padding: 16px; }
	.iw-pdh-detail__extra-head { margin-bottom: 16px; }
	.iw-pdh-detail__extra-title { font-size: 24px; }
	.iw-pdh-detail__extra-text { font-size: 16px; }

	.iw-pdh-detail__price-row { padding: 24px 0 40px; }
	.iw-pdh-detail__price-grid {
		flex-direction: column;
		gap: 16px;
		margin-bottom: 24px;
	}
	.iw-pdh-detail__price-card,
	.iw-pdh-detail__speed-card,
	.iw-pdh-detail__device-card {
		flex: 1 1 auto;
		min-width: 0;
		border-radius: 9px;
	}

	/* Price card mobile — vertical: name / Chỉ từ / price+/tháng */
	.iw-pdh-detail__price-card {
		min-height: 122px;
		padding: 16px;
		gap: 4px;
	}
	.iw-pdh-detail__price-card-name { font-size: 16px; line-height: 22px; }
	.iw-pdh-detail__price-card-row {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
		padding-top: 0;
	}
	.iw-pdh-detail__price-card-label {
		flex-basis: 100%;
		font-size: 12px;
		line-height: 16px;
		text-align: center;
	}
	.iw-pdh-detail__price-card-value { font-size: 40px; line-height: 48px; }

	/* Speed card mobile — same horizontal layout, smaller sizes */
	.iw-pdh-detail__speed-card {
		min-height: 122px;
		padding: 24px 16px;
		gap: 16px;
	}
	.iw-pdh-detail__speed-label-main { font-size: 16px; line-height: 22px; }
	.iw-pdh-detail__speed-label-sub  { font-size: 12px; line-height: 16px; }
	.iw-pdh-detail__speed-value      { font-size: 40px; line-height: 48px; }
	.iw-pdh-detail__speed-unit       { font-size: 12px; line-height: 16px; }
	.iw-pdh-detail__speed-sub        { font-size: 12px; line-height: 16px; }

	/* Device card mobile — same horizontal layout, smaller sizes */
	.iw-pdh-detail__device-card {
		min-height: 122px;
		padding: 24px 16px;
		gap: 16px;
	}
	.iw-pdh-detail__speed-icon,
	.iw-pdh-detail__device-icon       { height: 50px; width: auto; }
	.iw-pdh-detail__device-label-main { font-size: 16px; line-height: 22px; }
	.iw-pdh-detail__device-label-sub  { font-size: 12px; line-height: 16px; }
	.iw-pdh-detail__device-value      { font-size: 40px; line-height: 48px; }
	.iw-pdh-detail__device-suffix     { font-size: 12px; line-height: 16px; }

	/* Section heading mobile — 24/24-bold */
	.iw-pdh-detail__section-head { margin-bottom: 24px; }
	.iw-pdh-detail__section-title { font-size: 24px; }

	/* Bonus mobile — cards 163px square, gap 16, cuộn ngang khi tràn,
	   title height 44px = 2 lines locked */
	.iw-pdh-detail__bonus { padding: 0 0 40px; }
	.iw-pdh-detail__bonus-list {
		gap: 16px;
	}
	.iw-pdh-detail__bonus-item {
		flex: 0 0 163px;
		width: 163px;
		border-radius: 9px;
	}
	.iw-pdh-detail__bonus-thumb {
		width: 163px;
		height: 163px;
	}
	.iw-pdh-detail__bonus-title {
		padding: 0 12px;
		height: 44px;
	}

	/* Notes mobile — 1 cột card, padding gọn lại */
	.iw-pdh-detail__notes { padding: 0 0 40px; }
	.iw-pdh-detail__notes-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 0px;
	}
	.iw-pdh-detail__notes-card { padding: 16px; }
	.iw-pdh-detail__notes-card-title { font-size: 18px; }

	.iw-pdh-detail__faq { padding: 0 0 40px; }

	/* Sticky bar mobile — gọn lại, icon nhỏ, CTA co giãn */
	.iw-pdh-detail__sticky-bar { padding: 0 12px 12px; }
	/* Mobile: info full-width hàng trên; price + actions chia 2 cột hàng dưới. */
	.iw-pdh-detail__sticky-inner {
		flex-wrap: wrap;
		gap: 12px;
		padding: 12px;
	}
	.iw-pdh-detail__sticky-info {
		flex: 0 0 100%;
		padding-bottom: 15px;
		border-bottom: 1px solid #e8e8e8;
	}
	.iw-pdh-detail__sticky-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 6px; }
	.iw-pdh-detail__sticky-name { font-size: 16px; line-height: 22px; }
	.iw-pdh-detail__sticky-price {
		flex: 1 1 0;
		min-width: 0;
		gap: 4px;
	}
	.iw-pdh-detail__sticky-price-value { font-size: 20px; line-height: 24px; }
	.iw-pdh-detail__sticky-price-label,
	.iw-pdh-detail__sticky-price-period { font-size: 12px; line-height: 16px; }
	.iw-pdh-detail__sticky-actions {
		flex: 1 1 0;
		gap: 8px;
		justify-content: flex-end;
	}
	.iw-pdh-detail__sticky-cta { flex: 1 1 auto; width: auto; padding: 11px 16px; font-size: 14px; }

	/* Reg form mobile (Figma 5917:175332) — dọc: title (giữa) → form → note (đáy).
	   Bg riêng cho mobile (375×418 portrait) thay band ngang desktop. */
	.iw-pdh-detail__regform {
		padding: 24px 0;
		background-image: url(../../img/form-support-bg-m.jpg), linear-gradient(259deg, #fc6d12 45%, #fd690f 60%, #fe660e 74%);
	}
	.iw-pdh-regform__inner {
		grid-template-columns: 1fr;
		grid-template-areas: "title" "form" "note";
		row-gap: 8px;
	}
	.iw-pdh-regform__title {
		font-size: 24px;
		line-height: 1.11;
		letter-spacing: -0.24px;
		text-align: center;
		max-width: 240px;
		margin: 0 auto;
	}
	.iw-pdh-regform__note { font-size: 12px; line-height: 1.5; text-align: center; }
	/* Field group gap 12; cách button 26px (gap 12 + margin-top 14). */
	.iw-pdh-regform__form {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.iw-pdh-regform__field { width: 100%; gap: 6px; }
	/* Mobile: label 14px regular, input/placeholder 14px (Figma). */
	.iw-pdh-regform__label { font-size: 14px; line-height: 24px; font-weight: 400; }
	.iw-pdh-regform__label span { font-size: 16px; font-weight: 510; }
	.iw-pdh-regform__form .iw-pdh-regform__input { font-size: 14px; line-height: 24px; }
	.iw-pdh-regform__form .iw-pdh-regform__cta { width: 100%; margin-top: 14px; }
	.iw-pdh-regform__feedback { position: static; bottom: auto; margin-top: 4px; text-align: center; }
}