/*
 * Site Awards - trang bai.
 *
 * Cot doc 760px, van xuoi Merriweather. Moi muc san pham la mot "the giai
 * thuong": so thu tu, cac nhan tu tinh kem CAN CU, o so lieu, hai cot uu -
 * nhuoc, roi van xuoi. Mau do chi xuat hien o nhan va o vach chi muc.
 */

.aw-article { max-width: var(--read); margin: 0 auto; padding: 28px 16px 8px; }

.aw-article-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.aw-article-head h1 { font-size: 38px; letter-spacing: -0.03em; margin: 8px 0 0; }

.aw-dek {
	margin: 14px 0 0; font-family: var(--serif);
	font-size: 17px; line-height: 1.7; color: var(--muted);
}

.aw-byline {
	margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 13px; color: var(--muted);
}
.aw-avatar {
	display: grid; place-items: center; width: 30px; height: 30px;
	background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.aw-author { font-weight: 700; color: var(--ink); }
.aw-dot { color: var(--line); }

.aw-sourceline {
	margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted);
	border-left: 3px solid var(--line); padding-left: 10px;
}

/* ---------------------------------------------------------------- */
/* Bang vinh danh                                                    */
/* ---------------------------------------------------------------- */

.aw-board { margin: 26px 0 0; border-top: 3px solid var(--accent); background: var(--surface); padding: 16px; }

.aw-board-head { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.aw-board-tag {
	background: var(--accent); color: #fff; font-weight: 700; font-size: 12px;
	padding: 3px 9px; text-transform: uppercase; letter-spacing: 0.12em;
}
.aw-board-sub { font-size: 12px; color: var(--muted); line-height: 1.5; flex: 1 1 220px; }

.aw-board-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.aw-board-item {
	background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--ink);
	padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.aw-board-item--rated { border-top-color: var(--accent); }
.aw-board-item--price { border-top-color: var(--ink); }
.aw-board-item--deal { border-top-color: var(--accent-dark); }

.aw-board-label {
	margin: 0; font-size: 11px; font-weight: 700; color: var(--accent);
	text-transform: uppercase; letter-spacing: 0.1em;
}
.aw-board-img { width: 100%; max-height: 110px; object-fit: contain; }
.aw-board-name { margin: 0; font-weight: 700; font-size: 14px; line-height: 1.3; }
.aw-board-why { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }

/* ---------------------------------------------------------------- */
/* Muc luc san pham                                                  */
/* ---------------------------------------------------------------- */

.aw-toc { margin: 24px 0 0; border: 1px solid var(--line); padding: 14px 16px; }
.aw-toc-head {
	margin: 0 0 10px; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.12em;
}
.aw-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: aw-toc; }
.aw-toc li {
	counter-increment: aw-toc; position: relative; padding: 7px 0 7px 32px;
	border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.aw-toc li:first-child { border-top: 0; }
.aw-toc li::before {
	content: counter(aw-toc, decimal-leading-zero); position: absolute; left: 0;
	font-size: 12px; font-weight: 700; color: var(--accent);
}
.aw-toc a { font-weight: 600; font-size: 14px; }

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

.aw-body { font-family: var(--serif); font-size: 17px; line-height: 1.8; }
.aw-body p { margin: 0 0 1.15em; }
.aw-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.aw-body ul, .aw-body ol { margin: 0 0 1.15em; padding-left: 1.2em; }
.aw-body li { margin-bottom: 0.4em; }
.aw-body img { margin: 0 auto; }

.aw-h2 {
	font-family: var(--display); font-size: 25px; line-height: 1.2;
	margin: 0 0 14px; scroll-margin-top: 16px;
}

.aw-lede { margin: 24px 0 0; }
.aw-lede p:first-child::first-letter {
	float: left; font-family: var(--display); font-weight: 700; font-size: 58px;
	line-height: 0.82; padding: 4px 10px 0 0; color: var(--accent);
}

.aw-sec { margin: 34px 0; padding-top: 22px; border-top: 1px solid var(--line); }

/* Bang so sanh: cho truot ngang, khong bao gio pha vo cot doc */
.aw-tablewrap { overflow-x: auto; border: 1px solid var(--line); }
.aw-table {
	width: 100%; border-collapse: collapse;
	font-family: var(--display); font-size: 13px; line-height: 1.45;
}
.aw-table th, .aw-table td {
	padding: 9px 11px; text-align: left; border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line); vertical-align: top;
}
.aw-table th:last-child, .aw-table td:last-child { border-right: 0; }
.aw-table thead th {
	background: var(--ink); color: #fff; font-weight: 700; white-space: nowrap;
	text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px;
}
.aw-table tbody tr:nth-child(even) { background: var(--surface); }
.aw-table tbody td:first-child { font-weight: 700; }

/* ---------------------------------------------------------------- */
/* The giai thuong                                                   */
/* ---------------------------------------------------------------- */

.aw-award {
	margin: 34px 0; padding-top: 20px;
	border-top: 3px solid var(--ink);
}

.aw-award-head { margin-bottom: 16px; }

.aw-rank { margin: 0 0 6px; display: flex; align-items: baseline; gap: 7px; }
.aw-rank-word {
	font-family: var(--display); font-size: 11px; font-weight: 700; color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.14em;
}
.aw-rank-num {
	font-family: var(--display); font-size: 22px; font-weight: 700;
	color: var(--accent); line-height: 1; letter-spacing: -0.02em;
}

.aw-ribbons { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.aw-ribbon {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
	font-family: var(--display); border-left: 4px solid var(--accent);
	background: var(--surface); padding: 7px 11px;
}
.aw-ribbon--price { border-left-color: var(--ink); }
.aw-ribbon--deal { border-left-color: var(--accent-dark); }
.aw-ribbon-name {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
	background: var(--accent); color: #fff; padding: 2px 8px;
}
.aw-ribbon--price .aw-ribbon-name { background: var(--ink); }
.aw-ribbon--deal .aw-ribbon-name { background: var(--accent-dark); }
.aw-ribbon-why { font-size: 12px; line-height: 1.5; color: var(--muted); flex: 1 1 200px; }

.aw-award-top {
	display: grid; grid-template-columns: 230px 1fr; gap: 20px;
	align-items: start; margin-bottom: 18px;
}

.aw-award-media { margin: 0; background: var(--surface); padding: 10px; }
.aw-award-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.aw-award-media figcaption {
	margin-top: 8px; font-family: var(--display); font-size: 11px; color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4;
}
.aw-award-cap { font-family: var(--display); font-size: 12px; color: var(--muted); }

.aw-award-facts { min-width: 0; font-family: var(--display); }

.aw-bestfor {
	margin: 0 0 12px; font-size: 14px; line-height: 1.5;
	background: var(--surface); padding: 9px 12px; border-left: 4px solid var(--ink);
}
.aw-bestfor-tag {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
	color: var(--accent); margin-right: 4px;
}

.aw-stats { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 0; }
.aw-stats dt {
	font-size: 11px; font-weight: 700; color: var(--muted); padding: 7px 14px 7px 0;
	text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid var(--line);
	white-space: nowrap;
}
.aw-stats dd {
	margin: 0; padding: 7px 0; font-size: 14px; border-top: 1px solid var(--line);
	line-height: 1.45;
}
.aw-stats dt:first-of-type, .aw-stats dd:first-of-type { border-top: 0; }
.aw-stats .aw-num { font-weight: 700; font-size: 16px; }
.aw-stats .aw-star { color: var(--accent); }
.aw-stats small {
	display: block; font-size: 11px; color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.05em;
}
.aw-was { color: var(--muted); text-decoration: line-through; font-size: 13px; }

.aw-buy { margin: 0; }
.aw-btn {
	display: inline-block; background: var(--accent); color: #fff;
	font-family: var(--display); font-weight: 700; font-size: 14px;
	padding: 10px 18px; letter-spacing: 0.02em;
}
.aw-btn:hover { background: var(--accent-dark); text-decoration: none; }

.aw-proscon { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 18px; border: 1px solid var(--line); }
.aw-pc { padding: 12px 14px; font-family: var(--display); min-width: 0; }
.aw-pc--cons { border-left: 1px solid var(--line); }
.aw-pc-head {
	margin: 0 0 8px; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.12em;
}
.aw-pc--pros .aw-pc-head { color: var(--ink); }
.aw-pc--cons .aw-pc-head { color: var(--accent); }
.aw-pc ul { list-style: none; margin: 0; padding: 0; }
.aw-pc li { font-size: 13px; line-height: 1.5; padding: 4px 0 4px 16px; position: relative; }
.aw-pc li::before { position: absolute; left: 0; font-weight: 700; }
.aw-pc--pros li::before { content: "+"; color: var(--ink); }
.aw-pc--cons li::before { content: "\2212"; color: var(--accent); }

.aw-award-body { }

/* ---------------------------------------------------------------- */
/* Muc huong dan chon: so thu tu do CSS dem, khong dong vao chu       */
/* ---------------------------------------------------------------- */

.aw-guide-steps { counter-reset: aw-step; }
.aw-guide-steps > p {
	counter-increment: aw-step; position: relative;
	padding-left: 44px; margin-bottom: 1.3em;
}
.aw-guide-steps > p::before {
	content: counter(aw-step, decimal-leading-zero);
	position: absolute; left: 0; top: 2px;
	font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--accent);
	border-top: 3px solid var(--accent); padding-top: 6px; width: 30px;
}

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

.aw-q { border-top: 1px solid var(--line); }
.aw-q:last-child { border-bottom: 1px solid var(--line); }
.aw-q summary {
	cursor: pointer; list-style: none; padding: 13px 34px 13px 0; position: relative;
	font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.35;
}
.aw-q summary::-webkit-details-marker { display: none; }
.aw-q summary::after {
	content: "+"; position: absolute; right: 4px; top: 11px;
	font-size: 20px; font-weight: 700; color: var(--accent); line-height: 1;
}
.aw-q[open] summary::after { content: "\2212"; }
.aw-q summary:hover { color: var(--accent); }
.aw-a { padding: 0 0 12px; font-size: 16px; }
.aw-a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- */
/* Cuoi bai                                                          */
/* ---------------------------------------------------------------- */

.aw-tags {
	margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-family: var(--display);
}
.aw-tags-head {
	font-size: 11px; font-weight: 700; color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.12em;
}
.aw-tags a {
	font-size: 13px; font-weight: 600; padding: 4px 11px;
	border: 1px solid var(--line); background: var(--surface);
}
.aw-tags a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.aw-method {
	margin: 26px 0 0; padding: 18px; background: var(--surface);
	border-left: 4px solid var(--accent); font-family: var(--display);
}
.aw-method h2 { font-size: 15px; margin-bottom: 8px; }
.aw-method p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }

.aw-related { margin-top: 40px; }

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

@media (max-width: 720px) {
	.aw-article { padding: 20px 16px 8px; }
	.aw-article-head h1 { font-size: 27px; }
	.aw-dek { font-size: 15px; }
	.aw-body { font-size: 16px; line-height: 1.75; }
	.aw-h2 { font-size: 21px; }

	.aw-award-top { grid-template-columns: 1fr; gap: 14px; }
	.aw-award-media img { aspect-ratio: 4 / 3; }

	.aw-proscon { grid-template-columns: 1fr; }
	.aw-pc--cons { border-left: 0; border-top: 1px solid var(--line); }

	.aw-lede p:first-child::first-letter { font-size: 46px; }

	.aw-guide-steps > p { padding-left: 0; padding-top: 30px; }
	.aw-guide-steps > p::before { top: 0; }

	.aw-board-list { grid-template-columns: 1fr; }
	.aw-board-img { max-height: 90px; }
}

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