/*
  VTG DGTH — list.css
  Nạp ở: trang bảng xếp hạng, trang hồ sơ thương hiệu, hai lưu trữ và hai taxonomy
  của chúng, và trang Danh bạ A–Z.

  Mọi rule ở đây nhắm class .dg-* nên nằm gọn trong @layer components. Vùng nội dung
  viết tay (.dg-entry) do content.css lo, kể cả khối ngoài-layer của nó.
*/

@layer components {
	/* ==================================================== bảng xếp hạng: hero */
	.dg-tophero__title {
		max-inline-size: 20ch;
		margin-block: var(--dg-s-2) var(--dg-s-4);
	}

	.dg-tophero__lead {
		max-inline-size: var(--dg-content);
	}

	.dg-facts {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dg-s-3) var(--dg-s-6);
		margin-block-start: var(--dg-s-5);
		padding: 0;
		list-style: none;
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-facts li {
		display: flex;
		align-items: center;
		gap: var(--dg-s-2);
	}

	.dg-facts svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
		color: var(--dg-brand-fg);
	}

	.dg-disclosure {
		display: flex;
		align-items: flex-start;
		gap: var(--dg-s-3);
		margin-block-start: var(--dg-s-6);
		padding: var(--dg-s-4);
		border: 1px solid var(--dg-line);
		border-inline-start: 3px solid var(--dg-brand-fg);
		border-radius: var(--dg-r);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-disclosure svg {
		color: var(--dg-brand-fg);
		flex: none;
	}

	.dg-disclosure a {
		white-space: nowrap;
	}

	/* ================================================ bảng xếp hạng: tóm tắt */
	.dg-sum {
		margin: 0;
		padding: 0;
		list-style: none;
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
		overflow: hidden;
	}

	.dg-sum__row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--dg-s-2) var(--dg-s-4);
		padding: var(--dg-s-4);
	}

	.dg-sum__row + .dg-sum__row {
		border-block-start: 1px solid var(--dg-line);
	}

	.dg-sum__row:nth-child(odd) {
		background: var(--dg-surface-2);
	}

	.dg-sum__name {
		font-size: var(--dg-fs-h4);
		font-weight: 600;
		color: var(--dg-ink);
		text-decoration: none;
	}

	.dg-sum__name:hover {
		color: var(--dg-brand-fg);
	}

	.dg-sum__note {
		grid-column: 2 / -1;
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	@media (min-width: 768px) {
		.dg-sum__row {
			grid-template-columns: auto minmax(0, 22ch) auto minmax(0, 1fr);
		}

		.dg-sum__note {
			grid-column: auto;
			text-align: start;
		}
	}

	/* ============================================== bảng xếp hạng: từng mục */
	.dg-items {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-5);
	}

	.dg-item {
		padding: var(--dg-s-5);
		background: var(--dg-surface);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
		scroll-margin-block-start: calc(var(--dg-header-h) + var(--dg-s-5));
	}

	.dg-item__head {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: var(--dg-s-3) var(--dg-s-4);
	}

	.dg-item__id {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-2);
		min-inline-size: 0;
	}

	.dg-item__logo {
		display: block;
		inline-size: 100%;
		max-inline-size: var(--dg-logo-row);
	}

	.dg-item__logo img {
		inline-size: 100%;
		block-size: auto;
		object-fit: contain;
	}

	.dg-item__name {
		font-size: var(--dg-fs-h3);
		margin: 0;
	}

	.dg-item__name a {
		color: inherit;
		text-decoration: none;
	}

	.dg-item__name a:hover {
		color: var(--dg-brand-fg);
	}

	.dg-item__terms {
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-item__score {
		grid-column: 2;
	}

	.dg-item__note {
		margin-block-start: var(--dg-s-4);
		font-size: var(--dg-fs-lead);
		line-height: var(--dg-lh-lead);
	}

	.dg-item__cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dg-s-3);
		margin-block-start: var(--dg-s-5);
	}

	@media (min-width: 768px) {
		.dg-item {
			padding: var(--dg-s-6);
		}

		.dg-item__head {
			grid-template-columns: auto auto minmax(0, 1fr) auto;
			align-items: center;
		}

		.dg-item__score {
			grid-column: auto;
			justify-self: end;
		}
	}

	/* ---------------------------------------------------------- ưu / nhược */
	.dg-pcs {
		display: grid;
		gap: var(--dg-s-4);
		margin-block-start: var(--dg-s-5);
	}

	@media (min-width: 640px) {
		.dg-pcs {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.dg-pc {
		padding: var(--dg-s-4);
		border-radius: var(--dg-r);
		background: var(--dg-surface-2);
	}

	.dg-pc__title {
		display: flex;
		align-items: center;
		gap: var(--dg-s-2);
		margin-block-end: var(--dg-s-3);
		font-size: var(--dg-fs-eyebrow);
		font-weight: var(--dg-fw-eyebrow);
		letter-spacing: var(--dg-ls-eyebrow);
		text-transform: uppercase;
	}

	.dg-pc__title svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
	}

	.dg-pc.is-pro .dg-pc__title {
		color: var(--dg-ok);
	}

	.dg-pc.is-con .dg-pc__title {
		color: var(--dg-warn);
	}

	.dg-pc__list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-2);
		font-size: var(--dg-fs-small);
		line-height: var(--dg-lh-body);
	}

	.dg-pc__list li {
		position: relative;
		padding-inline-start: var(--dg-s-4);
	}

	.dg-pc__list li::before {
		content: "";
		position: absolute;
		inset-block-start: 0.55em;
		inset-inline-start: 0;
		inline-size: var(--dg-s-2);
		block-size: 2px;
		background: currentColor;
		opacity: 0.5;
	}

	/* --------------------------------------------------------- hộp phương pháp */
	.dg-method {
		margin-block-start: var(--dg-s-7);
		padding: var(--dg-s-5);
		background: var(--dg-brand-soft);
		border-radius: var(--dg-r-lg);
		font-size: var(--dg-fs-small);
		line-height: var(--dg-lh-body);
	}

	.dg-method__title {
		display: flex;
		align-items: center;
		gap: var(--dg-s-2);
		font-size: var(--dg-fs-h4);
		margin-block-end: var(--dg-s-3);
	}

	.dg-method__title svg {
		color: var(--dg-brand-fg);
	}

	.dg-method p + p {
		margin-block-start: var(--dg-s-3);
	}

	/* ================================================== khối điểm & thanh điểm */
	.dg-scorebox {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dg-s-1);
		padding: var(--dg-s-4);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		background: var(--dg-surface);
		min-inline-size: var(--dg-scorebox);
	}

	.dg-scorebox__label {
		font-size: var(--dg-fs-eyebrow);
		font-weight: var(--dg-fw-eyebrow);
		letter-spacing: var(--dg-ls-eyebrow);
		text-transform: uppercase;
		color: var(--dg-ink-2);
	}

	.dg-bars {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-4);
	}

	/* ==================================================== hồ sơ thương hiệu */
	.dg-bhero__in {
		display: grid;
		gap: var(--dg-s-5);
		grid-template-columns: 1fr;
		align-items: start;
	}

	.dg-bhero__logo {
		inline-size: var(--dg-logo-box);
		aspect-ratio: var(--dg-ratio-square);
		padding: var(--dg-s-3);
		background: #ffffff;
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		flex: none;
	}

	.dg-bhero__logo img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
	}

	.dg-bhero__main {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-3);
		min-inline-size: 0;
	}

	.dg-bhero__title {
		margin: 0;
	}

	.dg-bhero__cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dg-s-3);
		margin-block-start: var(--dg-s-2);
	}

	.dg-partner {
		font-size: var(--dg-fs-eyebrow);
		color: var(--dg-ink-2);
		padding: var(--dg-s-2) var(--dg-s-3);
		border-radius: var(--dg-r-sm);
		background: var(--dg-accent-soft);
	}

	@media (min-width: 768px) {
		.dg-bhero__in {
			grid-template-columns: auto minmax(0, 1fr) auto;
			gap: var(--dg-s-6);
		}

		.dg-bhero__logo {
			inline-size: var(--dg-logo-box-lg);
		}
	}

	.dg-infocard {
		padding: var(--dg-s-5);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
		background: var(--dg-surface);
	}

	.dg-infocard .dg-aside__title {
		margin-block-end: var(--dg-s-4);
	}

	.dg-facts2 {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--dg-s-2) var(--dg-s-4);
		margin: 0;
		font-size: var(--dg-fs-small);
	}

	.dg-facts2 dt {
		color: var(--dg-ink-2);
	}

	.dg-facts2 dd {
		margin: 0;
		font-weight: 500;
		overflow-wrap: anywhere;
	}

	.dg-linklist {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dg-linklist a {
		display: flex;
		align-items: center;
		gap: var(--dg-s-2);
		min-block-size: var(--dg-tap-sm);
		font-size: var(--dg-fs-small);
		text-decoration: none;
		color: var(--dg-ink);
	}

	.dg-linklist a:hover {
		color: var(--dg-brand-fg);
	}

	.dg-linklist svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
		color: var(--dg-accent-fg);
		flex: none;
	}

	/* ===================================================== thanh neo dính
	   Nhiều mục thì CUỘN NGANG, không xuống dòng: thanh cao gấp đôi khi dính sẽ ăn
	   hết màn hình. Nút CTA nằm NGOÀI vùng cuộn nên luôn thấy. */
	.dg-anchor {
		position: sticky;
		inset-block-start: var(--dg-header-h-m);
		z-index: 10;
		background: var(--dg-surface);
		border-block: 1px solid var(--dg-line);
	}

	@media (min-width: 1024px) {
		.dg-anchor {
			inset-block-start: var(--dg-header-h);
		}
	}

	.dg-anchor.is-stuck {
		box-shadow: var(--dg-shadow);
	}

	.dg-anchor__in {
		display: flex;
		align-items: center;
		gap: var(--dg-s-4);
	}

	.dg-anchor__list {
		display: flex;
		gap: var(--dg-s-1);
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		scrollbar-width: none;
		flex: 1;
	}

	.dg-anchor__list::-webkit-scrollbar {
		display: none;
	}

	.dg-anchor__list .dg-toc__item a {
		display: flex;
		align-items: center;
		min-block-size: var(--dg-tap);
		padding-inline: var(--dg-s-3);
		border: 0;
		white-space: nowrap;
		font-size: var(--dg-fs-menu);
		color: var(--dg-ink-2);
	}

	.dg-anchor__list .dg-toc__item a.is-active {
		color: var(--dg-brand-fg);
		box-shadow: inset 0 -2px 0 0 var(--dg-brand-fg);
	}

	.dg-anchor__cta {
		flex: none;
	}

	/* Mốc dò để biết thanh đã dính chưa — không chiếm chỗ, không thấy được. */
	.dg-anchor__probe {
		display: block;
		block-size: 1px;
		margin-block-end: -1px;
	}

	/* ================================================== dải lọc & dòng đếm */
	.dg-filter {
		margin-block-end: var(--dg-s-5);
		padding-block: var(--dg-s-2);
		border-block: 1px solid var(--dg-line);
	}

	.dg-filter__track {
		display: flex;
		gap: var(--dg-s-2);
		overflow-x: auto;
		scrollbar-width: none;
		padding-block: var(--dg-s-1);
	}

	.dg-filter__track::-webkit-scrollbar {
		display: none;
	}

	.dg-filter__track .dg-chip {
		white-space: nowrap;
		min-block-size: var(--dg-tap-sm);
	}

	.dg-count {
		margin-block-end: var(--dg-s-5);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	/* ========================================================= danh bạ A–Z */
	.dg-dir__intro {
		max-inline-size: var(--dg-content);
		margin-block-end: var(--dg-s-6);
	}

	.dg-dir__nav {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dg-s-2);
		margin-block-end: var(--dg-s-7);
		padding-block: var(--dg-s-3);
		border-block: 1px solid var(--dg-line);
	}

	.dg-dir__nav .dg-chip {
		min-inline-size: var(--dg-tap-sm);
		min-block-size: var(--dg-tap-sm);
		justify-content: center;
		font-weight: 700;
	}

	.dg-dir {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-7);
	}

	.dg-dir__group {
		scroll-margin-block-start: calc(var(--dg-header-h) + var(--dg-s-5));
	}

	.dg-dir__letter {
		font-size: var(--dg-fs-h3);
		color: var(--dg-brand-fg);
		padding-block-end: var(--dg-s-2);
		margin-block-end: var(--dg-s-4);
		border-block-end: 2px solid var(--dg-line);
	}

	.dg-dir__list {
		display: grid;
		gap: var(--dg-s-2) var(--dg-s-5);
		grid-template-columns: repeat(auto-fill, minmax(var(--dg-dir-col), 1fr));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dg-dir__list a {
		display: flex;
		align-items: center;
		min-block-size: var(--dg-tap-sm);
		color: var(--dg-ink);
		text-decoration: none;
	}

	.dg-dir__list a:hover {
		color: var(--dg-brand-fg);
		text-decoration: underline;
	}
}