/* =====================================================================
   Site Tech Wire - trang bai viet
   Dai du lieu ngang duoi tieu de, roi hai cot: than bai + tin lien quan.
   ===================================================================== */

.tw-art { padding-bottom: 6px; }

.tw-art__head { padding-block: 8px 20px; }

.tw-art__cat {
	display: inline-block;
	font-family: var(--head); font-size: 12px; font-weight: 500;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: #fff; background: var(--red); padding: 3px 10px;
	text-decoration: none; margin-bottom: 12px;
}
.tw-art__cat:hover { background: var(--red-dk); }

.tw-art__t {
	font-family: var(--head); font-weight: 600;
	font-size: clamp( 30px, 4.6vw, 48px );
	text-transform: uppercase; letter-spacing: -0.012em; line-height: 1.08;
}
.tw-art__dek { margin-top: 12px; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 74ch; }

/* ---- Dai du lieu san pham ------------------------------------------- */

.tw-hero {
	display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 24px; align-items: start;
	border-block: 3px solid var(--ink);
	padding-block: 20px; margin-bottom: 26px;
}

.tw-hero__shot > a, .tw-hero__shot > img { display: block; background: var(--wash); }
.tw-hero__shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 10px; }

.tw-hero__thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; padding-bottom: 3px; }
.tw-hero__thumbs li { flex: 0 0 auto; }
.tw-thumb { display: block; width: 52px; height: 52px; border: 1px solid var(--line); background: var(--wash); }
.tw-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.tw-thumb:hover, .tw-thumb.is-on { border-color: var(--red); }

.tw-hero__kicker {
	font-family: var(--head); font-size: 11px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--red);
}
.tw-hero__name { font-family: var(--head); font-size: 19px; font-weight: 500; line-height: 1.25; margin: 2px 0 10px; }

/* ---- O diem ---------------------------------------------------------- */

.tw-rate { border-top: 1px solid var(--line); padding-top: 11px; }
.tw-rate__lab {
	font-family: var(--head); font-size: 11px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
	margin-bottom: 5px;
}
.tw-rate__row { display: flex; align-items: center; gap: 11px; }
.tw-rate__num { font-family: var(--head); font-size: 36px; font-weight: 600; line-height: 1; }
.tw-rate__word { font-family: var(--head); font-size: 16px; font-weight: 500; color: var(--red); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.tw-rate__n { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; }

.tw-split { margin-top: 10px; display: grid; gap: 3px; }
.tw-split li { display: grid; grid-template-columns: 26px 1fr 34px; gap: 7px; align-items: center; font-size: 11px; color: var(--ink-3); }
.tw-split__s { font-family: var(--head); }
.tw-split__b { display: block; height: 7px; background: var(--line-2); }
.tw-split__b i { display: block; height: 100%; background: var(--ink); }
.tw-split__n { text-align: right; font-family: var(--head); }

/* ---- Bang gia -------------------------------------------------------- */

.tw-buy { border: 1px solid var(--line); padding: 14px; background: var(--wash); }
.tw-buy__lab {
	font-family: var(--head); font-size: 11px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
	margin-bottom: 8px;
}
.tw-buy__t { width: 100%; border-collapse: collapse; }
.tw-buy__t th {
	text-align: left; font-family: var(--head); font-weight: 500; font-size: 15px;
	padding: 6px 8px 6px 0;
}
.tw-buy__p { font-family: var(--head); font-size: 20px; font-weight: 600; padding: 6px 8px; white-space: nowrap; }
.tw-buy__p s { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-left: 5px; }
.tw-buy__save { font-size: 12px; font-weight: 600; color: #fff; background: var(--red); padding: 1px 6px; margin-left: 5px; }
.tw-buy__none { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.tw-buy__go { text-align: right; padding: 6px 0; }
.tw-buy__go a {
	display: inline-block; background: var(--red); color: #fff; text-decoration: none;
	font-family: var(--head); font-size: 13px; font-weight: 500;
	letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px;
}
.tw-buy__go a:hover { background: var(--red-dk); }

.tw-buy__facts { margin-top: 10px; display: grid; gap: 3px; }
.tw-buy__facts li { font-size: 13px; color: var(--ink-2); padding-left: 15px; position: relative; }
.tw-buy__facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--line); }
.tw-buy__facts li.is-yes::before { background: var(--green); }
.tw-buy__fine { margin-top: 9px; font-size: 11px; line-height: 1.45; color: var(--ink-3); }

/* ---- Khung hai cot --------------------------------------------------- */

.tw-art__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.tw-art__body { min-width: 0; }
.tw-art__side { min-width: 0; }

/* ---- Khoi "What you need to know" - nuoc di rieng cua site nay -------- */

.tw-tldr {
	border-left: 5px solid var(--red);
	background: var(--wash);
	padding: 16px 18px; margin-bottom: 24px;
}
.tw-tldr__t {
	font-family: var(--head); font-size: 17px; font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 11px;
}
.tw-tldr__list { display: grid; gap: 10px; }
.tw-tldr__list li {
	position: relative; padding-left: 20px;
	font-size: 15.5px; line-height: 1.5;
}
.tw-tldr__list li::before {
	content: ""; position: absolute; left: 0; top: 9px;
	width: 8px; height: 8px; background: var(--red);
}
/*
 * `white-space: nowrap` o day tung lam trang bai cuon ngang 3px: khi dong
 * chu da gan day, lien ket nay khong duoc phep xuong dong nen bi day ra khoi
 * khung. Do bang Chrome that o khung 375px, bai LEGO NASA Artemis.
 *
 * Bo nowrap va cho phep no co lai. Nhan chi vai chu nen tren thuc te van nam
 * gon mot dong; khac biet duy nhat la khi het cho thi no xuong dong thay vi
 * day ca trang.
 */
.tw-tldr__jump {
	display: inline-block; margin-left: 5px;
	font-family: var(--head); font-size: 11px; font-weight: 500;
	letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--red); text-decoration: none;
	border-bottom: 1px solid currentColor;
	max-width: 100%; overflow-wrap: anywhere;
}
.tw-tldr__jump:hover { color: var(--red-dk); }
.tw-tldr__fine { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }

/* ---- Thanh muc luc --------------------------------------------------- */

.tw-jump { border: 1px solid var(--line); padding: 13px 15px; margin-bottom: 22px; }
.tw-jump__lab {
	font-family: var(--head); font-size: 11px; font-weight: 500;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
	margin-bottom: 8px;
}
.tw-jump ul { display: flex; flex-wrap: wrap; gap: 5px 7px; }
.tw-jump a {
	display: inline-block; font-size: 12.5px; text-decoration: none;
	border: 1px solid var(--line); padding: 4px 10px; background: #fff;
}
.tw-jump a:hover { border-color: var(--red); color: var(--red); }

/* ---- Than bai -------------------------------------------------------- */

.tw-prose { font-size: 17.5px; line-height: 1.72; }
.tw-prose > p { margin: 0 0 1.15em; }
.tw-prose a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
.tw-prose a:hover { color: var(--red-dk); }

.tw-prose h2 {
	font-family: var(--head); font-size: clamp( 22px, 2.6vw, 28px ); font-weight: 600;
	text-transform: uppercase; letter-spacing: -0.005em;
	margin: 1.8em 0 0.5em; padding-top: 10px; border-top: 1px solid var(--line);
	scroll-margin-top: 14px;
}
.tw-prose h3 { font-family: var(--head); font-size: 19px; font-weight: 500; margin: 1.4em 0 0.4em; scroll-margin-top: 14px; }

.tw-prose ul, .tw-prose ol { margin: 0 0 1.2em; padding-left: 0; }
.tw-prose ul > li, .tw-prose ol > li { position: relative; padding-left: 20px; margin-bottom: 0.45em; }
.tw-prose ul > li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px; background: var(--red); }
.tw-prose ol { counter-reset: tw; }
.tw-prose ol > li { counter-increment: tw; }
.tw-prose ol > li::before { content: counter(tw) "."; position: absolute; left: 0; top: 0; font-family: var(--head); font-weight: 600; color: var(--red); font-size: 14px; }

.tw-prose figure { margin: 1.5em 0; }
.tw-prose figure img { margin-inline: auto; background: var(--wash); padding: 10px; }
.tw-prose figcaption { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

.tw-prose blockquote { margin: 1.4em 0; padding-left: 16px; border-left: 4px solid var(--red); font-size: 19px; color: var(--ink-2); }

/* ---- Bang thong so ke soc -------------------------------------------- */

.tw-spec { margin: 1.3em 0; }
.tw-spec__t { width: 100%; border-collapse: collapse; font-size: 15px; }
.tw-spec__t th {
	text-align: left; width: 38%; padding: 9px 12px;
	font-family: var(--head); font-weight: 400; color: var(--ink-2);
	border-bottom: 1px solid var(--line-2); vertical-align: top;
}
.tw-spec__t td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); overflow-wrap: anywhere; }
.tw-spec__t tr:nth-child(odd) th, .tw-spec__t tr:nth-child(odd) td { background: var(--wash); }

.tw-spec__more { margin-top: 10px; }
.tw-spec__more > summary {
	cursor: pointer; list-style: none;
	font-family: var(--head); font-size: 13px; font-weight: 500;
	letter-spacing: 0.04em; text-transform: uppercase; color: var(--red);
}
.tw-spec__more > summary::-webkit-details-marker { display: none; }
.tw-spec__more > summary::after { content: " +"; }
.tw-spec__more[open] > summary::after { content: " \2212"; }
.tw-spec__more .tw-spec__t { margin-top: 8px; }
.tw-spec__fine { margin-top: 9px; font-size: 11.5px; color: var(--ink-3); }

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

/* Dem so lop duoc so sanh truoc so the, nen `.tw-prose ul > li::before`
   (0,1,3) van thang mot quy tac it lop hon. Phai ke du lop VA dat lai kich
   thuoc, khong thi o vuong do o tren de len. */
.tw-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); margin: 1.3em 0; }
.tw-pc__col { padding: 15px 17px; min-width: 0; }
.tw-pc__col--yes { border-right: 1px solid var(--line); }
.tw-pc__head {
	font-family: var(--head); font-size: 12px; font-weight: 600;
	letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 9px;
}
.tw-pc__col--yes .tw-pc__head { color: var(--green); }
.tw-pc__col--no .tw-pc__head { color: var(--red); }

.tw-prose .tw-pc__list { margin: 0; padding: 0; }
.tw-prose .tw-pc__list li { position: relative; padding-left: 23px; margin-bottom: 0.5em; font-size: 15px; line-height: 1.45; }
.tw-prose .tw-pc__col--yes .tw-pc__list li::before,
.tw-prose .tw-pc__col--no .tw-pc__list li::before {
	position: absolute; left: 0; top: 0;
	width: auto; height: auto; background: none;
	font-family: var(--head); font-weight: 600; font-size: 14px;
}
.tw-prose .tw-pc__col--yes .tw-pc__list li::before { content: "\2713"; color: var(--green); }
.tw-prose .tw-pc__col--no .tw-pc__list li::before { content: "\2715"; color: var(--red); }

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

.tw-faq { border-top: 1px solid var(--line); margin: 0.7em 0 1.3em; }
.tw-faq__item { border-bottom: 1px solid var(--line); }
.tw-faq__q {
	cursor: pointer; list-style: none; padding: 12px 30px 12px 0; position: relative;
	font-family: var(--head); font-size: 17px; font-weight: 500; line-height: 1.35;
}
.tw-faq__q::-webkit-details-marker { display: none; }
.tw-faq__q::after { content: "+"; position: absolute; right: 2px; top: 10px; font-family: var(--head); font-size: 21px; color: var(--red); line-height: 1; }
.tw-faq__item[open] > .tw-faq__q::after { content: "\2212"; }
.tw-faq__q:hover { color: var(--red); }
.tw-faq__a { padding-bottom: 12px; font-size: 16px; color: var(--ink-2); }
.tw-prose .tw-faq__a p { margin: 0 0 0.7em; }
.tw-prose .tw-faq__a p:last-child { margin-bottom: 0; }

/* ---- Trich dan nguoi mua --------------------------------------------- */

.tw-says { margin-block: 28px; }
.tw-says__t { font-family: var(--head); font-size: 21px; font-weight: 600; text-transform: uppercase; }
.tw-says__n { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; margin-bottom: 13px; }
.tw-says__one { margin: 0 0 13px; border-left: 3px solid var(--line); padding: 4px 0 4px 16px; }
.tw-says__one blockquote { margin: 0; font-size: 15.5px; line-height: 1.6; }
.tw-says__one blockquote::before { content: "\201C"; }
.tw-says__one blockquote::after { content: "\201D"; }
.tw-says__one figcaption { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-3); }
.tw-says__one figcaption b { color: var(--ink); }
.tw-says__one .is-ok { color: var(--green); font-weight: 600; }

/* ---- Tag cuoi bai ---------------------------------------------------- */

.tw-art__tags { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tw-art__tags > span { font-family: var(--head); font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.tw-art__tags a { text-decoration: none; border: 1px solid var(--line); padding: 4px 11px; font-family: var(--head); font-size: 13px; }
.tw-art__tags a:hover { border-color: var(--red); color: var(--red); }

/* ---- Man hinh hep ---------------------------------------------------- */

@media ( max-width: 1080px ) {
	.tw-art__grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; }
	.tw-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tw-hero__buy { grid-column: 1 / -1; }
}

@media ( max-width: 860px ) {
	.tw-art__grid { grid-template-columns: 1fr; gap: 26px; }
	.tw-hero { grid-template-columns: 1fr; }
	.tw-hero__buy { grid-column: auto; }
}

@media ( max-width: 560px ) {
	.tw-prose { font-size: 16.5px; }
	.tw-pc { grid-template-columns: 1fr; }
	.tw-pc__col--yes { border-right: 0; border-bottom: 1px solid var(--line); }
	.tw-spec__t th, .tw-spec__t td { display: block; width: auto; }
	.tw-spec__t th { padding-bottom: 0; border-bottom: 0; }
	.tw-buy__t, .tw-buy__t tbody, .tw-buy__t tr, .tw-buy__t th, .tw-buy__t td { display: block; text-align: left; }
	.tw-buy__go { padding-top: 10px; }
	.tw-buy__go a { width: 100%; text-align: center; }
}