/*
 * Site Lightbox - kieu dang trang bai.
 *
 * Trong tam la khoi `.shot`: dai anh doi duoc bang input[type=radio]. Khong co
 * mot dong JavaScript nao - moi viec doi anh nam o bo chon `~` duoi day.
 */

.article {
	max-width: calc(var(--art) + var(--gut) * 2);
	margin: 0 auto;
	padding: 26px var(--gut) 10px;
}

.art-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.art-eye { margin: 6px 0 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.art-title { font-size: 46px; }
.art-meta { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 13px; }

.article-body { font-size: 17px; line-height: 1.75; }
.article-body p { margin: 0 0 1.05em; }
.article-body a { text-decoration: underline; text-underline-offset: 2px; }
.article-body strong { font-weight: 600; }
.article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.article-body li { margin-bottom: 0.4em; }

.article-body h2.sec {
	font-size: 31px;
	margin: 2.1em 0 0.7em;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	scroll-margin-top: 110px;
}
.article-body h2.sec:first-child { margin-top: 0.4em; }
.sec-no {
	display: inline-block;
	font-family: var(--sans);
	font-size: 13px; font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--accent);
	vertical-align: 4px;
	margin-right: 10px;
}
.article-body h3 { font-size: 23px; margin: 1.7em 0 0.5em; }

/* Muc mo dau la bang so sanh - vach tren mau xanh cho khac cac muc con lai. */
.article-body h2.sec-intro { border-top-color: var(--accent); border-top-width: 2px; }

/* FAQ: cau hoi nho hon, co vach ben trai, tra loi thut vao cho de doc luot. */
.article-body h3.faq-q {
	font-family: var(--sans);
	font-size: 17px; font-weight: 600;
	line-height: 1.4;
	margin: 1.5em 0 0.4em;
	padding-left: 14px;
	border-left: 3px solid var(--accent);
}
.article-body h3.faq-q + p { padding-left: 17px; color: var(--muted); }

/* ---------------------------------------------------------------- */
/* Dai anh doi duoc - nuoc di rieng cua site nay                     */
/* ---------------------------------------------------------------- */

.block-head { margin: 0 0 22px; }

.shot { position: relative; }

/*
 * O chon phai o trong luong bo cuc de nhan duoc phim Tab, nen khong dung
 * display:none. Dat tuyet doi va trong suot: van bam Tab toi duoc, van doc
 * duoc bang trinh doc man hinh, ma khong chiem cho.
 */
.shot-pick {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.shot-stage {
	background: var(--stage);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 26px;
}
.shot-frame {
	display: none;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.shot-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 8px;
	margin-top: 8px;
}
.shot-thumb {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 8px;
	cursor: pointer;
}
.shot-thumb:hover { border-color: var(--accent); }
.shot-thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }

/* Anh dang chon: khung lon hien tam thu k, anh nho thu k duoc vien mau. */
.shot-pick:nth-of-type(1):checked ~ .shot-stage .shot-frame-1,
.shot-pick:nth-of-type(2):checked ~ .shot-stage .shot-frame-2,
.shot-pick:nth-of-type(3):checked ~ .shot-stage .shot-frame-3,
.shot-pick:nth-of-type(4):checked ~ .shot-stage .shot-frame-4 { display: block; }

.shot-pick:nth-of-type(1):checked ~ .shot-strip .shot-thumb:nth-child(1),
.shot-pick:nth-of-type(2):checked ~ .shot-strip .shot-thumb:nth-child(2),
.shot-pick:nth-of-type(3):checked ~ .shot-strip .shot-thumb:nth-child(3),
.shot-pick:nth-of-type(4):checked ~ .shot-strip .shot-thumb:nth-child(4) {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
	background: var(--accent-soft);
}

/* Vien khi di chuyen bang ban phim - o chon that thi trong suot nen phai ve lai. */
.shot-pick:nth-of-type(1):focus-visible ~ .shot-strip .shot-thumb:nth-child(1),
.shot-pick:nth-of-type(2):focus-visible ~ .shot-strip .shot-thumb:nth-child(2),
.shot-pick:nth-of-type(3):focus-visible ~ .shot-strip .shot-thumb:nth-child(3),
.shot-pick:nth-of-type(4):focus-visible ~ .shot-strip .shot-thumb:nth-child(4) {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.shot-cap {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}
.shot-src { display: block; font-size: 12px; opacity: 0.85; }

/* ---------------------------------------------------------------- */
/* Hang so lieu duoi dai anh                                         */
/* ---------------------------------------------------------------- */

.factbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: 14px;
}
.buy {
	display: inline-block;
	background: var(--accent); color: #fff;
	font-size: 14px; font-weight: 600;
	padding: 8px 16px;
	border-radius: var(--r);
	margin-left: auto;
}
.buy:hover { background: #084b8a; text-decoration: none; }

/* ---------------------------------------------------------------- */
/* Doan dac trung cua bai                                            */
/* ---------------------------------------------------------------- */

.article-body p.bestfor {
	background: var(--accent-soft);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--r) var(--r) 0;
	padding: 11px 16px;
	font-size: 16px;
}
.article-body p.bestfor strong { color: var(--accent); }

.article-body p.listhead {
	margin: 1.3em 0 0.35em;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.article-body p.listhead strong { font-weight: 700; }

.article-body p.listhead + ul { list-style: none; padding-left: 0; }
.article-body p.listhead + ul li { position: relative; padding-left: 22px; }
.article-body p.listhead + ul li::before {
	position: absolute; left: 2px; top: 0;
	font-weight: 700;
}
.article-body p.listhead-pros + ul li::before { content: "+"; color: #1d6f42; }
.article-body p.listhead-cons + ul li::before { content: "\2212"; color: var(--warm); }

/* ---------------------------------------------------------------- */
/* Bang so sanh                                                      */
/* ---------------------------------------------------------------- */

.sheet { margin: 22px 0 26px; }
.sheet-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
}
.sheet table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.45;
}
.sheet th, .sheet td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
}
.sheet thead th {
	font-family: var(--sans);
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--muted);
	background: var(--bg);
	white-space: nowrap;
}
.sheet tbody tr:last-child th, .sheet tbody tr:last-child td { border-bottom: 0; }
.sheet tbody td:first-child, .sheet tbody th:first-child {
	position: sticky; left: 0;
	background: var(--surface);
	font-weight: 600;
	border-right: 1px solid var(--line);
}
.sheet thead th:first-child { position: sticky; left: 0; background: var(--bg); border-right: 1px solid var(--line); }
.sheet-hint { margin: 7px 0 0; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- */
/* The figure con lai trong bai                                      */
/* ---------------------------------------------------------------- */

.article-body figure {
	margin: 1.4em 0;
	background: var(--stage);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 20px;
}
.article-body figure img { max-width: 520px; margin: 0 auto; }
.article-body figcaption { margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- */
/* Chan bai                                                          */
/* ---------------------------------------------------------------- */

.art-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.art-source { font-size: 13px; color: var(--muted); }
.art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.art-tags-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.art-tags a {
	font-size: 13px;
	padding: 4px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
}
.art-tags a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.article-page .article-body { font-size: 17px; }

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

@media (max-width: 620px) {
	.art-title { font-size: 33px; }
	.article-body { font-size: 16px; }
	.article-body h2.sec { font-size: 25px; }
	.article-body h3 { font-size: 20px; }
	.shot-stage { padding: 16px; }
	.shot-strip { gap: 6px; }
	.shot-thumb { padding: 5px; }
	.buy { margin-left: 0; width: 100%; text-align: center; }
	.article-body figure { padding: 14px; }
}