/*
 * Site Spec Sheet - kieu dang rieng cho trang bai.
 *
 * Chi nap o trang bai. Phan dung chung voi trang tinh (.article, .article-body,
 * bang cua chinh bai) nam trong main.css.
 */

/* ---------------------------------------------------------------- */
/* Dai so lieu dau bai                                               */
/* ---------------------------------------------------------------- */

.art-facts {
	display: grid; gap: 0; margin: 16px 0 0;
	grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
	border: 1px solid var(--line);
}
.art-fact { padding: 8px 11px; border-right: 1px solid var(--line); }
.art-fact:last-child { border-right: 0; }
.art-facts dt {
	font-family: var(--mono); font-size: 10px; color: var(--muted);
	text-transform: uppercase; letter-spacing: .07em; line-height: 1.35;
}
.art-facts dd {
	margin: 3px 0 0; font-family: var(--mono); font-size: 18px;
	white-space: nowrap; overflow-x: auto;
}
.art-facts-note {
	margin: 7px 0 0;
	font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.45;
}

/* ---------------------------------------------------------------- */
/* Anh trong bai                                                     */
/* ---------------------------------------------------------------- */

.article-body figure {
	margin: 0 0 16px; max-width: 320px;
	border: 1px solid var(--line); background: var(--surface); padding: 9px;
}
.article-body figure img { margin: 0 auto; max-height: 250px; width: auto; }
.article-body figcaption {
	margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line);
	font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.4;
}

@media (min-width: 820px) {
	.article-body figure { float: right; width: 270px; margin: 4px 0 14px 22px; }
}

/* ---------------------------------------------------------------- */
/* "Best for" va cap Pros / Cons cua tung model                      */
/* ---------------------------------------------------------------- */

.article-body .ss-bestfor {
	clear: both;
	background: var(--tint); border-left: 3px solid var(--accent);
	padding: 8px 12px; margin: 0 0 1em;
	font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
}
.article-body .ss-bestfor strong {
	text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px;
	color: var(--accent); font-weight: 600;
}

.ss-pc {
	clear: both; display: grid; gap: 0; margin: 0 0 1.2em;
	border: 1px solid var(--line);
}
@media (min-width: 680px) { .ss-pc { grid-template-columns: 1fr 1fr; } }
.ss-pc-col { padding: 10px 13px; }
.ss-pc-pro { border-bottom: 1px solid var(--line); }
@media (min-width: 680px) {
	.ss-pc-pro { border-bottom: 0; border-right: 1px solid var(--line); }
}
.article-body .ss-pc-h {
	margin: 0 0 6px;
	font-family: var(--mono); font-size: 10.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .09em;
}
.ss-pc-pro .ss-pc-h { color: var(--accent); }
.ss-pc-con .ss-pc-h { color: var(--muted); }
.article-body .ss-pc ul { margin: 0; padding-left: 17px; font-size: 14px; }
.article-body .ss-pc li { margin-bottom: .25em; }

/* ---------------------------------------------------------------- */
/* NUOC DI: bang thong so day du cua tung model                      */
/* ---------------------------------------------------------------- */

.ss-card {
	clear: both; border: 1px solid var(--line);
	margin: 0 0 1.8em; background: var(--bg);
}

.ss-card-bar {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 10px; flex-wrap: wrap;
	background: var(--tint); border-bottom: 1px solid var(--line);
	padding: 6px 11px;
	font-family: var(--mono); font-size: 10.5px;
	text-transform: uppercase; letter-spacing: .07em;
}
.ss-card-tag { color: var(--accent); font-weight: 600; }
.ss-card-n { background: var(--accent); color: #fff; padding: 2px 5px; margin-right: 3px; }
.ss-card-asin { color: var(--muted); }

.ss-figs {
	display: grid; gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(134px, 1fr));
	border-bottom: 1px solid var(--line);
}
.ss-fig { padding: 8px 11px; border-right: 1px solid var(--line-soft); }
.ss-fig:last-child { border-right: 0; }
.ss-fig-k {
	display: block; font-family: var(--mono); font-size: 10px; color: var(--muted);
	text-transform: uppercase; letter-spacing: .07em; line-height: 1.35;
}
.ss-fig-v {
	display: block; margin-top: 2px;
	font-family: var(--mono); font-size: 18px; font-weight: 500;
	font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ss-fig-word { font-size: 14px; }
.ss-fig-u { font-size: 11px; color: var(--muted); font-weight: 400; }
.ss-fig-n {
	display: block; margin-top: 3px;
	font-family: var(--mono); font-size: 10px; color: var(--muted); line-height: 1.35;
}

/* Bang trong the: KHONG co vien ngoai, vien da nam o chinh the roi. */
.ss-card .ss-scroll { border: 0; margin: 0; }
.article-body table.ss-spec { min-width: 0; font-size: 12.5px; }
.article-body table.ss-spec th[scope="row"] {
	width: 38%; background: #fafbfd; color: var(--muted);
	text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500;
	border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
	padding: 6px 11px;
}
.article-body table.ss-spec td { padding: 6px 11px; }

.ss-more { border-top: 1px solid var(--line); }
.ss-more > summary {
	cursor: pointer; padding: 7px 11px; background: var(--surface); color: var(--accent);
	font-family: var(--mono); font-size: 11px;
	text-transform: uppercase; letter-spacing: .06em;
	list-style-position: inside;
}
.ss-more > summary:hover { background: var(--tint); }
.ss-more[open] > summary { border-bottom: 1px solid var(--line); }

.article-body .ss-card-note {
	margin: 0; padding: 7px 11px; border-top: 1px solid var(--line);
	font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.45;
}
/*
 * Lien ket mua la NUT, khong phai mot chu lan trong dong chu thich.
 *
 * Do duoc truoc khi sua: khong nen, khong vien, chu xam 10,5px - tuc la cho
 * de bam vao lai mo nhat trang. Nay la mot o mau dac cua site voi chu trang:
 * tuong phan 8,6. Van nam nguyen trong dong van ban, khong doi HTML.
 */
.ss-card-link {
	white-space: nowrap;
	display: inline-block;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 4px 10px;
	margin-left: 4px;
}

.article-body a.ss-card-link { color: #fff; }
.ss-card-link:hover { background: var(--ink); }

/* ---------------------------------------------------------------- */
/* NUOC DI: bang tong hop cuoi bai                                   */
/* ---------------------------------------------------------------- */

.ss-group { clear: both; margin: 2.4em 0 0; border-top: 3px solid var(--ink); padding-top: 14px; }
.article-body .ss-group-h {
	font-size: 21px; margin: 0 0 6px; border-top: 0; padding-top: 0;
}
.article-body .ss-group-lede {
	margin: 0 0 12px; color: var(--muted); font-size: 14px; max-width: 70ch;
}
.ss-scroll-group { border: 1px solid var(--line); }

.article-body table.ss-group-table { font-size: 12px; }
.article-body table.ss-group-table thead th {
	background: var(--surface); border-bottom: 2px solid var(--ink);
	padding: 8px 10px; font-size: 10.5px; letter-spacing: .05em;
	white-space: normal; min-width: 116px; vertical-align: bottom;
}
.article-body table.ss-group-table thead th a { color: var(--accent); text-decoration: none; }
.article-body table.ss-group-table thead th a:hover { text-decoration: underline; }
.ss-col-n { color: var(--muted); font-weight: 500; }

/*
 * Cot nhan dinh o le trai khi keo ngang: bang sau model rong hon man hinh, ma
 * cuon di mat cot nhan thi cac o so con lai khong con biet la so cua gi.
 */
.article-body table.ss-group-table th[scope="row"],
.article-body table.ss-group-table th.ss-corner {
	position: sticky; left: 0; z-index: 1;
	background: var(--bg); text-align: left;
	text-transform: none; letter-spacing: 0;
	font-size: 11.5px; font-weight: 500; color: var(--ink);
	border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-soft);
	padding: 8px 10px; min-width: 146px;
}
.article-body table.ss-group-table th.ss-corner {
	background: var(--surface); color: var(--muted);
	text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px;
}
.ss-rowhint {
	display: block; margin-top: 2px;
	font-family: var(--mono); font-size: 9.5px; color: var(--muted);
	text-transform: none; letter-spacing: 0; line-height: 1.3;
}
.article-body table.ss-group-table td { padding: 8px 10px; }
.article-body table.ss-group-table tbody tr:hover td { background: #f8fafc; }

.article-body .ss-group-note {
	margin: 7px 0 0;
	font-family: var(--mono); font-size: 10.5px; color: var(--muted); line-height: 1.45;
}

@media (max-width: 520px) {
	.article-body figure { max-width: 100%; }
	.ss-fig-v { font-size: 16px; }
	.art-facts dd { font-size: 16px; }
}