/*
 * Trang bai site40: mot cot 720px, chu than bai 17px tren nen toi.
 *
 * Hai thu rieng cua giao dien nay nam ca o day: hop TL;DR (.td-tldr) va thanh
 * tien do doc canh trai (.td-rail).
 */

.td-single { position: relative; }

.td-article {
	max-width: var(--col);
	margin: 0 auto;
	padding: 0 16px 36px;
}

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

.td-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.td-head-kick { margin: 14px 0 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.td-title {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.12;
	margin: 0 0 12px;
}

.td-meta {
	margin: 0;
	font-size: 12.5px;
	color: var(--muted);
	display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.td-meta a { color: var(--ink); text-decoration: none; }
.td-meta a:hover { color: var(--accent); }

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

.td-body {
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
}

.td-body p { margin: 0 0 1.05em; }
.td-body strong { font-weight: 700; }

/*
 * Chu trong than bai duoc to mau nhan. Luat nay co do uu tien 0,1,1 nen no DE
 * NGO DE nuot mat mau chu cua nut mua - xem ngay luat .td-body a.td-buy ben
 * duoi, day la loi da lam hong nut mua o 8 giao dien khac.
 */
.td-body a { color: var(--accent); text-underline-offset: 2px; }

.td-body h2.td-h2 {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 2em 0 0.6em;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	/* Dien thoai: dau trang khong dinh nen chi can chua mot chut cho vach tien
	   do o mep tren. Man hinh rong xem luat o cuoi tep. */
	scroll-margin-top: 16px;
}
.td-body h2.td-h2::before {
	content: "";
	display: block;
	width: 26px; height: 3px;
	background: var(--accent);
	margin-bottom: 10px;
}

.td-body h3 { font-size: 18px; margin: 1.6em 0 0.5em; }

.td-body ul, .td-body ol { margin: 0 0 1.05em; padding-left: 20px; }
.td-body li { margin-bottom: 0.45em; }

.td-body ul.td-picks { list-style: none; padding-left: 0; }
.td-body ul.td-picks li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 0.7em;
}
.td-body ul.td-picks li::before {
	content: "";
	position: absolute; left: 0; top: 0.62em;
	width: 9px; height: 3px;
	background: var(--accent);
}

.td-body blockquote {
	margin: 1.4em 0;
	padding-left: 14px;
	border-left: 3px solid var(--accent);
	color: var(--muted);
}

/* Bang: cuon duoc ngang, khong day trang lech o 375px. */
.td-tablewrap { overflow-x: auto; margin: 0 0 1.3em; -webkit-overflow-scrolling: touch; }
.td-body table.td-table, .td-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 460px;
}
.td-body th, .td-body td {
	border: 1px solid var(--line);
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}
.td-body th { background: var(--surface); font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Hop TL;DR                                                           */
/* ------------------------------------------------------------------ */

.td-tldr {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 3px;
	padding: 14px 16px 12px;
	margin: 18px 0 26px;
}

.td-tldr-h { margin: 0 0 10px; }
.td-tldr-h span {
	display: inline-block;
	background: var(--accent);
	color: #101418;
	font-family: var(--disp);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	padding: 2px 7px;
	border-radius: 2px;
}

.td-tldr-list { margin: 0; padding: 0; list-style: none; }
.td-tldr-list li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 9px;
	font-size: 14.5px;
	line-height: 1.5;
}
.td-tldr-list li::before {
	content: "";
	position: absolute; left: 0; top: 0.6em;
	width: 10px; height: 2px;
	background: var(--accent);
}
.td-body .td-tldr-name {
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}
.td-body .td-tldr-name:hover { color: var(--accent); border-color: var(--accent); }
.td-tldr-text { color: var(--muted); }

.td-tldr-foot {
	margin: 12px 0 0;
	padding-top: 9px;
	border-top: 1px solid var(--line);
	font-size: 11.5px;
	color: var(--muted);
	line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* The san pham trong than bai                                         */
/* ------------------------------------------------------------------ */

.td-prod {
	display: flex;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 12px;
	margin: 0 0 1.2em;
	align-items: flex-start;
	flex-wrap: wrap;
}

.td-prod-shot {
	flex: 0 0 auto;
	width: 96px; height: 96px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
}
.td-prod-shot img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.td-prod-facts { flex: 1 1 200px; min-width: 0; }

.td-prod-name {
	margin: 0 0 7px;
	font-family: var(--disp);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.td-prod-bits { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; }

.td-prod-specs {
	margin: 0 0 10px;
	padding: 8px 0 0;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
}
.td-prod-spec { display: flex; gap: 8px; margin-bottom: 3px; }
.td-prod-spec dt { color: var(--muted); flex: 0 0 40%; min-width: 0; word-break: break-word; }
.td-prod-spec dd { margin: 0; flex: 1 1 auto; min-width: 0; word-break: break-word; }

.td-prod-buy { margin: 0; }

/*
 * NUT MUA.
 *
 * Mau chu phai duoc dat RIENG cho .td-body a.td-buy (0,2,1). Luat
 * ".td-body a { color: var(--accent) }" o tren co do uu tien 0,1,1, cao hon
 * luat ".td-buy" (0,1,0); neu khong co dong nay thi chu nut se lay mau nhan,
 * dung bang mau nen cua chinh nut - tuong phan 1.00, mot khoi mau dac khong
 * doc duoc chu. Loi nay da xay ra o 8 giao dien, trong do co ca mot site nen
 * toi. Do lai bang buy-button-audit.py, dung doan.
 */
.td-buy {
	display: inline-block;
	background: var(--accent);
	color: #101418;
	font-family: var(--body);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 2px;
}
.td-body a.td-buy { color: #101418; }
.td-buy:hover { background: #b6f04f; }
.td-body a.td-buy:hover { color: #101418; }

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

.td-faq { border-top: 1px solid var(--line); }
.td-faq-item { border-bottom: 1px solid var(--line); }
.td-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 11px 26px 11px 0;
	position: relative;
	font-family: var(--disp);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}
.td-faq-item summary::-webkit-details-marker { display: none; }
.td-faq-item summary::after {
	content: "+";
	position: absolute; right: 2px; top: 10px;
	color: var(--accent);
	font-size: 17px;
	font-weight: 800;
}
.td-faq-item[open] summary::after { content: "\2212"; }
.td-faq-a { font-size: 15.5px; color: var(--muted); padding-bottom: 8px; }
.td-faq-a p:last-child { margin-bottom: 0.5em; }

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

.td-note {
	margin: 26px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
}

.td-tags { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.td-tags a {
	font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none;
	border: 1px solid var(--line); border-radius: 2px; padding: 3px 8px;
}
.td-tags a:hover { border-color: var(--accent); color: var(--accent); }

.td-more { border-top: 1px solid var(--line); margin-top: 36px; padding: 26px 0 0; }
.td-more .td-wrap { max-width: var(--col); }

/* ------------------------------------------------------------------ */
/* THANH TIEN DO                                                       */
/* ------------------------------------------------------------------ */

/*
 * Mac dinh (dien thoai, may tinh bang, man hinh hep): mot vach ngang mong o
 * sat mep tren. Dat vach doc canh trai o be 375px thi hoac no de len chu,
 * hoac no day ca cot chu sang phai - ca hai deu la tran ngang.
 *
 * Bien --td-p do assets/js/main.js dat, nhan gia tri 0..1. Khong co JavaScript
 * thi vach dung yen o 0 va cac the a ben trong van la mot muc luc bam duoc.
 */
.td-rail {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	pointer-events: none;
}
.td-rail-track {
	display: block;
	width: 100%; height: 3px;
	background: var(--line);
}
.td-rail-fill {
	display: block;
	width: 100%; height: 100%;
	background: var(--accent);
	transform: scaleX(var(--td-p, 0));
	transform-origin: left center;
}
.td-rail-dots { display: none; }

@media (min-width: 1180px) {
	/* Man hinh du rong: thanh doc nam ben trai cot chu, khong cham vao chu. */
	.td-rail {
		top: 50%; left: 26px; right: auto;
		transform: translateY(-50%);
		pointer-events: auto;
		max-width: 190px;
	}
	.td-rail-track {
		position: absolute;
		left: 6px; top: 7px; bottom: 7px;
		width: 2px; height: auto;
	}
	.td-rail-fill { transform: scaleY(var(--td-p, 0)); transform-origin: top center; }

	.td-rail-dots {
		display: block;
		position: relative;
		list-style: none;
		margin: 0; padding: 0;
	}
	.td-rail-dots li { margin: 0 0 13px; }
	.td-rail-dots li:last-child { margin-bottom: 0; }
	.td-rail-dots a {
		display: flex; align-items: center; gap: 9px;
		text-decoration: none;
	}
	.td-rail-dot {
		flex: 0 0 auto;
		width: 8px; height: 8px;
		margin-left: 3px;
		border-radius: 50%;
		background: var(--line);
		box-shadow: 0 0 0 3px var(--bg);
		transition: background 0.15s ease, width 0.15s ease, height 0.15s ease, margin 0.15s ease;
	}
	.td-rail-name {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--muted);
		opacity: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 150px;
		transition: opacity 0.15s ease;
	}
	.td-rail-dots a:hover .td-rail-name,
	.td-rail-dots a:focus-visible .td-rail-name { opacity: 1; }
	.td-rail-dots a:hover .td-rail-dot { background: var(--muted); }

	/* Cham cua muc dang xem to len - day la ca hai viec cua thanh nay: vach
	   cho biet da doc toi dau, cham cho biet dang o muc nao. */
	.td-rail-dots .is-here .td-rail-dot {
		width: 14px; height: 14px;
		margin-left: 0;
		background: var(--accent);
	}
	.td-rail-dots .is-here .td-rail-name { opacity: 1; color: var(--ink); }
	.td-rail-dots .is-done .td-rail-dot { background: rgba(163, 230, 53, 0.45); }
}

@media (min-width: 720px) {
	.td-title { font-size: 38px; }
	.td-prod-shot { width: 120px; height: 120px; }
}

@media (min-width: 980px) {
	/* Tu day tro len dau trang moi dinh o tren, nen neo phai chua cho cho no;
	   khong thi bam vao cham cua thanh tien do se nhay den cho tieu de nam
	   ngay duoi thanh dieu huong va bi che mat. */
	.td-body h2.td-h2 { scroll-margin-top: 104px; }
}

@media (prefers-reduced-motion: reduce) {
	.td-rail-dot, .td-rail-name, .td-rail-fill { transition: none; }
}