/*
 * Site Cut List - kieu dang rieng cua trang bai.
 *
 * Cot chu rong 720px, tieu de muc chu slab co lon co duong ke duoi, va net
 * rieng cua site: CUT LIST - bang vat tu noi nhan voi tri so bang mot dong ke
 * cham thua, tri so canh phai theo cot.
 */

/* ------------------------------------------------------------------ */
/* Khung bai                                                           */
/* ------------------------------------------------------------------ */

.cl-art { padding: 26px 0 40px; }
.cl-art__in { max-width: var(--col); margin: 0 auto; padding: 0 16px; }

.cl-art__head { margin: 14px 0 26px; padding-bottom: 18px; border-bottom: 3px solid var(--rule); }

.cl-art__h {
	margin: 12px 0 0;
	font-size: clamp(30px, 6.4vw, 46px);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.cl-art__say {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted);
	border-left: 3px solid var(--line);
	padding-left: 12px;
}

.cl-art__tags {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.cl-art__tagl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--muted);
	margin-right: 4px;
}

/* ------------------------------------------------------------------ */
/* Van xuoi                                                            */
/* ------------------------------------------------------------------ */

.cl-body { font-size: 17px; line-height: 1.7; }
.cl-body p { margin: 0 0 1.15em; }
.cl-body ul,
.cl-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.cl-body li { margin-bottom: 0.4em; }
.cl-body strong { font-weight: 600; }

/*
 * Luat lien ket chung cua than bai. Do uu tien 0,1,1 - cao hon luat cua nut
 * mua (0,1,0) - nen ngay duoi day phai co luat rieng cho nut, neu khong chu
 * nut se lay mau son va trung voi chinh nen cua no.
 */
.cl-body a { color: var(--accent); }
.cl-body a:hover { text-decoration-thickness: 2px; }

/* Nut mua: chu trang, de doc tren nen son. Dung sua luat chung o tren. */
.cl-body a.cl-buy { color: #fff; }
.cl-body a.cl-buy:hover { color: #fff; }

/* Cac lien ket dong vai tro nut/nhan thi khong theo mau chu son. */
.cl-body a.cl-tag { color: #fff; }
.cl-body a.cl-tag:hover { color: #fff; }

.cl-body img { margin: 0 auto; }

.cl-body h3 {
	margin: 1.6em 0 0.5em;
	font-size: 21px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Tieu de muc: chu slab co lon, duong ke duoi                         */
/* ------------------------------------------------------------------ */

.cl-h2 {
	margin: 2em 0 0.6em;
	padding-bottom: 8px;
	font-size: clamp(24px, 4.6vw, 32px);
	font-weight: 700;
	line-height: 1.15;
	border-bottom: 3px solid var(--rule);
	scroll-margin-top: 16px;
}
.cl-h2--pick { margin-top: 0.35em; }
.cl-h2--job,
.cl-h2--tips { margin-top: 0.2em; }

/* ------------------------------------------------------------------ */
/* Phieu san pham                                                      */
/* ------------------------------------------------------------------ */

.cl-pick {
	margin: 38px 0;
	padding: 16px 16px 4px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 4px solid var(--ink);
	scroll-margin-top: 16px;
}

.cl-pick__plate {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
.cl-pick__n {
	font-family: var(--slab);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--accent);
}
.cl-pick__of {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}
.cl-pick__brand {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.cl-pick__shot { margin: 14px 0; }
.cl-pick__shot figcaption {
	margin-top: 6px;
	font-size: 12px;
	color: var(--muted);
	text-align: center;
}

.cl-shot--big { aspect-ratio: 3 / 2; border: 1px solid var(--line); background: #fff; }
.cl-shot--big img { padding: 10px; }

.cl-pick__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px 22px;
	margin: 14px 0;
}

.cl-pick__cta { margin: 16px 0 0; }

.cl-pick__body { margin-top: 18px; }
.cl-pick__body > :last-child { margin-bottom: 1em; }

/* ------------------------------------------------------------------ */
/* CUT LIST - net rieng cua site37                                     */
/* ------------------------------------------------------------------ */

.cl-cut {
	margin: 18px 0;
	padding: 14px 14px 10px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 5px solid var(--ink);
}

.cl-cut__lbl {
	margin: 0 0 8px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.26em;
	color: var(--muted);
}

.cl-cut__l { margin: 0; }

.cl-cut__r {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 4px 6px;
	min-width: 0;
}
.cl-cut__r:nth-child(odd) { background: rgba(28, 30, 24, 0.028); }

/*
 * Nhan ben trai. Chinh the dt la mot hop flex: chu nhan, roi mot o gia lam
 * dong ke cham dan sang phai. Lam dong ke bang mot hop nen chu khong bang
 * chuoi dau cham that - chuoi dau cham that khong cat dung cho khi doi chu,
 * va trinh doc man hinh se doc ca mot trang dau cham.
 */
.cl-cut__k {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 14px;
	color: var(--muted);
	overflow-wrap: anywhere;
}
.cl-cut__k::after {
	content: "";
	flex: 1 1 20px;
	min-width: 20px;
	height: 6px;
	background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
	background-size: 7px 7px;
	background-position: 0 50%;
	background-repeat: repeat-x;
}

/*
 * Tri so ben phai. Canh phai theo cot va dung chu dang so co dinh, de cac con
 * so o cac dong khac nhau thang hang doc tu tren xuong.
 *
 * flex: 0 1 auto (khong phai 0 0 auto) de o nay CO THE co lai khi nhan dai:
 * de no khong co lai thi o be ngang 375px ca dong bi day tran ra ngoai.
 */
.cl-cut__v {
	flex: 0 1 auto;
	min-width: 6rem;
	margin: 0;
	text-align: right;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

/*
 * Dong co tri so dai thi xep chong hai tang. Giu dong ke cham cho mot tri so
 * 60 ky tu thi o be ngang dien thoai se tran ngang.
 */
.cl-cut__r--wide { display: block; padding-block: 6px; }
.cl-cut__r--wide .cl-cut__k {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.cl-cut__r--wide .cl-cut__k::after { display: none; }
.cl-cut__r--wide .cl-cut__v {
	margin-top: 2px;
	text-align: left;
	min-width: 0;
	font-weight: 500;
}

.cl-cut__src {
	margin: 9px 0 0;
	font-size: 11px;
	color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Best for / Pros / Cons                                              */
/* ------------------------------------------------------------------ */

.cl-bestfor {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0 0 1.15em;
	padding: 9px 12px;
	background: rgba(77, 124, 15, 0.07);
	border-left: 4px solid var(--accent);
}
.cl-bestfor__k {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
.cl-bestfor__v { font-size: 15px; }

.cl-pc {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	margin: 0 0 1.15em;
}
@media (min-width: 560px) {
	.cl-pc { grid-template-columns: 1fr 1fr; gap: 16px; }
}
.cl-pc__c { border: 1px solid var(--line); padding: 10px 12px; background: var(--surface); }
.cl-pc__c--y { border-top: 3px solid var(--accent); }
.cl-pc__c--n { border-top: 3px solid var(--muted); }
.cl-pc__h {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.cl-pc ul { margin: 0; padding-left: 1.15em; font-size: 15px; }

/* ------------------------------------------------------------------ */
/* Phieu giao viec, bang so sanh, ghi chu, FAQ                         */
/* ------------------------------------------------------------------ */

.cl-job {
	margin: 26px 0 34px;
	padding: 14px 16px 6px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 5px solid var(--accent);
	scroll-margin-top: 16px;
}
.cl-job__lbl,
.cl-tips__lbl {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.26em;
	color: var(--muted);
}
.cl-job__b ul { padding-left: 1.2em; }
.cl-job__b li { margin-bottom: 0.7em; }

.cl-jump {
	display: inline-block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 2px solid var(--accent);
}

.cl-cmp { margin: 34px 0; scroll-margin-top: 16px; }

.cl-tips {
	margin: 34px 0;
	padding: 14px 16px 6px;
	background: rgba(138, 96, 57, 0.06);
	border: 1px solid var(--line);
	border-left: 5px solid var(--wood);
	scroll-margin-top: 16px;
}

.cl-faq { margin: 34px 0; scroll-margin-top: 16px; }
.cl-faq__lead { color: var(--muted); font-size: 15px; }
.cl-faq__i { border-bottom: 1px solid var(--line); }
.cl-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 12px 28px 12px 0;
	font-family: var(--slab);
	font-size: 18px;
	font-weight: 600;
	position: relative;
}
.cl-faq__q::-webkit-details-marker { display: none; }
.cl-faq__q::after {
	content: "+";
	position: absolute;
	right: 2px;
	top: 10px;
	font-family: var(--sans);
	font-size: 20px;
	color: var(--accent);
}
.cl-faq__i[open] .cl-faq__q::after { content: "\2212"; }
.cl-faq__a { padding-bottom: 6px; font-size: 16px; }
.cl-faq__a > :last-child { margin-bottom: 0.6em; }

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

/* Bang so sanh rong hon man hinh 375px; o cuon giu ca trang khoi bi keo ngang. */
.cl-tw {
	overflow-x: auto;
	margin: 0 0 1.15em;
	border: 1px solid var(--line);
	background: var(--surface);
}
.cl-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 480px;
}
.cl-body th,
.cl-body td {
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}
.cl-body th {
	background: rgba(28, 30, 24, 0.04);
	font-family: var(--slab);
	font-weight: 600;
	white-space: nowrap;
}
.cl-body tr:last-child td { border-bottom: 0; }
.cl-body th:last-child,
.cl-body td:last-child { border-right: 0; }

/* ------------------------------------------------------------------ */
/* Dien thoai                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.cl-body { font-size: 16px; }
	.cl-pick { padding: 12px 12px 4px; }
	.cl-cut { padding: 12px 12px 9px; }
	.cl-cut__v { min-width: 4.6rem; font-size: 13px; }
	.cl-cut__k { font-size: 13px; }
	.cl-cut__r { padding-inline: 4px; }
	.cl-job,
	.cl-tips { padding: 12px 12px 4px; }
}