/* ------------------------------------------------------------------
   Site Testbench - trang bai.

   Chi nap o trang bai. Gom: bo cuc hai cot, bang dan huong danh so o dau
   bai (nuoc di rieng), va the san pham dinh ben phai.
   ------------------------------------------------------------------ */

.tb-cols--post {
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 38px;
	padding-bottom: 8px;
}

.tb-side {
	min-width: 0;
	position: sticky;
	top: 14px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-height: calc(100vh - 28px);
	overflow: auto;
	padding-right: 2px;
}

/* ---------------------------------------------------------- than bai */

.tb-article {
	font-size: 17px;
	line-height: 1.72;
	max-width: 74ch;
}

.tb-article p {
	margin: 0 0 1.05em;
}

.tb-article a {
	color: var(--accent-dk);
}

.tb-article ul,
.tb-article ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

.tb-article li {
	margin-bottom: .45em;
}

.tb-article h3 {
	font-size: 20px;
	margin: 1.7em 0 .5em;
}

.tb-article table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	margin: 0;
}

.tb-article th,
.tb-article td {
	border-bottom: 1px solid var(--line);
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
	/* Thong so hay co ma may lien mach dai hon ca cot; khong cho ngat thi
	   bang day trang ra ngoai o be ngang 375px. */
	overflow-wrap: anywhere;
}

.tb-article thead th {
	background: var(--surface);
	font-family: var(--f-display);
	font-size: 11.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--line);
}

.tb-article tbody th {
	width: 38%;
	font-weight: 600;
	color: var(--ink);
}

.tb-article--page {
	max-width: none;
}

/* ------------------------------- tieu de muc: so + nhan mau (nuoc di) */

.tb-h2 {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: clamp(21px, 3.2vw, 26px);
	margin: 2.1em 0 .6em;
	padding-top: 16px;
	border-top: 3px solid var(--ink);
	scroll-margin-top: 16px;
}

.tb-h2:first-child {
	margin-top: .6em;
}

.tb-h2__meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tb-h2__n {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 13px;
	color: var(--muted);
	letter-spacing: .06em;
}

.tb-h2__t {
	display: block;
}

/* Nhan mau. Mau lay theo chinh chu cua nhan nen "SPECS" o bai nao cung
   cung mot mau - doc nhieu bai thi nho mat. */
.tb-chip {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

.tb-chip--1 { background: #e8f1fb; color: #08508f; }
.tb-chip--2 { background: #fff4d6; color: #7a5200; }
.tb-chip--3 { background: #e0f5f1; color: #0b5f52; }
.tb-chip--4 { background: #eeeaff; color: #4b35a8; }
.tb-chip--5 { background: #ffe9ef; color: #a11642; }
.tb-chip--6 { background: #e6f5e6; color: #1d6b2a; }
.tb-chip--7 { background: #eaeef4; color: #384252; }
.tb-chip--8 { background: #ffece0; color: #9a4410; }

/* ---------------------------------------------- bang dan huong dau bai */

.tb-areas {
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--r);
	background: var(--surface);
	padding: 14px 16px 6px;
	margin: 0 0 30px;
}

.tb-areas__h {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 8px;
}

.tb-areas__list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 2px 14px;
}

.tb-areas__list a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px;
	border-radius: 6px;
	text-decoration: none;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.3;
}

.tb-areas__list a:hover {
	background: #fff;
	color: var(--ink);
}

.tb-areas__n {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 12px;
	color: var(--muted);
	flex: none;
}

.tb-areas__t {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tb-areas .tb-chip {
	flex: none;
	min-width: 84px;
	text-align: center;
}

/* ---------------------------------------------------------- anh mo bai */

.tb-hero {
	margin: 0 0 24px;
}

.tb-hero figure {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #fff;
	padding: 18px;
	text-align: center;
}

.tb-hero img {
	max-height: 380px;
	width: auto;
	object-fit: contain;
}

.tb-hero figcaption {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--muted);
	border-top: 1px solid var(--line);
	padding-top: 8px;
}

/* ---------------------------------------------------------- bang thong so */

.tb-spec {
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	margin: 0 0 1.4em;
}

.tb-spec > table {
	margin: 0;
}

.tb-fine {
	margin: 0;
	padding: 9px 14px;
	border-top: 1px solid var(--line);
	background: var(--surface);
	font-size: 11.5px;
	color: var(--muted);
}

/* ---------------------------------------------------------- uu / nhuoc */

.tb-pc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
	margin: 0 0 1.4em;
}

.tb-pc__col {
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 14px 16px;
	background: #fff;
}

.tb-pc__col--yes {
	border-top: 4px solid var(--accent);
}

.tb-pc__col--no {
	border-top: 4px solid var(--accent2);
}

.tb-pc__head {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 8px;
	color: var(--muted);
}

.tb-pc__list {
	margin: 0;
	padding-left: 1.15em;
	font-size: 15px;
	line-height: 1.55;
}

/* ---------------------------------------------------------- FAQ */

.tb-faq {
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	margin: 0 0 1.4em;
}

.tb-faq__item + .tb-faq__item {
	border-top: 1px solid var(--line);
}

.tb-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 13px 16px;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 16px;
	background: #fff;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.tb-faq__q::-webkit-details-marker {
	display: none;
}

.tb-faq__q::before {
	content: "+";
	color: var(--accent);
	font-weight: 700;
	line-height: 1.3;
	flex: none;
}

.tb-faq__item[open] .tb-faq__q::before {
	content: "\2212";
}

.tb-faq__item[open] .tb-faq__q {
	background: var(--surface);
}

.tb-faq__a {
	padding: 2px 16px 4px;
	font-size: 16px;
}

.tb-faq__a p:last-child {
	margin-bottom: 1em;
}

/* ---------------------------------------------------------- danh sach chinh */

.tb-keylist {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

.tb-keylist li {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	background: var(--surface);
	font-size: 15px;
	line-height: 1.5;
}

/* ---------------------------------------------------------- the san pham */

.tb-buy {
	border: 1px solid var(--line);
	border-top: 4px solid var(--accent);
	border-radius: var(--r);
	background: #fff;
	box-shadow: var(--shadow);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.tb-buy__top {
	display: flex;
	gap: 12px;
	align-items: center;
}

.tb-buy__img {
	flex: none;
	width: 84px;
	height: 84px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	padding: 6px;
}

.tb-buy__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tb-buy__id {
	min-width: 0;
}

.tb-buy__brand {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--accent-dk);
}

.tb-buy__name {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.tb-article p,
.tb-article li,
.tb-article h2,
.tb-article h3 {
	overflow-wrap: break-word;
}

.tb-buy__word {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
}

.tb-buy__word span {
	font-weight: 400;
	color: var(--muted);
}

.tb-buy__cta {
	margin: 0;
}

.tb-buy__cta .tb-btn {
	display: block;
	text-align: center;
}

.tb-buy__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
	font-size: 13px;
}

.tb-buy__facts li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--line);
}

.tb-buy__facts span {
	color: var(--muted);
	flex: none;
}

.tb-buy__facts b {
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.tb-buy__fine {
	margin: 0;
	font-size: 11.5px;
	color: var(--muted);
	line-height: 1.45;
}

/* ---------------------------------------------------------- anh phu */

.tb-shots {
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 12px 14px 14px;
	background: var(--surface);
}

.tb-shots__h,
.tb-side__h {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 9px;
}

.tb-shots__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 7px;
}

.tb-shots__row img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 4px;
}

/* ---------------------------------------------------------- dac diem */

.tb-feat {
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 12px 14px 14px;
	background: #fff;
}

.tb-feat__list {
	margin: 0 0 9px;
	padding-left: 1.1em;
	font-size: 13.5px;
	line-height: 1.5;
}

.tb-feat__list li {
	margin-bottom: .55em;
}

.tb-feat__list b {
	display: block;
	font-family: var(--f-display);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--accent-dk);
}

.tb-side__fine {
	margin: 0;
	font-size: 11.5px;
	color: var(--muted);
}

.tb-block--rel {
	border-top: 1px solid var(--line);
	margin-top: 26px;
}

/* ---------------------------------------------------------- be ngang nho */

@media (max-width: 1040px) {
	.tb-cols--post {
		grid-template-columns: minmax(0, 1fr) 290px;
		gap: 26px;
	}
}

@media (max-width: 900px) {
	.tb-cols--post {
		grid-template-columns: minmax(0, 1fr);
	}

	.tb-side {
		position: static;
		max-height: none;
		overflow: visible;
		order: -1;
	}

	.tb-article {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.tb-article {
		font-size: 16px;
	}

	.tb-areas .tb-chip {
		min-width: 0;
	}

	.tb-areas__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.tb-article tbody th {
		width: 44%;
	}

	.tb-hero figure {
		padding: 12px;
	}
}