/*
  VTG DGTH — profile.css · CHỈ trang hồ sơ thương hiệu (single-dgth_brand.php).
  Dựng theo trang cơ sở fresha.com — DESIGN.md §19. Khối điểm, thanh tiêu chí, ưu/nhược
  dùng chung với bảng xếp hạng nên nằm ở content.css; biểu mẫu + chọn sao ở form.css.
*/

@layer components {
	/* ------------------------------------------------------------ đầu trang */
	.dg-bp__head {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--dg-s-3) var(--dg-s-5);
		margin-block-end: var(--dg-s-5);
	}

	.dg-bp__title {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dg-s-2) var(--dg-s-3);
		flex-basis: 100%;
	}

	.dg-bp__title h1 {
		margin: 0;
		text-wrap: pretty;
	}

	.dg-bp__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dg-s-2) var(--dg-s-4);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-bp__meta a:not(.dg-chip) {
		color: inherit;
		text-decoration: none;
	}

	.dg-bp__meta a:not(.dg-chip):hover {
		color: var(--dg-brand-fg);
	}

	.dg-bp__where,
	.dg-bp__score,
	.dg-rvline {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
	}

	.dg-bp__where svg,
	.dg-rvline svg,
	.dg-bpcard__row svg,
	.dg-contactlist svg {
		inline-size: var(--dg-icon-sm);
		block-size: var(--dg-icon-sm);
		flex: none;
	}

	.dg-rvline {
		color: var(--dg-ink);
		text-decoration: none;
	}

	.dg-rvline svg {
		color: var(--dg-accent-fg);
	}

	.dg-rvline span {
		color: var(--dg-ink-2);
	}

	/* Trạng thái mở cửa: page.js điền chữ và bỏ hidden — HTML tĩnh để trống */
	.dg-bp__open {
		font-weight: 600;
		color: var(--dg-bad);
	}

	.dg-bp__open.is-open {
		color: var(--dg-ok);
	}

	.dg-bp__head .dg-tools__share {
		margin-inline-start: 0;
	}

	/* ------------------------------------------------------- lưới ảnh
	   Cột 2fr + 1fr, ô nhỏ cao nửa ô lớn: MỌI ô đều ra đúng 1200/630 mà không ép tỉ lệ
	   riêng từng ô. Điện thoại chỉ hiện ảnh đầu. */
	.dg-bp__gallery {
		position: relative;
		display: grid;
		gap: var(--dg-s-2);
		border-radius: var(--dg-r-lg);
		overflow: hidden;
	}

	.dg-bp__shot {
		display: block;
		overflow: hidden;
		background: var(--dg-surface-2);
		aspect-ratio: var(--dg-ratio-share);
		cursor: zoom-in;
	}

	.dg-bp__shot img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	.dg-bp__shot:not(:first-child) {
		display: none;
	}

	.dg-bp__more {
		position: absolute;
		inset-block-end: var(--dg-s-3);
		inset-inline-end: var(--dg-s-3);
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-2);
		padding: var(--dg-btn-pad-sm);
		border-radius: var(--dg-r-full);
		background: var(--dg-surface);
		color: var(--dg-ink);
		font-size: var(--dg-fs-small);
		font-weight: 600;
		box-shadow: var(--dg-shadow);
	}

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

	@media (min-width: 768px) {
		.dg-bp__shot:not(:first-child) {
			display: block;
		}

		.dg-bp__gallery--2,
		.dg-bp__gallery--3 {
			grid-template-columns: 2fr 1fr;
		}

		.dg-bp__gallery--3 {
			grid-template-rows: 1fr 1fr;
		}

		.dg-bp__gallery--3 .dg-bp__shot:first-child {
			grid-row: 1 / span 2;
		}

		.dg-bp__gallery--3 .dg-bp__shot:not(:first-child) {
			aspect-ratio: auto;
		}
	}

	/* ------------------------------------------------------ thanh neo dính */
	.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);
	}

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

	/* Header ẩn khi cuộn xuống (site.js khối 1) hoặc không dính: thanh neo và thẻ bên phải lên
	   sát mép trên. Thiếu rule này thì chỗ header vừa ẩn thành một khe trống nội dung lộ qua. */
	.dg-anchor,
	.dg-bp__aside {
		transition: inset-block-start var(--dg-t-slow) var(--dg-ease);
	}

	body:has(.dg-header.is-hidden, .dg-header[data-sticky="none"]) .dg-anchor {
		inset-block-start: 0;
	}

	body:has(.dg-header.is-hidden, .dg-header[data-sticky="none"]) .dg-bp__aside {
		inset-block-start: calc(var(--dg-tap) + var(--dg-s-5));
	}

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

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

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

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

	.dg-anchor__probe {
		display: block;
		block-size: 1px;
		margin-block-end: -1px;
	}

	/* ------------------------------------------------ hai cột + thẻ dính */
	.dg-bp__layout {
		display: grid;
		gap: var(--dg-s-7);
		align-items: start;
	}

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

		.dg-bp__layout {
			grid-template-columns: minmax(0, 1fr) var(--dg-aside);
			gap: var(--dg-s-8);
		}

		.dg-bp__aside {
			position: sticky;
			inset-block-start: calc(var(--dg-header-h) + var(--dg-tap) + var(--dg-s-5));
		}
	}

	/* Điện thoại: thẻ hành động lên TRƯỚC nội dung — nút Website/Gọi không nằm tận đáy trang */
	@media (max-width: 1023px) {
		.dg-bp__aside {
			order: -1;
		}
	}

	.dg-bpcard {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-3);
		padding: var(--dg-s-5);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
		background: var(--dg-surface);
		box-shadow: var(--dg-shadow);
	}

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

	.dg-bpcard__logo {
		flex: none;
		inline-size: var(--dg-tap-lg);
		block-size: var(--dg-tap-lg);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r);
		background: #ffffff;
		overflow: hidden;
	}

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

	.dg-bpcard__name {
		margin: 0;
		font-size: var(--dg-fs-h4);
		font-weight: 700;
	}

	.dg-bpcard__row {
		display: flex;
		align-items: flex-start;
		gap: var(--dg-s-2);
		margin: 0;
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-bpcard__score {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block-start: var(--dg-s-3);
		border-block-start: 1px solid var(--dg-line);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
		text-decoration: none;
	}

	/* ------------------------------------------------------------ các mục */
	.dg-bp__sec {
		scroll-margin-block-start: calc(var(--dg-header-h) + var(--dg-tap) + var(--dg-s-4));
	}

	.dg-bp__sec + .dg-bp__sec {
		margin-block-start: var(--dg-s-7);
		padding-block-start: var(--dg-s-7);
		border-block-start: 1px solid var(--dg-line);
	}

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

	.dg-bp__n {
		padding-inline: var(--dg-s-2);
		border-radius: var(--dg-r-full);
		background: var(--dg-chip-bg);
		color: var(--dg-ink-2);
		font-size: var(--dg-fs-small);
		font-weight: 500;
	}

	.dg-bp__note {
		margin-block-start: var(--dg-s-4);
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-bp__scoregrid {
		display: grid;
		gap: var(--dg-s-5);
		align-items: start;
	}

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

	/* Đọc thêm — chặn theo số dòng tính bằng em, page.js chỉ hiện nút khi thật sự bị cắt */
	.dg-bp__about:not(.is-open) {
		max-block-size: calc(var(--dg-lh-read) * 1em * 12);
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
		mask-image: linear-gradient(to bottom, #000 70%, transparent);
	}

	.dg-bp__morebtn,
	.dg-rv__more {
		margin-block-start: var(--dg-s-2);
		color: var(--dg-brand-fg);
		font-size: var(--dg-fs-small);
		font-weight: 600;
		text-decoration: underline;
	}

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

	/* ------------------------------------ báo thông tin chưa chính xác (gập sẵn) */
	.dg-report {
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
		background: var(--dg-surface);
	}

	.dg-report__sum {
		display: flex;
		align-items: center;
		gap: var(--dg-s-4);
		padding: var(--dg-s-4) var(--dg-s-5);
		list-style: none;
		cursor: pointer;
	}

	.dg-report__sum::-webkit-details-marker {
		display: none;
	}

	.dg-report__ico {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		inline-size: var(--dg-tap);
		block-size: var(--dg-tap);
		border-radius: var(--dg-r-full);
		background: var(--dg-accent-soft);
		color: var(--dg-accent-fg);
	}

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

	.dg-report__txt strong {
		font-size: var(--dg-fs-h4);
	}

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

	.dg-report__caret {
		flex: none;
		color: var(--dg-ink-2);
		transition: transform var(--dg-t) var(--dg-ease);
	}

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

	.dg-report[open] .dg-report__caret {
		transform: rotate(180deg);
	}

	.dg-report[open] .dg-report__sum {
		border-block-end: 1px solid var(--dg-line);
	}

	/* Biểu mẫu nằm LIỀN trong khung gập — bỏ viền riêng của .dg-form, không thì viền đôi */
	.dg-report .dg-form {
		padding: var(--dg-s-5);
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	/* --------------------------------------------------- sản phẩm & dịch vụ */
	.dg-offers {
		margin: 0;
		padding: 0;
		list-style: none;
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
	}

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

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

	.dg-offer__name {
		font-weight: 600;
	}

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

	.dg-offer__side {
		grid-column: 2;
		grid-row: 1 / span 2;
		display: flex;
		align-items: center;
		gap: var(--dg-s-3);
	}

	.dg-offer__price {
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	/* -------------------------------------------------------------- đánh giá */
	.dg-rvsum {
		display: grid;
		gap: var(--dg-s-5);
		margin-block-end: var(--dg-s-5);
		padding: var(--dg-s-5);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
	}

	@media (min-width: 640px) {
		.dg-rvsum:not(.dg-rvsum--empty) {
			grid-template-columns: auto minmax(0, 1fr);
			align-items: center;
			gap: var(--dg-s-7);
		}
	}

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

	.dg-rvsum__avg {
		font-size: var(--dg-fs-h1);
		font-weight: 700;
		line-height: 1;
	}

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

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

	.dg-rvsum__row {
		display: grid;
		grid-template-columns: 2.5em minmax(0, 1fr) 3.5em;
		align-items: center;
		gap: var(--dg-s-3);
		font-size: var(--dg-fs-small);
	}

	.dg-rvsum__star {
		display: inline-flex;
		align-items: center;
		gap: var(--dg-s-1);
	}

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

	.dg-rvsum .dg-bar__track {
		grid-column: auto;
	}

	.dg-rvsum__n {
		text-align: end;
		color: var(--dg-ink-2);
		font-variant-numeric: tabular-nums;
	}

	.dg-rvlist {
		display: grid;
		gap: var(--dg-s-4);
	}

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

	.dg-rv {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-2);
		padding: var(--dg-s-5);
		border: 1px solid var(--dg-line);
		border-radius: var(--dg-r-lg);
	}

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

	.dg-rv__avatar {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		inline-size: var(--dg-tap);
		block-size: var(--dg-tap);
		border-radius: var(--dg-r-full);
		background: var(--dg-brand-soft);
		color: var(--dg-brand-fg);
		font-size: var(--dg-fs-small);
		font-weight: 700;
	}

	.dg-rv__name {
		margin: 0;
		font-weight: 600;
	}

	.dg-rv__stars {
		margin: 0;
		line-height: 1;
	}

	.dg-rv__text {
		font-size: var(--dg-fs-small);
		line-height: var(--dg-lh-body);
	}

	.dg-rv__text:not(.is-open) {
		max-block-size: calc(var(--dg-lh-body) * 1em * 4);
		overflow: hidden;
	}

	.dg-rv__more {
		align-self: flex-start;
		margin-block-start: 0;
	}

	.dg-rv__meta {
		margin: 0;
		margin-block-start: auto;
		font-size: var(--dg-fs-small);
		color: var(--dg-ink-2);
	}

	.dg-rvlist + .dg-pager {
		margin-block-start: var(--dg-s-5);
	}

	/* ------------------------------------------------------------- thông tin */
	.dg-bpinfo {
		display: grid;
		gap: var(--dg-s-5);
	}

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

	.dg-hours {
		inline-size: 100%;
		font-size: var(--dg-fs-small);
	}

	.dg-hours th,
	.dg-hours td {
		padding-block: var(--dg-s-2);
		font-weight: 400;
		text-align: start;
	}

	.dg-hours td {
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	.dg-hours tr + tr > * {
		border-block-start: 1px solid var(--dg-line);
	}

	.dg-hours tr.is-today > * {
		font-weight: 700;
	}

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

	.dg-contactlist {
		display: flex;
		flex-direction: column;
		gap: var(--dg-s-3);
		margin: 0 0 var(--dg-s-4);
		padding: 0;
		list-style: none;
		font-size: var(--dg-fs-small);
	}

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

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

	.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);
		color: var(--dg-ink);
		font-size: var(--dg-fs-small);
		text-decoration: none;
	}

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

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

	/* ------------------------------------------------------ xem ảnh phóng to
	   <dialog>: phím Esc, bẫy tiêu điểm, trả tiêu điểm là hành vi sẵn có của trình duyệt.
	   display:flex CHỈ trong [open] — khai ở rule gốc là đè display:none của dialog đóng. */
	.dg-lightbox {
		inline-size: 100%;
		block-size: 100%;
		margin: 0;
		background: rgb(6 9 12 / 94%);
		color: #ffffff;
	}

	.dg-lightbox[open] {
		display: flex;
		flex-direction: column;
	}

	.dg-lightbox::backdrop {
		background: transparent;
	}

	.dg-lightbox__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--dg-s-2) var(--dg-s-4);
		font-size: var(--dg-fs-small);
	}

	.dg-lightbox__ctrl {
		display: flex;
		gap: var(--dg-s-1);
	}

	.dg-lightbox .dg-iconbtn {
		color: #ffffff;
	}

	.dg-lightbox__prev {
		transform: rotate(90deg);
	}

	.dg-lightbox__next {
		transform: rotate(-90deg);
	}

	.dg-lightbox__track {
		display: flex;
		flex: 1;
		min-block-size: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

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

	.dg-lightbox__slide {
		display: flex;
		flex: 0 0 100%;
		align-items: center;
		justify-content: center;
		padding: var(--dg-s-4);
		scroll-snap-align: center;
	}

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