/*
 * Site One Pick - kieu dang trang bai. Chi nap o trang bai.
 *
 * Bo cuc: mot cot 640px, khong cot ben, khong muc luc noi. Tren cung la tieu
 * de, roi VACH VANG (diem mau duy nhat cua trang, in tu single.php), roi hop
 * "Our pick" - hop nay do bo loc the_content dung ra, xem inc/article.php.
 *
 * Vach vang nam ngay tren canh tren cua hop nen doc len nhu mot dau danh dau
 * gan vao hop. Vi the .op-article .op-rule KHONG co le duoi.
 *
 * Trong ca tep nay khong dong nao duoc dung var(--accent) - mau vang da tieu
 * het chi tieu o .op-rule.
 */

.op-article { padding-bottom: 8px; }

.op-title {
	margin: 14px 0 0;
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(27px, 6.4vw, 37px);
	line-height: 1.17;
	letter-spacing: -0.012em;
}

.op-byline {
	margin: 13px 0 0;
	font-size: 13.5px;
	color: var(--muted);
}

.op-byline a { color: var(--muted); text-decoration: none; }
.op-byline a:hover { color: var(--ink); text-decoration: underline; }

.op-article .op-rule { margin: 26px 0 0; }

/* ------------------------------------------------------------------ */
/* Hop "Our pick" - nuoc di rieng cua site nay                         */
/* ------------------------------------------------------------------ */

.op-pick {
	margin: 0 0 40px;
	border: 1px solid var(--line);
	background: var(--surface);
	padding: 20px;
}

.op-pick__eyebrow {
	margin: 0;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
}

.op-pick__top {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: 16px;
}

.op-pick__fig {
	flex: 0 0 160px;
	margin: 0;
}

.op-pick__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}

.op-pick__cap {
	margin: 9px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--muted);
}

.op-pick__facts { flex: 1 1 auto; min-width: 0; }

.op-pick__name {
	margin: 0;
	font-family: var(--serif);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.4;
}

.op-pick__price {
	margin: 12px 0 0;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.op-pick__now { font-size: 23px; font-weight: 600; }
.op-pick__was, .op-pick__off { font-size: 13.5px; color: var(--muted); }
.op-pick__was s { text-decoration-thickness: 1px; }

.op-pick__rating {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--muted);
}

.op-pick__stars { color: var(--ink); font-weight: 600; }

.op-pick__buy {
	display: inline-block;
	margin-top: 16px;
	background: var(--ink);
	color: #fff;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.op-pick__buy:hover { background: #000; text-decoration: underline; }

.op-pick__say {
	margin-top: 20px;
	border-top: 1px solid var(--line);
	padding-top: 16px;
}

.op-pick__say p {
	margin: 0 0 0.9em;
	font-size: 16px;
	line-height: 1.62;
}

.op-pick__say p:last-child { margin-bottom: 0; }

.op-pick__list {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.op-pick__list li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 17px;
	font-size: 15.5px;
	line-height: 1.5;
}

.op-pick__list li:last-child { margin-bottom: 0; }

.op-pick__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 9px;
	height: 1px;
	background: var(--muted);
}

.op-fine {
	margin: 16px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--muted);
}

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

/*
 * Chon ">" chu khong chon hau due: the h2 cua hop "Our pick" nam sau mot lop
 * the aside nen khong dinh cac luat duoi day, khong can viet luat go ra.
 */
.op-body > h2 {
	margin: 2.1em 0 0.6em;
	border-top: 1px solid var(--line);
	padding-top: 1.05em;
	font-family: var(--serif);
	font-weight: 700;
	font-size: 23px;
	line-height: 1.26;
	letter-spacing: -0.008em;
}

.op-body > h3 {
	margin: 1.9em 0 0.5em;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.38;
}

.op-body p {
	margin: 0 0 1.05em;
	line-height: 1.68;
}

.op-body > ul, .op-body > ol {
	margin: 0 0 1.25em;
	padding-left: 1.15em;
}

.op-body li {
	margin: 0 0 0.5em;
	font-size: 16.5px;
	line-height: 1.6;
}

.op-body a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--muted);
}

.op-orphan-cap {
	font-size: 13px;
	color: var(--muted);
}

/* Uu / nhuoc: chi doi dau gach dau dong, chu va thu tu giu y nguyen. */
.op-body > ul.op-pc {
	list-style: none;
	padding-left: 0;
}

.op-body > ul.op-pc li {
	position: relative;
	padding-left: 22px;
}

.op-body > ul.op-pc li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 600;
}

.op-pc--yes li::before { content: "+"; color: var(--ink); }
.op-pc--no li::before { content: "\2013"; color: var(--muted); }

/* ------------------------------------------------------------------ */
/* Bang thong so                                                       */
/* ------------------------------------------------------------------ */

.op-spec { margin: 0 0 1.4em; }

.op-spec__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.op-body table,
.op-spec__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.op-body th, .op-spec__table th {
	text-align: left;
	border-bottom: 1px solid var(--line);
	padding: 8px 14px 8px 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.op-body td, .op-spec__table td {
	border-bottom: 1px solid var(--line);
	padding: 9px 14px 9px 0;
	vertical-align: top;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.op-spec__table tbody td:first-child {
	width: 38%;
	color: var(--muted);
}

.op-spec__table tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Doc tiep                                                            */
/* ------------------------------------------------------------------ */

.op-more {
	margin-top: 46px;
	border-top: 1px solid var(--line);
	padding-top: 14px;
}

.op-more__h {
	margin: 0;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.op-more__list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.op-more__list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}

.op-more__list li:last-child { border-bottom: 0; }

.op-more__list a {
	font-family: var(--serif);
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
}

.op-more__list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ */
/* Be ngang nho                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 560px) {
	.op-pick { padding: 18px 16px; }

	.op-pick__top {
		display: block;
	}

	.op-pick__fig {
		max-width: 220px;
		margin: 0 0 16px;
	}

	.op-pick__now { font-size: 21px; }

	.op-body > h2 { font-size: 21px; }
	.op-body > h3 { font-size: 17px; }

	.op-spec__table { font-size: 14.5px; }
	.op-spec__table tbody td:first-child { width: 42%; }
}

/*
 * Chu trong nut mua.
 *
 * Luat `.op-body a` co do uu tien 0,1,1, cao hon luat `.op-pick__buy` (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.
 */
.op-body a.op-pick__buy { color: #fff; }