/*
 * Site Workshop - kieu dang chung.
 *
 * Nen den, chu vang chanh, tieu de Anton viet hoa. Anton chi co mot do dam va
 * rat hep nen chi dung cho chu tu 18px tro len; moi chu nho deu la Encode Sans.
 *
 * Be ngang nho nhat phai chay duoc la 375px: moi luoi deu bat dau tu mot cot
 * roi moi no ra, va hang chuyen muc thi truot ngang chu khong xuong dong.
 */

:root {
	--bg: #0a0b0d;
	--surface: #15171b;
	--ink: #f2f3f5;
	--muted: #9aa0a8;
	--line: #24282e;
	--accent: #ffcc00;

	--display: "Anton", "Arial Narrow", Impact, sans-serif;
	--body: "Encode Sans", system-ui, -apple-system, Segoe UI, sans-serif;

	--wrap: 1200px;
	--narrow: 780px;
	--gut: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.65;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
p { margin: 0 0 16px; }

::selection { background: var(--accent); color: #101114; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 50;
	background: var(--accent); color: #101114; padding: 10px 14px; font-weight: 700;
}
.skip:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 var(--gut); }

/* ------------------------------------------------------------------ */
/* Dau trang                                                           */
/* ------------------------------------------------------------------ */

.site-head { border-bottom: 1px solid var(--line); background: var(--bg); }
.site-head::before { content: ""; display: block; height: 5px; background: var(--accent); }

.head-bar {
	max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gut);
	display: flex; align-items: center; gap: 12px;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-name {
	font-family: var(--display); font-size: clamp(20px, 5vw, 30px);
	letter-spacing: .02em; text-transform: uppercase; line-height: 1;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand:hover .brand-name { color: var(--accent); }

.find { margin-left: auto; position: relative; }
.find > summary {
	list-style: none; cursor: pointer; font-size: 12px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
	border: 1px solid var(--line); padding: 8px 12px;
}
.find > summary::-webkit-details-marker { display: none; }
.find[open] > summary { color: #101114; background: var(--accent); border-color: var(--accent); }
.find-drop {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
	background: var(--surface); border: 1px solid var(--line); padding: 12px; width: min(320px, 88vw);
}

.search-form { display: flex; gap: 8px; }
.search-form input {
	flex: 1 1 auto; min-width: 0; background: #0f1114; color: var(--ink);
	border: 1px solid var(--line); padding: 10px 12px; font: inherit; font-size: 15px;
}
.search-form input::placeholder { color: #6d737c; }
.search-form button {
	flex: none; background: var(--accent); color: #101114; border: 0; cursor: pointer;
	padding: 10px 16px; font-family: var(--display); font-size: 16px;
	letter-spacing: .06em; text-transform: uppercase;
}

.site-nav { border-top: 1px solid var(--line); }
.site-nav ul {
	max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
	list-style: none; display: flex; gap: 22px;
	overflow-x: auto; scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a {
	display: block; padding: 11px 0; white-space: nowrap;
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	border-bottom: 3px solid transparent; color: var(--muted);
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ */
/* Khoi chung                                                          */
/* ------------------------------------------------------------------ */

.band { padding: 40px 0; }
.band-dark { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.block-head { margin: 0 0 22px; }
.block-head::before { content: ""; display: block; width: 52px; height: 5px; background: var(--accent); margin-bottom: 12px; }
.block-head h2 {
	margin: 0; font-family: var(--display); font-weight: 400;
	font-size: clamp(24px, 6vw, 38px); line-height: 1; letter-spacing: .01em;
	text-transform: uppercase;
}
.block-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; max-width: 62ch; }
.block-more {
	display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}

.kicker {
	display: inline-block; margin: 0 0 8px;
	font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Chip va huy hieu                                                    */
/* ------------------------------------------------------------------ */

.chip {
	display: inline-flex; flex-direction: column; line-height: 1.15;
	border-left: 3px solid var(--line); padding-left: 9px; margin: 0 14px 6px 0;
}
.chip b { font-size: 17px; font-weight: 800; }
.chip-sub { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.chip-rating { border-left-color: var(--accent); }
.chip-price b { color: var(--ink); }
.chip-price s { color: #6d737c; }

.badge-pick {
	display: inline-flex; flex-direction: column; line-height: 1.15;
	background: var(--accent); color: #101114; padding: 5px 9px; margin: 0 0 6px;
	font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.badge-pick em { font-style: normal; font-weight: 600; font-size: 9.5px; letter-spacing: .04em; opacity: .78; }

.buy {
	display: inline-block; background: var(--accent); color: #101114;
	font-family: var(--display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
	padding: 11px 18px; border: 2px solid var(--accent);
}
.buy:hover { background: transparent; color: var(--accent); }

/* ------------------------------------------------------------------ */
/* The bai                                                             */
/* ------------------------------------------------------------------ */

.card { background: var(--surface); border: 1px solid var(--line); }
.card-link { display: block; position: relative; color: inherit; }
.card-link:hover { color: inherit; }

.card-shot { display: block; position: relative; background: #0f1114; overflow: hidden; }
.card-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card-link:hover .card-shot img { transform: scale(1.04); }

/* Chu dat de len anh qua mot lop den mo dan - anh Amazon nen trang nen lop
   nay phai gan nhu dac o day the, khong thi chu trang mat hut. */
.card-lead .card-shot, .card-tile .card-shot { aspect-ratio: 4 / 3; }
.card-lead .card-shot { aspect-ratio: 16 / 11; }
/* Anh Amazon hau het la san pham tren nen TRANG. De nguyen thi mot the bai
   nen den bong thanh mot mang trang choi va chu trang de len khong doc duoc,
   nen ha sang anh xuong truoc khi phu lop mo dan. */
.card-lead .card-shot img, .card-tile .card-shot img { filter: brightness(.74) contrast(1.06) grayscale(.12); }
.card-link:hover .card-shot img { filter: brightness(.88) contrast(1.04); }
.card-lead .card-link, .card-tile .card-link { position: relative; }
.card-lead .card-text, .card-tile .card-text {
	position: absolute; inset: auto 0 0 0; display: block; padding: 18px 16px 14px;
	background: linear-gradient(to top, rgba(10,11,13,.97) 0%, rgba(10,11,13,.92) 42%, rgba(10,11,13,.55) 76%, rgba(10,11,13,0) 100%);
}
.card-title {
	display: block; font-family: var(--display); font-weight: 400;
	text-transform: uppercase; line-height: 1.02; letter-spacing: .01em;
}
.card-lead .card-title { font-size: clamp(24px, 5.4vw, 40px); }
.card-tile .card-title { font-size: clamp(18px, 4.6vw, 21px); }
.card-link:hover .card-title { color: var(--accent); }
.card-dek { display: block; margin-top: 10px; color: #cfd3d8; font-size: 14px; line-height: 1.5; }
.card-meta { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; }
.card-meta:empty { display: none; }

.card-row { background: transparent; border: 0; border-top: 1px solid var(--line); }
.card-row:first-child { border-top: 0; }
.card-row .card-link { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px 0; align-items: center; }
.card-row .card-shot { aspect-ratio: 1 / 1; }
.card-row .card-text { display: block; }
.card-row .card-title { font-size: 17px; line-height: 1.12; }
.card-row .kicker { font-size: 10px; margin-bottom: 5px; }

/* ------------------------------------------------------------------ */
/* Luoi                                                                */
/* ------------------------------------------------------------------ */

.hero { padding: 28px 0 8px; }
.hero-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.hero-side { display: block; }

.grid-3, .grid-4 { display: grid; gap: 18px; grid-template-columns: 1fr; }

@media (min-width: 620px) {
	.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.hero-grid { grid-template-columns: 1.65fr 1fr; gap: 28px; }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-4 { grid-template-columns: repeat(4, 1fr); }
	.band { padding: 56px 0; }
}

/* ------------------------------------------------------------------ */
/* Bang xep hang                                                       */
/* ------------------------------------------------------------------ */

.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rank-row {
	display: grid; grid-template-columns: 46px 64px 1fr; gap: 14px; align-items: center;
	padding: 14px 0; border-top: 1px solid var(--line);
}
.rank-row:first-child { border-top: 0; }
.rank-no {
	font-family: var(--display); font-size: 30px; line-height: 1; color: var(--accent);
}
.rank-shot img { width: 64px; height: 64px; object-fit: cover; background: #0f1114; }
.rank-body a {
	display: block; font-family: var(--display); font-size: clamp(16px, 4.2vw, 20px);
	text-transform: uppercase; line-height: 1.08; letter-spacing: .01em;
}
.rank-meta { display: block; margin-top: 6px; }
.rank-meta .chip { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Dai so lieu - nuoc di rieng cua site nay                            */
/* ------------------------------------------------------------------ */

.statband { border: 1px solid var(--line); background: var(--surface); }
.statband-head {
	margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line);
	font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.statband-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat { padding: 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat:nth-child(-n+2) { border-top: 0; }
.stat:nth-child(odd) { border-left: 0; }
.stat-v {
	margin: 0; font-family: var(--display); font-weight: 400; line-height: 1;
	font-size: clamp(24px, 7vw, 34px); letter-spacing: .01em; color: var(--accent);
	overflow-wrap: anywhere;
}
.stat-v i { font-style: normal; color: var(--muted); }
.stat-k { margin: 8px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stat-s { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.statband-foot {
	margin: 0; padding: 11px 16px; border-top: 1px solid var(--line);
	font-size: 11.5px; line-height: 1.5; color: var(--muted);
}
.statband-site { background: transparent; }

@media (min-width: 760px) {
	.statband-grid { grid-template-columns: repeat(4, 1fr); }
	.stat { border-top: 0; border-left: 1px solid var(--line); }
	.stat:first-child { border-left: 0; }
	.stat:nth-child(odd) { border-left: 1px solid var(--line); }
	.stat:first-child { border-left: 0; }
}

/* ------------------------------------------------------------------ */
/* Chuyen muc, phan trang, duong dan                                   */
/* ------------------------------------------------------------------ */

.cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
.cats a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	border: 1px solid var(--line); padding: 14px 16px; background: var(--bg);
}
.cats a:hover { border-color: var(--accent); }
.cats-name { font-family: var(--display); font-size: 19px; text-transform: uppercase; letter-spacing: .01em; }
.cats-n { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

@media (min-width: 620px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cats { grid-template-columns: repeat(3, 1fr); } }

.crumbs { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.crumbs a:hover { color: var(--accent); }

.pager { margin: 34px 0 0; }
.pager ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pager a, .pager span {
	display: block; border: 1px solid var(--line); padding: 9px 14px;
	font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .current { background: var(--accent); border-color: var(--accent); color: #101114; }

/* ------------------------------------------------------------------ */
/* Trang danh sach                                                     */
/* ------------------------------------------------------------------ */

.page-list { padding-top: 32px; padding-bottom: 56px; }
.page-head { margin-bottom: 26px; }
.page-head h1 {
	margin: 0; font-family: var(--display); font-weight: 400;
	font-size: clamp(30px, 8vw, 54px); line-height: .98; letter-spacing: .01em; text-transform: uppercase;
}
.page-dek { margin: 12px 0 0; color: var(--muted); max-width: 66ch; }
.page-count { margin: 10px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.page-find { margin-top: 16px; max-width: 420px; }
.page-head-404 h1 { color: var(--accent); }
.arch-lead { margin-bottom: 22px; }
.empty { color: var(--muted); }

/* ------------------------------------------------------------------ */
/* Khung trang bai (phan chung; phan than bai o article.css)           */
/* ------------------------------------------------------------------ */

.article { padding-bottom: 8px; }
.article-plain .article-head { padding: 36px 0 8px; }

.article-body { font-size: 17px; line-height: 1.72; }
.article-body h2 {
	font-family: var(--display); font-weight: 400; text-transform: uppercase;
	font-size: clamp(23px, 6vw, 33px); line-height: 1.02; letter-spacing: .01em;
	margin: 44px 0 16px;
}
.article-body h3 {
	font-family: var(--display); font-weight: 400; text-transform: uppercase;
	font-size: clamp(19px, 5vw, 24px); line-height: 1.08; margin: 28px 0 12px;
}
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul, .article-body ol { padding-left: 20px; }
.article-body li { margin-bottom: 8px; }
.article-body img { margin: 0 auto; }

/* ------------------------------------------------------------------ */
/* Chan trang                                                          */
/* ------------------------------------------------------------------ */

.site-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 8px; }
.foot-in {
	max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gut) 24px;
	display: grid; gap: 28px; grid-template-columns: 1fr;
}
.foot-brand .brand-name { font-family: var(--display); font-size: 24px; text-transform: uppercase; }
.foot-dek { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.foot-head { margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 8px; font-size: 14px; }
.foot-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-tags li { margin: 0; }
.foot-tags a { display: block; border: 1px solid var(--line); padding: 5px 10px; font-size: 12px; }
.foot-tags a:hover { border-color: var(--accent); }

.disclosure, .copy {
	max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut) 12px;
	color: var(--muted); font-size: 12px; line-height: 1.6;
}
.copy { padding-bottom: 32px; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }

@media (min-width: 760px) {
	.foot-in { grid-template-columns: 1.4fr 1fr 1.2fr; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}


/* === de mau chu huy hieu plugin === */
/*
 * Huy hieu cua plugin dat chu cung mau voi nen (nen la chinh mau do pha 10%
 * do duc), nen tuong phan chi 2.5-4.1 - duoi chuan AA 4.5, rieng nhan
 * 'Prime' gan nhu khong doc duoc.
 *
 * Chi doi MAU CHU, giu nguyen nen cua plugin. Dung hai lop cung ten de co do
 * uu tien cao hon luat goc ma khong phai dung !important.
 *
 * Khong sua tep CSS cua plugin: ban cap nhat sau nay se ghi de len.
 */
.acms-badge.acms-badge--prime   { color: #01607f; }
.acms-badge.acms-badge--danger  { color: #a81b1b; }
.acms-badge.acms-badge--success { color: #10693a; }
.acms-badge.acms-badge--warning { color: #8a5a06; }
.acms-badge.acms-badge--info    { color: #0b5e86; }


/* === mau chu phu cua plugin === */
/*
 * Plugin lay mau chu phu tu `var(--color-text-muted, #9ca3af)`. Khong theme
 * nao dat bien do nen no roi ve #9ca3af - tren nen trang chi duoc 2.54, duoi
 * chuan. Do bang Chrome that: nhan "/10", "ACMS Score" va dong "Updated: ..."
 * deu dinh.
 *
 * #6b7280 duoc 4.83, va chinh plugin cung dung mau nay o cho khac.
 */
:root { --color-text-muted: #6b7280; }

/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Day lien ket trang tinh o chan trang.                                */
/* Mau chu ke thua cua chan trang: chu chan trang da qua vong do tuong  */
/* phan, con mau nhan cua site thi chua.                                */
/* ------------------------------------------------------------------ */
.ws-foot-pages {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 13px;
	line-height: 1.6;
}
.ws-foot-pages a {
	color: inherit;
	text-decoration: none;
	opacity: .82;
}
.ws-foot-pages a:hover,
.ws-foot-pages a:focus {
	opacity: 1;
	text-decoration: underline;
}

/* --- Logo thuong hieu ------------------------------------------------ */
/* Dau hieu do bang em nen no lon nho theo chinh co chu cua ten site. */
.ws-lg { white-space: nowrap; }
.ws-lg__mark { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; margin-right: 0.36em; }
.ws-lg__tld { font-weight: 400; opacity: .5; }

/* --- Lien ket chan trang --------------------------------------------- */
/* Viet .ws-mang .ws-mang__h chu khong phai .ws-mang__h: luat cua theme
   kieu .xx-foot__disclosure p co do uu tien (0,1,1), cao hon (0,1,0), nen ban
   ngan gon bi de mat. Da do that moi biet.

   Khong dung opacity de lam mo: no keo do tuong phan xuong duoi nguong doc
   duoc o phan lon theme. Phan cap bang co chu la du, va co san toi thieu 11px
   vi co theme dat khoi cong bo chi 12px. */
.ws-mang { margin: 22px 0 0; }
.ws-mang .ws-mang__h { margin: 0 0 8px; font-size: max(11px, .8em); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ws-mang .ws-mang__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: max(11px, .8em); line-height: 1.6; }
.ws-mang .ws-mang__list li { margin: 0; padding: 0; flex: 0 0 auto; width: auto; max-width: 100%; }
.ws-mang .ws-mang__list li::before { content: none; }
.ws-mang .ws-mang__list a { text-decoration: none; }
.ws-mang .ws-mang__list a:hover,
.ws-mang .ws-mang__list a:focus { text-decoration: underline; }