/*
 * Kieu dang rieng cho trang bai cua site26.
 *
 * Hai thu dac trung o day:
 *   - MUC LUC NOI ben trai tu 1080px; duoi nguong do no bien thanh nut tron
 *     noi o goc phai duoi.
 *   - HANG CHIP duoi moi tieu de model: chip dau mau ghi ("Best for ..."), cac
 *     chip sau mau xanh rat nhat (thong so doc tu trang ban hang).
 *
 * Chi nap o trang bai (xem cr_assets() trong functions.php).
 */

/* ------------------------------------------------------------------ */
/* Dau bai                                                             */
/* ------------------------------------------------------------------ */

/*
 * Hep hon var(--wrap) mot chut: 1060 - 32 dem - 236 cot muc luc - 30 khe = 762,
 * dung bang be rong doc thoai mai cua than bai. De nguyen 1200 thi cot phai
 * rong 900 ma chu chi chiem 760, thua ra mot mang trong lech han sang phai.
 */
.article { max-width: 1060px; margin: 0 auto; padding: 22px 16px 60px; }

.lede { max-width: 860px; }
.lede__h {
	margin: 12px 0 0;
	font-size: clamp(27px, 5.6vw, 44px);
	letter-spacing: -.025em;
}
.lede__fig {
	margin: 22px 0 0;
	border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; background: var(--surface);
}
.lede__fig img { width: 100%; max-height: 460px; object-fit: contain; padding: 18px; }

.lede__facts {
	margin-top: 18px;
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.lede__fact {
	margin: 0; padding: 12px 14px;
	background: var(--surface); border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-s) var(--radius-s) 0;
	display: flex; align-items: baseline; gap: 9px;
}
.lede__fact b { font-family: var(--display); font-size: 22px; line-height: 1; color: var(--accent-ink); }
.lede__fact span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ------------------------------------------------------------------ */
/* Luoi: muc luc noi ben trai + than bai                               */
/* ------------------------------------------------------------------ */

/*
 * min-width:0 tren moi o cua luoi: mac dinh mot o luoi khong co phep hep hon
 * noi dung nho nhat cua no, nen bang so sanh 580px se day ca trang rong ra va
 * o 375px sinh ra thanh cuon ngang toan trang.
 */
.article__grid { display: grid; gap: 30px; margin-top: 34px; }
.article__grid > * { min-width: 0; }
.article__side { display: none; }

@media (min-width: 1080px) {
	.article__grid { grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
	.article__side { display: block; position: sticky; top: 104px; }
}

.toc__t {
	margin: 0;
	font-family: var(--display); font-size: 11.5px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.toc__l { list-style: none; margin: 12px 0 0; padding: 0 0 0 2px; border-left: 2px solid var(--line); }
.toc__l li { margin: 0; }
.toc__l a {
	display: block; padding: 6px 0 6px 13px;
	margin-left: -2px; border-left: 2px solid transparent;
	font-size: 13.5px; line-height: 1.35; color: var(--muted); text-decoration: none;
}
.toc__l a:hover { color: var(--ink); border-left-color: var(--accent); }
.toc__l .is-deep a { padding-left: 24px; font-size: 12.5px; }
.toc__l .is-top a { font-weight: 500; color: var(--ink); }

/* Nut tron noi - chi duoi 1080px. */
.fab { position: fixed; right: 14px; bottom: 14px; z-index: 50; }
@media (min-width: 1080px) { .fab { display: none; } }

.fab > summary {
	list-style: none; cursor: pointer;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 6px 20px rgba(14, 17, 22, .25);
	display: grid; place-items: center;
}
.fab > summary::-webkit-details-marker { display: none; }
.fab__b, .fab__b::before, .fab__b::after {
	display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff;
}
.fab__b { position: relative; }
.fab__b::before { content: ""; position: absolute; top: -6px; width: 14px; }
.fab__b::after { content: ""; position: absolute; top: 6px; width: 10px; }
.fab[open] > summary { background: var(--ink); }

.fab__p {
	position: absolute; right: 0; bottom: 62px;
	width: min(80vw, 300px); max-height: 62vh; overflow-y: auto;
	padding: 14px 16px;
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 14px 34px rgba(14, 17, 22, .18);
}

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

.article-body { max-width: 760px; min-width: 0; font-size: 17px; line-height: 1.72; }

/*
 * Bang nao khong duoc cr_lineup_pass() boc (bai viet kieu khac) thi tu no
 * thanh mot hop cuon ngang, de khong bao gio co bang lam tran trang.
 */
.article-body table:not(.lineup__t) {
	display: block; overflow-x: auto; max-width: 100%;
	border-collapse: collapse; font-size: 14px;
}
.article-body table:not(.lineup__t) td,
.article-body table:not(.lineup__t) th {
	border: 1px solid var(--line); padding: 9px 11px; text-align: left;
}
.article-body p { margin: 0 0 1.15em; }
.article-body > p:first-child { font-size: 18.5px; color: #2a313c; }
.article-body a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.article-body ul, .article-body ol { margin: 0 0 1.3em; padding-left: 22px; }
.article-body li { margin-bottom: .5em; }

.cr-h2 {
	margin: 2.2em 0 .65em;
	font-size: clamp(21px, 4.2vw, 28px);
	letter-spacing: -.015em;
	scroll-margin-top: 110px;
}
.cr-h2::before {
	content: ""; display: block;
	width: 34px; height: 3px; margin-bottom: 12px;
	border-radius: 3px; background: var(--accent);
}

.cr-model {
	margin: 2.1em 0 0;
	font-size: clamp(18px, 3.6vw, 22px);
	letter-spacing: -.01em;
	scroll-margin-top: 110px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.cr-fine {
	margin: 14px 0 0;
	font-size: 12.5px; line-height: 1.5; color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Hang chip - nuoc di rieng                                           */
/* ------------------------------------------------------------------ */

.chips {
	list-style: none;
	margin: 12px 0 18px !important;
	padding: 0 !important;
	display: flex; flex-wrap: wrap; gap: 6px;
}
.chips .chip {
	margin: 0;
	display: inline-flex; align-items: baseline; gap: 6px;
	max-width: 100%;
	padding: 5px 11px; border-radius: 999px;
	border: 1px solid var(--line); background: var(--surface);
	font-size: 12.5px; line-height: 1.4;
}
.chip__k {
	flex: 0 0 auto;
	font-family: var(--display); font-size: 10.5px; font-weight: 600;
	letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.chip__v { min-width: 0; color: var(--ink); }

/* Chip "Best for ..." - mau ghi, tach han khoi cac chip thong so mau xanh. */
.chips .chip--for {
	background: #eef1f4; border-color: #e0e5ea;
	font-size: 13px;
}
.chip--for .chip__k { color: #46505e; }

/* Dong "Best for" thu hai cua mot khoi (bai nao co) - giu nguyen cho. */
.cr-bf { margin: 0 0 1em; color: var(--muted); font-size: 15.5px; }

/* ------------------------------------------------------------------ */
/* Bang so sanh "Lineup at a Glance"                                   */
/* ------------------------------------------------------------------ */

.lineup { margin: 20px 0 26px; }
.lineup__s {
	border: 1px solid var(--line); border-radius: var(--radius);
	overflow-x: auto;
}
.lineup__t { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.lineup__t th, .lineup__t td {
	padding: 11px 13px; text-align: left; vertical-align: top;
	border-bottom: 1px solid var(--line);
}
/*
 * Tieu de cot KHONG duoc nowrap: "Standout Hardware Features" mot dong se keo
 * cot rong ra va bang bon cot luc nao cung phai cuon, ke ca tren man hinh rong.
 */
.lineup__t th {
	background: var(--surface);
	font-family: var(--display); font-size: 11px; font-weight: 600;
	letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.lineup__t tbody tr:last-child td { border-bottom: 0; }
.lineup__t td:first-child { font-weight: 600; min-width: 180px; }
.lineup__j { color: var(--accent-ink); text-decoration: none; }
.lineup__j:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Uu / nhuoc                                                          */
/* ------------------------------------------------------------------ */

.pc { display: grid; gap: 12px; margin: 16px 0 20px; }
@media (min-width: 620px) { .pc { grid-template-columns: 1fr 1fr; } }

.pc__c { padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pc__c--n { background: var(--warn-soft); border-color: var(--warn-line); }
.pc__c p { margin: 0 0 6px; }
.pc__c p strong {
	font-family: var(--display); font-size: 11.5px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
}
.pc__c--n p strong { color: #9a5a33; }
.pc__c ul { margin: 0 !important; padding-left: 18px !important; font-size: 14.5px; }
.pc__c li { margin-bottom: .35em; }

/* ------------------------------------------------------------------ */
/* Anh san pham + thanh mua                                            */
/* ------------------------------------------------------------------ */

.shot, .article-body figure {
	margin: 20px 0 0;
	border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
	border-bottom: 0;
	overflow: hidden; background: var(--surface);
}
.article-body figure img { width: 100%; max-height: 400px; object-fit: contain; padding: 16px; }
.article-body figcaption {
	padding: 9px 14px; border-top: 1px solid var(--line);
	background: var(--bg);
	font-size: 12.5px; color: var(--muted);
}

.buy {
	margin: 0 0 22px;
	padding: 12px 14px;
	border: 1px solid var(--line); border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--bg);
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.buy__m { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.buy__go { margin: 0 !important; margin-left: auto !important; }

.buy__go--inline {
	margin: 0 0 1.3em !important;
	display: block;
}

/* ------------------------------------------------------------------ */
/* FAQ va muc huong dan chon may                                       */
/* ------------------------------------------------------------------ */

.faq { margin: 8px 0 0; border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i > summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 15px 38px 15px 0;
	font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.4;
}
.faq__i > summary::-webkit-details-marker { display: none; }
.faq__i > summary::after {
	content: "+"; position: absolute; right: 6px; top: 50%;
	transform: translateY(-50%);
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--accent-soft); color: var(--accent-ink);
	display: grid; place-items: center;
	font-size: 16px; font-weight: 600; line-height: 1;
}
.faq__i[open] > summary::after { content: "\2013"; }
.faq__a { padding: 0 0 6px; font-size: 16px; }
.faq__a p:last-child { margin-bottom: 1em; }

.picks { list-style: none; margin: 16px 0 22px !important; padding: 0 !important; display: grid; gap: 10px; }
.picks li {
	margin: 0; padding: 11px 15px;
	background: var(--surface);
	border: 1px solid var(--line); border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-s) var(--radius-s) 0;
	font-size: 15.5px;
}
.picks li strong {
	display: block; margin-bottom: 3px;
	font-family: var(--display); font-size: 14px; color: var(--accent-ink);
}

/* ------------------------------------------------------------------ */
/* Duoi bai                                                            */
/* ------------------------------------------------------------------ */

.tags { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.tags__t {
	margin: 0 0 10px;
	font-family: var(--display); font-size: 11.5px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags a {
	display: block; padding: 6px 13px;
	border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
	font-size: 13px; text-decoration: none;
}
.tags a:hover { border-color: var(--accent); color: var(--accent-ink); }

.more { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.more__h { margin: 0 0 20px; font-size: clamp(20px, 3.4vw, 25px); }
.more__h::after {
	content: ""; display: block; width: 40px; height: 3px;
	margin-top: 7px; border-radius: 3px; background: var(--accent);
}

/* Trang tinh dung chung than bai nhung khong co muc luc. */
.article--page .article-body { margin-top: 26px; }

/*
 * Chu trong nut mua.
 *
 * Luat `.article-body a` co do uu tien 0,1,1, cao hon luat `.btn` (0,1,0),
 * nen neu khong co dong nay thi chu nut lay mau nhan - dung bang mau
 * nen cua chinh no, va nut thanh mot khoi mau dac khong doc duoc chu.
 * Do duoc truoc khi sua: tuong phan 1,00.
 */
.article-body a.btn { color: #fff; }