/*
 * Kieu dang cho nhung khoi do inc/article.php dung ra trong than bai.
 *
 * Chi nap o trang bai. Khong co JavaScript o day: the details va CSS thuan lo
 * het phan dong mo.
 */

/* ------------------------------------ nua thu nhat cua bang thong so ----- */

.gr-strip {
	display: grid; gap: 8px; margin: 0 0 14px;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.gr-strip__cell {
	display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
	aspect-ratio: 1 / 1; padding: 13px;
	background: var(--tint); border: 1px solid var(--line);
	overflow-wrap: anywhere;
}
.gr-strip__k {
	margin: 0; font-size: 10.5px; font-weight: 600; line-height: 1.3;
	letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark);
}
.gr-strip__v {
	margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.2;
	font-weight: 600; color: var(--ink);
}

.gr-specnote { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.gr-specnote p { margin: 0 0 .6em; }
.gr-specnote p:last-child { margin-bottom: 0; }

/* ------------------------------------- nua thu hai: the "Full spec sheet" */

.gr-sheet { border: 1px solid var(--line); background: var(--surface); margin: 0 0 26px; }
.gr-sheet > summary {
	list-style: none; cursor: pointer; padding: 12px 14px;
	font-size: 13px; font-weight: 600; letter-spacing: .04em;
	display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
}
.gr-sheet > summary::-webkit-details-marker { display: none; }
.gr-sheet > summary::after { content: "+"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--accent); }
.gr-sheet[open] > summary::after { content: "\2212"; }
.gr-sheet > summary p { display: inline; margin: 0; }
.gr-sheet > summary:hover { background: var(--tint); }
.gr-sheet__n { font-weight: 400; color: var(--muted); font-size: 12px; letter-spacing: 0; }
.gr-sheet__wrap { border-top: 1px solid var(--line); overflow-x: auto; }
.article-body .gr-sheet__t { font-size: 14px; }
.article-body .gr-sheet__t td { border: 0; border-bottom: 1px solid var(--line); padding: 9px 14px; }
.article-body .gr-sheet__t tr:last-child td { border-bottom: 0; }
.article-body .gr-sheet__k { width: 42%; color: var(--muted); }
.article-body .gr-sheet__v { font-weight: 500; }

/* ---------------------------------------------- hop muc luc "Start here" - */

.gr-start { border: 1px solid var(--ink); background: var(--surface); padding: 16px 18px; margin: 6px 0 30px; }
.gr-start__head {
	margin: 0 0 10px; font-family: var(--display); font-size: 21px; font-weight: 700;
}
.gr-start__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.gr-start__list li { margin: 0; border-top: 1px dashed var(--line); }
.gr-start__list li:first-child { border-top: 0; }
.gr-start__list a {
	display: flex; gap: 10px; align-items: baseline;
	padding: 7px 0; text-decoration: none; color: var(--ink); font-size: 15px;
}
.gr-start__list a:hover .gr-start__t { text-decoration: underline; color: var(--accent-dark); }
.gr-start__n {
	flex: 0 0 auto; width: 22px; font-size: 11px; font-weight: 700;
	color: var(--accent); font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- cac muc h2 --- */

.gr-sec { margin: 0 0 1.4em; }
.gr-sec > :last-child { margin-bottom: 0; }

/*
 * Bai o site nay khong con bang nao ngoai bang thong so (da do tren 80 bai),
 * nhung neu mot bai le co bang rong thi cho no tu cuon ngang - o be ngang
 * 375px mot bang ba cot du de day ca trang tran ra ngoai.
 */
.gr-sec table { display: block; max-width: 100%; overflow-x: auto; }

.article-body h2 { scroll-margin-top: 14px; padding-top: .1em; }

.gr-sec--intro ul {
	list-style: none; padding-left: 0; margin: 0 0 1.15em;
	border-top: 1px solid var(--line);
}
.gr-sec--intro li {
	position: relative; padding: 9px 0 9px 26px;
	border-bottom: 1px solid var(--line); margin: 0; font-size: 16px;
}
.gr-sec--intro li::before {
	content: ""; position: absolute; left: 4px; top: 17px;
	width: 8px; height: 8px; background: var(--accent);
}

.gr-sec--verdict {
	border-left: 3px solid var(--accent); background: var(--surface);
	border-top: 1px solid var(--line); border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line); padding: 16px 18px;
}

/* ------------------------------------------------------- hang anh san pham */

.gr-shots { margin: 0 0 1.3em; }
.gr-shots__row { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.gr-shots__cell {
	display: block; aspect-ratio: 1 / 1; background: var(--surface);
	border: 1px solid var(--line); padding: 8px; overflow: hidden;
}
.gr-shots__cell img { width: 100%; height: 100%; object-fit: contain; }
.gr-shots figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; }

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

.gr-pc { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0 0 1.2em; }
.gr-pc__col { border: 1px solid var(--line); background: var(--surface); padding: 14px 16px; }
.gr-pc__col--pro { border-top: 3px solid var(--accent); }
.gr-pc__col--con { border-top: 3px solid var(--muted); }
.gr-pc__h,
.article-body .gr-pc h3 {
	margin: 0 0 8px; font-family: var(--body); font-size: 11px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.gr-pc__col--pro .gr-pc__h,
.gr-pc__col--pro h3 { color: var(--accent-dark); }
.gr-pc ul { margin: 0; padding-left: 1.1em; font-size: 15px; }
.gr-pc li { margin-bottom: .45em; }
.gr-pc li:last-child { margin-bottom: 0; }

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

.gr-q { border-bottom: 1px solid var(--line); }
.gr-q:first-of-type { border-top: 1px solid var(--line); }
.gr-q > summary {
	list-style: none; cursor: pointer; padding: 13px 28px 13px 0; position: relative;
	font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.3;
}
.gr-q > summary::-webkit-details-marker { display: none; }
.gr-q > summary p { display: inline; margin: 0; }
.gr-q > summary::after {
	content: "+"; position: absolute; right: 2px; top: 11px;
	font-family: var(--body); font-size: 20px; color: var(--accent);
}
.gr-q[open] > summary::after { content: "\2212"; }
.gr-q > summary:hover { color: var(--accent-dark); }
.gr-q__a { padding: 0 0 10px; font-size: 16px; }
.gr-q__a > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- man hinh hep */

@media (max-width: 420px) {
	.gr-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gr-strip__v { font-size: 17px; }
	.gr-shots__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}