/**
 * Trang Size Guide.
 *
 * Accordion dùng chung CSS với khối FAQ (faq.css). File này chỉ lo phần riêng:
 * khối mở đầu, nút chuyển đơn vị đo và bảng số liệu.
 */

.sg-intro,
.sg-charts {
	--sg-accent:  var(--theme-palette-color-1, #e8363c);
	--sg-ink:     var(--theme-text-color, #16202c);
	--sg-soft:    color-mix(in srgb, var(--theme-text-color, #16202c) 70%, transparent);
	--sg-line:    color-mix(in srgb, var(--theme-text-color, #16202c) 14%, transparent);
	--sg-tint:    var(--theme-palette-color-7, #f6f8fb);
	--sg-ease:    cubic-bezier(.16, 1, .3, 1);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.sg-intro,
	.sg-charts {
		--sg-soft: rgb(75 88 105);
		--sg-line: rgb(16 24 40 / 14%);
	}
}

/* ==========================================================================
   PHẦN MỞ ĐẦU
   ========================================================================== */
.sg-intro {
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border: 1px solid var(--sg-line);
	border-radius: 14px;
	background: var(--sg-tint);
}

@media (min-width: 48rem) {
	.sg-intro--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: center;
	}
}

.sg-intro__text { color: var(--sg-soft); line-height: 1.75; }
.sg-intro__text > :first-child { margin-block-start: 0; }
.sg-intro__text > :last-child  { margin-block-end: 0; }
.sg-intro__text :where(h2, h3, h4) { color: var(--sg-ink); line-height: 1.35; }
.sg-intro__text :where(ul, ol) { padding-inline-start: 1.25rem; }
.sg-intro__text li { margin-block-end: .5rem; }
.sg-intro__text strong { color: var(--sg-ink); }

.sg-intro__figure { margin: 0; }

.sg-intro__figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 10px;
}

/* ==========================================================================
   ACCORDION BẢNG SIZE
   ========================================================================== */
.sg-charts { margin-block-start: clamp(1.5rem, 3vw, 2.5rem); }

/* Khối FAQ có margin trên sẵn; ở đây nó nằm trong section nên bỏ đi. */
.bch-faq--flush { margin-block-start: 0; }

/* ==========================================================================
   NÚT CHUYỂN ĐƠN VỊ
   ========================================================================== */
.sg-units__tabs {
	display: inline-flex;
	gap: .25rem;
	margin-block-end: 1rem;
	padding: .25rem;
	border-radius: 999px;
	background: var(--sg-tint);
	border: 1px solid var(--sg-line);
}

.sg-units__tab {
	padding: .375rem 1rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--sg-soft);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s var(--sg-ease), color .2s var(--sg-ease);
}

.sg-units__tab:hover { color: var(--sg-ink); }

.sg-units__tab.is-active {
	background: var(--sg-accent);
	color: #fff;
}

.sg-units__tab:focus-visible {
	outline: 3px solid var(--sg-accent);
	outline-offset: 2px;
}

/* Nhãn đơn vị chỉ dùng khi tắt JS (lúc đó hai bảng cùng hiện). */
.sg-units__label {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sg-soft);
}

.sg-units--js .sg-units__label { display: none; }
.sg-units--js .sg-units__panel:not(.is-active) { display: none; }

/* Tắt JS -> hai bảng xếp dọc, có khoảng cách để không dính nhau. */
.sg-units__panel + .sg-units__panel { margin-block-start: 1.5rem; }
.sg-units--js .sg-units__panel + .sg-units__panel { margin-block-start: 0; }

/* ==========================================================================
   BẢNG SỐ LIỆU
   Bảng do admin dán từ trình soạn thảo nên phải nhận diện qua thẻ, không có class.
   ========================================================================== */
.sg-units__panel {
	/* Bảng dài hơn màn hình thì cuộn ngang trong khung của nó,
	   không đẩy cả trang bị cuộn ngang theo. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sg-units__panel table {
	inline-size: 100%;
	min-inline-size: 22rem;
	border-collapse: collapse;
	font-size: .9375rem;
}

.sg-units__panel :where(th, td) {
	padding: .625rem .75rem;
	border: 1px solid var(--sg-line);
	text-align: center;
	white-space: nowrap;
}

.sg-units__panel th {
	background: var(--sg-tint);
	color: var(--sg-ink);
	font-weight: 700;
}

/* Cột đầu là tên size -> nhấn mạnh, canh trái cho dễ đọc. */
.sg-units__panel :where(tbody tr > :first-child) {
	font-weight: 700;
	color: var(--sg-ink);
	text-align: start;
}

.sg-units__panel tbody tr:nth-child(even) > * {
	background: color-mix(in srgb, var(--sg-tint) 55%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.sg-units__panel tbody tr:nth-child(even) > * { background: rgb(246 248 251 / 55%); }
}

.sg-units__panel tbody tr:hover > * {
	background: color-mix(in srgb, var(--sg-accent) 7%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.sg-units__tab { transition: none; }
}

/* ==========================================================================
   POPUP SIZE GUIDE Ở TRANG SẢN PHẨM
   Blocksy cho popup dùng lại .ct-container nên nó rộng đúng bằng container
   chính của site (1290px) - quá thừa cho nội dung chỉ là bảng số liệu vài cột.
   Muốn đổi độ rộng thì sửa mỗi số ở --sg-modal-width.
   ========================================================================== */
#ct-size-guide-modal .ct-container {
	--sg-modal-width: 860px;

	/* min() để màn hình hẹp hơn 860px vẫn co lại vừa khung, không tràn ngang. */
	max-inline-size: min( var(--sg-modal-width), 100% );
}