/**
 * Dải liên hệ dưới ảnh (inc/image-band.php) — nằm sát dưới ảnh, rộng đúng bằng ảnh, bo góc chung như một tấm ảnh.
 * Chữ lấy từ biến CSS in 1 lần/trang (--ddg-band-eyebrow|name|call|zalo). Co giãn theo bề rộng chính ảnh
 * (container query trên .ddg-imgband__bar, đơn vị cqi):
 *   ≥ 720px  đầy đủ: dòng phụ + tên + "Gọi: số" + "Zalo: số"
 *   300–719  dòng phụ + tên + 2 nút tròn (vùng chạm ≥ 34px)
 *   200–299  chỉ tên
 *   < 200    ẩn dải
 * Link giữ href tel:/zalo.me cho GTM; phần tử con pointer-events:none.
 */

/* ------------------------------------------------------------------ *
 * Khung ảnh + dải
 * ------------------------------------------------------------------ */
.ddg-imgband {
	--ddg-imgband-bg: var(--ddg-brand-900, #1f1a33);
	--ddg-imgband-red: var(--ddg-accent-red, #ec1f27);
	--ddg-imgband-blue: var(--ddg-brand-600, #3666a3);
	--ddg-imgband-zalo: var(--ddg-zalo, #0068ff);
	position: relative;
	display: block;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--ddg-radius-md, 10px);
	background: var(--ddg-imgband-bg);
	line-height: 0;
	text-align: left;
}

span.ddg-imgband > img,
span.ddg-imgband > a,
span.ddg-imgband > a > img,
.entry-content span.ddg-imgband > img,
.entry-content span.ddg-imgband > a > img {
	display: block;
	float: none;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.ddg-imgband__bar {
	display: block;
	container-type: inline-size;
	line-height: 1.2;
}

.ddg-imgband__in {
	--icon: 26px;
	--icon: 3.6cqi;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	gap: 3cqi;
	padding: 14px 20px 13px;
	padding: 2.1cqi 3cqi 2cqi;
	color: #fff;
	font-family: var(--ddg-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	font-style: normal;
	text-transform: none;
}

/* Vạch trên: đỏ ~19% + xanh (theo ảnh mẫu) */
.ddg-imgband__in::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	height: clamp(3px, 0.5cqi, 6px);
	background: linear-gradient(90deg, var(--ddg-imgband-red) 0 19%, var(--ddg-imgband-blue) 19% 100%);
}

.ddg-imgband__brand {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	gap: 1px;
	gap: 0.15cqi;
	min-width: 0;
}

.ddg-imgband__brand::before,
.ddg-imgband__brand::after {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.ddg-imgband__brand::before {
	content: var(--ddg-band-eyebrow, none);
	color: var(--ddg-on-dark, #d5d2e0);
	font-size: 10px;
	font-size: 1.45cqi;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.55; /* chừa chỗ dấu chồng chữ hoa (Ẩ, Ấ) khi overflow:hidden */
}

.ddg-imgband__brand::after {
	content: var(--ddg-band-name, "Đại Dương Glass");
	color: #fff;
	font-size: 23px;
	font-size: 3.3cqi;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.35;
	margin-block: -0.12em -0.08em;
}

.ddg-imgband__contacts {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	gap: 1.6cqi;
}

span.ddg-imgband a.ddg-imgband__item,
span.ddg-imgband a.ddg-imgband__item:is(:hover, :focus, :active, :visited) {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	gap: 1cqi;
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-size: 1.75cqi;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

span.ddg-imgband a.ddg-imgband__item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ddg-imgband__item * {
	pointer-events: none;
}

.ddg-imgband__item--call::after {
	content: var(--ddg-band-call, "Gọi ngay");
}

.ddg-imgband__item--zalo::after {
	content: var(--ddg-band-zalo, "Chat Zalo");
}

.ddg-imgband__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--icon);
	height: var(--icon);
	border-radius: 50%;
	background: var(--ddg-imgband-red);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.ddg-imgband__item--call .ddg-imgband__icon::before {
	content: "";
	width: 54%;
	height: 54%;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 3.5H5.6A1.6 1.6 0 0 0 4 5.2C4.3 13.4 10.6 19.7 18.8 20a1.6 1.6 0 0 0 1.7-1.6v-2.6a1.2 1.2 0 0 0-.9-1.2l-3.1-.9a1.2 1.2 0 0 0-1.2.3l-1.2 1.2a12.3 12.3 0 0 1-5.3-5.3l1.2-1.2a1.2 1.2 0 0 0 .3-1.2l-.9-3.1a1.2 1.2 0 0 0-1.2-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.2 3.5H5.6A1.6 1.6 0 0 0 4 5.2C4.3 13.4 10.6 19.7 18.8 20a1.6 1.6 0 0 0 1.7-1.6v-2.6a1.2 1.2 0 0 0-.9-1.2l-3.1-.9a1.2 1.2 0 0 0-1.2.3l-1.2 1.2a12.3 12.3 0 0 1-5.3-5.3l1.2-1.2a1.2 1.2 0 0 0 .3-1.2l-.9-3.1a1.2 1.2 0 0 0-1.2-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ddg-imgband__item--zalo .ddg-imgband__icon {
	background: var(--ddg-imgband-zalo);
}

.ddg-imgband__item--zalo .ddg-imgband__icon::before {
	content: "Zalo";
	color: #fff;
	font-size: calc(var(--icon) * 0.3);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
}

.ddg-imgband__item:hover .ddg-imgband__icon {
	filter: brightness(1.1);
	transform: scale(1.06);
}

.ddg-imgband__sep {
	align-self: stretch;
	width: 1px;
	margin-block: 2px;
	margin-block: 0.3cqi;
	background: rgba(255, 255, 255, 0.3);
}

/* ------------------------------------------------------------------ *
 * Bậc theo bề rộng ảnh
 * ------------------------------------------------------------------ */
@container (max-width: 719.98px) {
	.ddg-imgband__in {
		--icon: clamp(34px, 9cqi, 44px);
		gap: 2.5cqi;
		padding: 2.6cqi 3.4cqi 2.4cqi;
	}
	.ddg-imgband__brand::before {
		font-size: clamp(9px, 2.6cqi, 13px);
		letter-spacing: 0.12em;
	}
	.ddg-imgband__brand::after {
		font-size: clamp(14px, 5.4cqi, 26px);
	}
	.ddg-imgband__contacts {
		gap: clamp(8px, 2cqi, 14px);
	}
	.ddg-imgband__item--call::after,
	.ddg-imgband__item--zalo::after,
	.ddg-imgband__sep {
		display: none;
	}
}

@container (max-width: 299.98px) {
	.ddg-imgband__in {
		justify-content: center;
		padding: 3.2cqi 4cqi 3cqi;
	}
	.ddg-imgband__contacts,
	.ddg-imgband__brand::before {
		display: none;
	}
	.ddg-imgband__brand::after {
		font-size: clamp(12px, 7cqi, 18px);
	}
}

@container (max-width: 199.98px) {
	.ddg-imgband__in {
		display: none;
	}
}

/* Trình duyệt cũ không có container query (Safari < 16): bản gọn cỡ cố định. */
@supports not (container-type: inline-size) {
	.ddg-imgband__in {
		--icon: 34px;
		gap: 10px;
		padding: 10px 12px;
	}
	.ddg-imgband__brand::before {
		font-size: 9px;
	}
	.ddg-imgband__brand::after {
		font-size: 16px;
	}
	.ddg-imgband__item--call::after,
	.ddg-imgband__item--zalo::after,
	.ddg-imgband__sep {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Vị trí
 * ------------------------------------------------------------------ */

/* Ảnh trong nội dung: ảnh vốn giãn full cột (CSS header cũ .entry-content img{width:100%}) → dải giữ đúng bề rộng đó */
span.ddg-imgband--content {
	width: 100%;
}

.entry-content span.ddg-imgband--content > img,
.entry-content span.ddg-imgband--content > a > img {
	width: 100%;
}

@media (min-width: 850px) {
	.ddg-imgband--alignleft {
		float: left;
		margin: 0.3em 1.5em 1em 0;
	}
	.ddg-imgband--alignright {
		float: right;
		margin: 0.3em 0 1em 1.5em;
	}
}

.ddg-product-content span.ddg-imgband--content {
	margin-block: 30px;
	box-shadow: var(--ddg-shadow-1, 0 1px 2px rgba(26, 23, 38, 0.06));
}

/* Ảnh đại diện đầu bài, ảnh chính sản phẩm: phủ đủ khung */
span.ddg-imgband--hero {
	width: 100%;
}

span.ddg-imgband--post-hero > img {
	width: 100%;
}

span.ddg-imgband--product-hero {
	border-radius: var(--ddg-radius-lg, 16px);
}

span.ddg-imgband--product-hero > .ddg-product-hero {
	border-radius: 0;
}

span.ddg-imgband--product-hero > .ddg-product-hero:focus-visible {
	outline-offset: -3px;
}

/* Lightbox sản phẩm (assets/js/product.js) */
.ddg-lightbox__figure span.ddg-imgband--lightbox {
	margin: 0;
	border-radius: var(--ddg-radius-sm, 6px);
}

/* Bề rộng khung do product.js (fitBand) tính để ảnh + dải lọt khung nhìn. */
span.ddg-imgband--lightbox > .ddg-lightbox__img {
	width: 100%;
	max-height: none;
	border-radius: 0;
}