/* ===== template-parts/components/button/assets/styles.css ===== */
/* Component: Button */
.tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tt-font);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.01rem;
    text-transform: uppercase;
    /* Figma node I2348:26861;2348:27241 (Size=L, Primary): KHÔNG bo góc (radius 0) — không tự chế 0.5rem. */
    border-radius: 0;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.tt-btn__label {
    display: block;
}

.tt-btn__icon {
    display: block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
}

/* Icon đơn sắc: trên nút Primary (nền cam) phải đổi sang TRẮNG — icon gốc màu cam sẽ vô hình.
   filter brightness(0) invert(1) = trắng tinh bất kể màu nguồn. Outline giữ màu gốc (cam). */
.tt-btn--primary .tt-btn__icon {
    filter: brightness(0) invert(1);
}

.tt-btn--xl {
    padding: 1rem 4rem;
}

.tt-btn--l {
    padding: 0.75rem 1.5rem;
}

/* Figma Primary button fill = #fa6900 (orange-accent), không phải #f15a29. */
.tt-btn--primary {
    background: var(--tt-orange-accent);
    color: var(--tt-white);
}

.tt-btn--primary:hover {
    background: #FF7B1C;
}

.tt-btn--outline {
    background: transparent;
    color: var(--tt-orange-accent);
    border: 1px solid var(--tt-orange-accent);
}

.tt-btn--outline:hover {
    background: var(--tt-orange-accent);
    color: var(--tt-white);
}

@media (prefers-reduced-motion: reduce) {
    .tt-btn {
        transition: none;
    }
}

/* Mobile: button label font nhỏ hơn desktop (node I2348:27462;2348:36951 / I2348:27463;2348:36960: 14px/18.2px, ls -0.14px). */
/* Padding mobile = desktop (0.75rem 1.5rem) — không thay đổi. */
@media screen and (max-width: 639.98px) {
    .tt-btn {
        font-size: 0.875rem;
        line-height: 1.1375rem;
        letter-spacing: -0.0088rem;
        height: 2.63rem;
    }
}


/* ===== template-parts/components/tag/assets/styles.css ===== */
/* Component: Tag / chip */
.tt-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--tt-font);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.05rem;
    letter-spacing: -0.0088rem;
    color: var(--Title-Orange, #FA6900);
    background: #FEEDE1;
    padding: 0.5rem 1rem;
    /* Figma Tag instance: radius 0.25rem (đo get_node_styles), không tự chế 0.375rem. */
    border-radius: 0.25rem;
    white-space: nowrap;
}

/* MOBILE (node I2348:27304;2348:26890, variant MB2):
   font 0.75rem/400/1.125rem/-0.0112rem, padding 0.375rem 0.75rem */
@media screen and (max-width: 639.98px) {
    .tt-tag {
        font-size: 0.75rem;
        line-height: 1.125rem;
        letter-spacing: -0.0112rem;
        padding: 0.375rem 0.75rem;
    }
}


/* ===== template-parts/chi-tiet-san-pham/section-banner/assets/styles.css ===== */
/* ============================================================== */
/* Section Banner — Chi tiết sản phẩm (Hero)                       */
/* Desktop: 1600×600 — full-bleed bg + dark gradient overlay       */
/*   breadcrumb (4 cấp) + H1 bottom-left, mô tả bottom-right.       */
/* Figma desktop node: 2348:32651                                  */
/* Mobile: không có frame Figma — layout stack heuristic.          */
/* ============================================================== */

.section-sp-banner {
	position: relative;
	width: 100%;
	height: 37.5rem; /* 600 / 16 */
	overflow: hidden;
	font-family: var(--tt-font, "Lexend Deca", sans-serif);
}

/* ---- Background image (full-bleed) ---- */
.section-sp-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.section-sp-banner__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	object-position: center;
}

/* ---- Dark gradient overlay ---- */
.section-sp-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(3, 13, 39, 0.07) 0%, rgba(4, 18, 50, 0.7) 100%);
}

/* ---- Content band, anchored bottom ---- */
.section-sp-banner__content {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	padding: 2.5rem 6.25rem; /* 40 / 100 */
}

.section-sp-banner__text {
	max-width: 52rem; /* room cho title dài */
}

/* ---- Breadcrumb ---- */
/* Flex wrap: đầy dòng mới xuống hàng; mỗi cụm nowrap nên không bị ngắt giữa chừng */
.section-sp-banner__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.section-sp-banner__crumb,
.section-sp-banner__crumb-separator {
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: -0.02rem;
	color: var(--Neutral-01, #B8B8B8);
	white-space: nowrap; /* giữ nguyên cụm, không ngắt giữa từ */
}

.section-sp-banner__crumb {
	text-decoration: none;
}

.section-sp-banner__crumb-separator {
	margin: 0 0.62rem; /* thay column-gap — KHÔNG dùng gap */
}

.section-sp-banner__crumb--current {
	color: var(--tt-white, #ffffff);
}

/* ---- Title (H1) ---- */
.section-sp-banner__title {
	margin: 1.5rem 0 0; /* 24 / 16 từ breadcrumb */
	font-weight: 600;
	font-size: 3.0625rem; /* 49 / 16 */
	line-height: 3.9812rem; /* 63.7 / 16 */
	letter-spacing: -0.0919rem;
	text-transform: uppercase;
	color: var(--tt-white, #ffffff);
}

/* ---- Description (bottom-right) ---- */
.section-sp-banner__desc {
	flex-shrink: 0;
	width: 31.4375rem; /* 503 / 16 */
	max-width: 31.4375rem;
	margin: 0 0 0 2rem;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5rem;
	letter-spacing: -0.02rem;
	color: rgba(255, 255, 255, 0.8);
}

/* ============================================================== */
/* Mobile — Figma node 2348:32735 (375×386)                        */
/* Layout: [Content text block white] trên, [Image strip 10rem] dưới */
/* KHÔNG có dark overlay. Text màu tối #131313.                    */
/* ============================================================== */
@media screen and (max-width: 639.98px) {

	/* Section chuyển sang flex column để order children */
	.section-sp-banner {
		position: static;
		height: auto;
		min-height: 0;
		overflow: visible;
		display: flex;
		flex-direction: column;
		background: #ffffff;
	}

	/* Image strip xuống cuối (order 2), chiều cao 10rem */
	.section-sp-banner__bg {
		order: 2;
		position: static;
		width: 100%;
		height: 10rem; /* 160 / 16 */
		flex-shrink: 0;
	}

	.section-sp-banner__bg-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: fill;
		object-position: center;
	}

	/* Ẩn dark gradient overlay — mobile là nền trắng */
	.section-sp-banner__overlay {
		display: none;
	}

	/* Content text lên đầu (order 1) — padding từ Figma: 2.5 1 1.25 1 rem */
	.section-sp-banner__content {
		order: 1;
		position: static;
		width: 100%;
		box-sizing: border-box;
		display: block;
		padding: 2.5rem 1rem 1.25rem;
		background: #ffffff;
	}

	.section-sp-banner__text {
		max-width: 100%;
	}

	/* Breadcrumb: 0.875rem, gray — flex wrap kế thừa từ base, cụm nowrap */
	.section-sp-banner__crumb,
	.section-sp-banner__crumb-separator {
		font-size: 0.875rem; /* 14 / 16 — Figma 2348:32737 */
		line-height: 1.3125rem;
		letter-spacing: normal;
		color: var(--Body-Black-60, rgba(19, 19, 19, 0.60));
	}

	.section-sp-banner__crumb-separator {
		margin: 0 0.375rem; /* gap mobile — KHÔNG dùng gap */
	}

	.section-sp-banner__crumb--current {
		color: #131313;
	}

	/* H1 — margin-top 1.25rem từ breadcrumb (child_margin Figma Content) */
	.section-sp-banner__title {
		margin-top: 1.25rem; /* 20 / 16 — child_margin Content frame */
		font-size: 1.5rem; /* 24 / 16 — Figma 2348:32739 */
		line-height: 1.95rem;
		letter-spacing: -0.03rem;
		text-transform: uppercase;
		color: #131313;
	}

	/* Description — margin-top 0.625rem từ H1 (child_margin Frame 2147264756) */
	.section-sp-banner__desc {
		width: 100%;
		max-width: 100%;
		margin: 0.625rem 0 0; /* 10 / 16 — child_margin Frame 2147264756 */
		font-size: 0.875rem; /* 14 / 16 — Figma 2348:32740 */
		line-height: 1.3125rem;
		letter-spacing: -0.0175rem;
		font-weight: 300;
		color: #131313;
		text-align: justify;
	}
}


/* ===== template-parts/chi-tiet-san-pham/section-intro/assets/styles.css ===== */
/* Section: Giới thiệu giải pháp (intro) — Chi tiết sản phẩm (node 2348:32659) */

.section-sp-intro {
  box-sizing: border-box;
  width: 100%;
  padding: 6.25rem;
  background-color: var(--tt-white);
  font-family: var(--tt-font);
}

/* ── Frame trong: 2 cột (node 2348:32662) ─────────────────────────────────── */
.section-sp-intro__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}

/* ── Cột trái (node 2348:32663) — FILL ────────────────────────────────────── */
.section-sp-intro__col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── Khối text + features (node 2348:32665) ───────────────────────────────── */
.section-sp-intro__text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.44rem;
}

/* ── Tiêu đề section (node 2348:32666) ────────────────────────────────────── */
.section-sp-intro__title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Eyebrow: dot + nhãn (node 2348:32667/2348:32668) */
.section-sp-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.section-sp-intro__dot {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--tt-orange-accent);
}

.section-sp-intro__eyebrow-label {
  margin-left: 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  color: var(--tt-heading);
}

/* Content: heading + mô tả (node 2348:32671) */
.section-sp-intro__content {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-sp-intro__heading {
  margin: 0;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 3.25rem;
  letter-spacing: -0.05rem;
  text-transform: uppercase;
  color: var(--tt-heading);
}

.section-sp-intro__desc {
  margin: 0.75rem 0 0;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02rem;
  text-align: justify;
  color: var(--tt-heading);
}

/* ── Danh sách feature (node 2348:32674) ──────────────────────────────────── */
.section-sp-intro__features {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-sp-intro__feature {
  display: flex;
  align-items: center;
}

.section-sp-intro__feature + .section-sp-intro__feature {
  margin-top: 0.875rem;
}

.section-sp-intro__feature-icon {
  flex: 0 0 auto;
  display: block;
  width: 1rem;
  height: auto;
}

.section-sp-intro__feature-label {
  margin-left: 0.5rem;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02rem;
  color: var(--tt-heading);
}

/* ── Hàng nút (node 2348:32687) ───────────────────────────────────────────── */
.section-sp-intro__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.section-sp-intro__actions .tt-btn {
  flex: 0 0 15.25rem;
  width: 15.25rem;
  height: 3.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.section-sp-intro__actions .tt-btn + .tt-btn {
  margin-left: 0;
}

.section-sp-intro__actions .tt-btn--outline:hover .tt-btn__icon {
  filter: brightness(0) invert(1);
}

/* ── Cột phải: ảnh + lớp phủ tối (node 2348:32690) ────────────────────────── */
.section-sp-intro__media {
  position: relative;
  flex: 0 0 43.625rem;
  width: 43.625rem;
  height: 30.375rem;
  margin-left: 6.25rem;
  overflow: hidden;
}

.section-sp-intro__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay rgba(0,0,0,0.3) trên ảnh (fill thứ 2 của Rectangle) */
.section-sp-intro__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* ── Mobile (node 2348:32743 — stack 1 cột) ────────────────────────────────── */
@media screen and (max-width: 639.98px) {
  .section-sp-intro {
    padding: 2.5rem 1rem;
    padding-top: 2rem;
  }

  .section-sp-intro__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .section-sp-intro__text-block {
    margin-top: 0;
  }

  /* Typography: eyebrow label — 0.875rem/500/uppercase */
  .section-sp-intro__eyebrow-label {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: -0.0131rem;
    font-weight: 500;
  }

  /* Typography: heading — 1.25rem/600/uppercase */
  .section-sp-intro__heading {
    font-size: 1.25rem;
    line-height: 2rem;
    letter-spacing: -0.0375rem;

    color: var(--Title-Black, #131313);

    /* MB/Heading/H2/20 */
    font-family: "Lexend Deca";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; /* 2rem */
    letter-spacing: -0.0375rem;
    text-transform: uppercase;
    max-width: 16rem;
  }

  /* Typography: description — 0.875rem/300 */
  .section-sp-intro__desc {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: -0.0175rem;
    margin-top: 0.62rem;
  }
  .section-sp-intro__features{
        margin: 0.75rem 0 0;
  }

  /* Typography: feature labels — 0.875rem/300 */
  .section-sp-intro__feature-label {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: -0.0175rem;
  }

  /* Buttons: two side-by-side, each ~50% width */
  .section-sp-intro__actions {
    flex-wrap: nowrap;
    gap: 0.63rem;
    margin-top: 1.5rem;
  }

  .section-sp-intro__actions .tt-btn {
    flex: 0 0 10.41rem;
    width: 10.41rem;
    height: 2.63rem;
    min-width: 0;
    padding: 0 0.75rem;
  }

  /* Image: full-width below content — mobile 343×350 (2348:32772), ratio 102.04% */
  .section-sp-intro__media {
    flex: 0 0 auto;
    width: 100%;
    height: 0;
    padding-top: 102.04%;
    margin-left: 0;
    margin-top: 1.5rem;
  }
}


/* ===== template-parts/chi-tiet-san-pham/section-seo/assets/styles.css ===== */
/* ==========================================================================
   Section: SEO (chi-tiet-san-pham) — Figma node 2348:32691
   Khối nội dung SEO căn giữa: tiêu đề + WYSIWYG + nút "Xem thêm".
   Tokens dùng chung khai báo ở assets/css/variables.css.
   ========================================================================== */

.section-sp-seo {
    --section-sp-seo-preview-height: 31rem;
    width: 100%;
    display: flex;
    justify-content: center;
    /* Figma padding: top 0, right/left/bottom 6.25rem. */
    padding: 0 6.25rem 6.25rem;
    background-color: var(--tt-white);
    font-family: var(--tt-font);
}

.section-sp-seo__body:first-child {
    margin-top: 0;
}

.section-sp-seo__body > *:first-child {
    margin-top: 0;
}

/* "Section Title" 2348:32692 — cột căn giữa, rộng 62.5rem. */
.section-sp-seo__inner {
    width: 100%;
    max-width: 87.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* "Content" 2348:32693 — cột full width. */
.section-sp-seo__content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Heading 2348:32694 */
.section-sp-seo__title {
    margin: 0;
    width: 100%;
    font-family: var(--tt-font);
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 3.25rem;
    letter-spacing: -0.05rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--tt-heading);
}

/* Body "Frame 2147264710" 2348:32695 — WYSIWYG, đoạn văn 2348:32696-700.
   margin-top 1.25rem so với heading (child_margin của Content).
   min-height: 31rem (= height body frame Figma) để section luôn đúng chiều cao design
   ngay cả khi ACF content ngắn hơn placeholder Figma. */
.section-sp-seo__body {
    width: 100%;
    margin-top: 1.25rem;
    max-height: none;
    overflow: visible;
    font-family: var(--tt-font);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.02rem;
    text-align: left;
    color: var(--tt-heading);
}

.section-sp-seo__body::after {
    content: "";
    display: table;
    clear: both;
}

/* child_margin 1rem giữa các đoạn (body column). */
.section-sp-seo__body > * + * {
    margin-top: 1rem;
}

.section-sp-seo__body p {
    margin-top: 1rem;
    font-family: var(--tt-font);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.02rem;
    text-align: left;
    color: var(--tt-heading);
}

.section-sp-seo__body h2,
.section-sp-seo__body h2.wp-block-heading {
    margin-top: 2rem;
    font-family: var(--tt-font);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.625rem;
    letter-spacing: -0.0187rem;
    color: var(--tt-heading);
}

.section-sp-seo__body h3,
.section-sp-seo__body h3.wp-block-heading {
    margin-top: 1.5rem;
    font-family: var(--tt-font);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: -0.0187rem;
    color: var(--tt-heading);
}

.section-sp-seo__body h4,
.section-sp-seo__body h4.wp-block-heading,
.section-sp-seo__body h5,
.section-sp-seo__body h5.wp-block-heading,
.section-sp-seo__body h6,
.section-sp-seo__body h6.wp-block-heading {
    margin-top: 1.25rem;
    font-family: var(--tt-font);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.0187rem;
    color: var(--tt-heading);
}

.section-sp-seo__body strong,
.section-sp-seo__body b {
    font-weight: 600;
}

.section-sp-seo__body em,
.section-sp-seo__body i {
    font-style: italic;
}

.section-sp-seo__body a {
    display: inline;
    color: var(--tt-orange-accent, #fa6900);
    text-decoration: underline;
    text-underline-offset: 0.125rem;
    transition: color 0.2s ease;
}

.section-sp-seo__body a:hover {
    color: var(--tt-orange-600, #c14821);
}

.section-sp-seo__body ul,
.section-sp-seo__body ol,
.section-sp-seo__body .wp-block-list {
    margin-top: 1rem;
    padding-left: 1.5rem;
}

.section-sp-seo__body ul {
    list-style: disc;
}

.section-sp-seo__body ol {
    list-style: decimal;
}

.section-sp-seo__body li {
    font-family: var(--tt-font);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.02rem;
    color: var(--tt-heading);
}

.section-sp-seo__body li + li {
    margin-top: 0.375rem;
}

.section-sp-seo__body li > ul,
.section-sp-seo__body li > ol {
    margin-top: 0.375rem;
}

.section-sp-seo__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 1.75rem;
}

.section-sp-seo__body blockquote {
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 0.1875rem solid var(--tt-orange-accent, #fa6900);
}

/* Read-more: clamp về chiều cao preview = body frame Figma (31rem).
   Chỉ kích hoạt khi JS thêm .is-collapsible (nội dung dài hơn preview). */
.section-sp-seo.is-collapsible.is-collapsed .section-sp-seo__body {
    max-height: 31.2rem; /* Figma 2348:32695 height */
    overflow: hidden;
}

/* Nút "Xem thêm" "Buttons" 2348:32701 — margin-top 2rem (child_margin Section Title). */
.section-sp-seo__more {
    margin-top: 2rem;
}

/* Hover variant (Figma reaction ON_HOVER → Status=Hover): outline button đổi nền cam,
   chữ trắng → icon cam phải đổi sang trắng để không vô hình. Scoped trong section. */
.section-sp-seo .tt-btn--outline:hover .tt-btn__icon {
    filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Mobile — Figma node 2348:32773 (375 / 23.4375rem).
   H2: 1.25rem/2rem uppercase left-align.
   Body: 0.875rem/1.3125rem weight 300 left-align.
   Button: full-width. Side padding 1rem.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 639.98px) {
    .section-sp-seo {
        --section-sp-seo-preview-height: 33.82rem;
        padding: 2.5rem 1rem 3rem;
        padding-top: 0;
    }

    .section-sp-seo__inner {
        width: 100%;
    }

    /* H2 Figma 2348:32777: 1.25rem/2rem, weight 600, ls -0.0375rem, left-aligned */
    .section-sp-seo__title {
        font-size: 1.25rem;
        line-height: 2rem;
        letter-spacing: -0.0375rem;
        text-align: left;
    }

    /* Body Figma 2348:32780-32782: 0.875rem/1.3125rem, weight 300, ls -0.0175rem */
    .section-sp-seo__body {
        font-size: 0.875rem;
        line-height: 1.3125rem;
        letter-spacing: -0.0175rem;
        text-align: left;
        margin-top: 1rem;
        min-height: 0;
    }

    .section-sp-seo__more {
        margin-top: 1.5rem;
    }

    /* Collapsed state: mobile preview height. Expanded state keeps max-height off. */
    .section-sp-seo.is-collapsible.is-collapsed .section-sp-seo__body {
        max-height: 33rem;
    }

    /* Button: full-width (Figma 2348:32784 sizing_h=FILL) */
    .section-sp-seo__more {
        width: 100%;
    }

    .section-sp-seo__more .tt-btn {
        width: 100%;
        justify-content: center;
    }
    .section-sp-seo__body p,
    .section-sp-seo__body li {
        font-size: 0.875rem;
        line-height: 1.3125rem;
        letter-spacing: -0.0175rem;
    }

    .section-sp-seo__body h2,
    .section-sp-seo__body h2.wp-block-heading {
        font-size: 1rem;
        line-height: 1.5rem;
        margin-top: 1.5rem;
    }

    .section-sp-seo__body h3,
    .section-sp-seo__body h3.wp-block-heading {
        font-size: 0.9375rem;
        line-height: 1.375rem;
        margin-top: 1.25rem;
    }

    .section-sp-seo__body h4,
    .section-sp-seo__body h4.wp-block-heading,
    .section-sp-seo__body h5,
    .section-sp-seo__body h5.wp-block-heading,
    .section-sp-seo__body h6,
    .section-sp-seo__body h6.wp-block-heading {
        font-size: 0.875rem;
        line-height: 1.3125rem;
        margin-top: 1rem;
    }
}


/* ===== template-parts/chi-tiet-san-pham/section-projects/assets/styles.css ===== */
/* Section: Các dự án đã triển khai (projects) — Chi tiết sản phẩm (node 2348:32702) */

.section-sp-projects {
    box-sizing: border-box;
    width: 100%;
    /* Figma frame: padding 6.25rem dọc, 5.875rem ngang; nền xám #e7e7e7. */
    padding: 6.25rem 5.875rem;
    background-color: #e7e7e7;
    font-family: var(--tt-font);
}

/* ── Header (node 2348:32703): tiêu đề trái + nav phải ───────────────────────── */
.section-sp-projects__header {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
}

.section-sp-projects__heading-group {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Tiêu đề section (node 2348:32705): 600 / 2.5rem / 3.25rem / -0.05rem / uppercase. */
.section-sp-projects__title {
    margin: 0;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 3.25rem;
    letter-spacing: -0.05rem;
    text-transform: uppercase;
    color: var(--tt-heading);
}

/* Mô tả section (node 2348:32706): 300 / 1rem / 1.5rem / -0.02rem. margin-top 1rem. */
.section-sp-projects__desc {
    margin: 1rem 0 0;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.02rem;
    color: var(--tt-heading);
}

/* ── Nav điều hướng carousel (node 2348:32707) ──────────────────────────────── */
.section-sp-projects__nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    margin-left: 2rem;
}

/* Nút icon (node 2348:32708/9): 2.75rem vuông, nền xám #F2F3F5, mũi tên #131313 — đồng bộ
   với section-documents__nav-btn. */
.section-sp-projects__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--Neutral-Xm, #F2F3F5);
    color: var(--tt-heading);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.section-sp-projects__nav-btn:focus-visible {
    outline: 0.125rem solid var(--tt-orange-accent);
    outline-offset: 0.125rem;
}

.section-sp-projects__nav-btn + .section-sp-projects__nav-btn {
    margin-left: 0.625rem;
}

/* Bộ đếm slide "01/03" — chỉ hiện ở mobile (desktop Figma không có). */
.section-sp-projects__counter {
    display: none;
    color: var(--tt-heading);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 150%; /* 1.3125rem */
}

.section-sp-projects__nav-btn svg {
    display: block;
    width: 2rem;
    height: 2rem;
}

/* Mũi tên "tiếp theo" = lật ngang mũi tên trái (Figma cùng dùng Arrow_Left_MD). */
.section-sp-projects__nav-btn--next svg {
    transform: scaleX(-1);
}

/* Hover only when the Swiper nav can move. */
.section-sp-projects__nav-btn:not(.swiper-button-disabled):not(:disabled):hover {
    background-color: var(--tt-orange-accent, #fa6900);
    color: var(--tt-white, #ffffff);
}

.section-sp-projects__nav-btn.swiper-button-disabled,
.section-sp-projects__nav-btn:disabled {
    background-color: #d9d9d9;
    color: var(--tt-text-muted, #4b4a4a);
    opacity: 0.85;
    cursor: default;
    pointer-events: none;
}

/* ── Carousel (node 2348:32710): 2 card/view, gap 2rem ──────────────────────── */
.section-sp-projects__carousel {
    /* child_margin giữa header và carousel = 2.5rem. */
    margin-top: 2.5rem;
    width: 100%;
}

.section-sp-projects__track {
    /* equal-height slides */
    align-items: stretch;
}

.section-sp-projects__carousel .swiper-slide {
    height: auto;
}

/* ── Card dự án (instance 2348:32711) ───────────────────────────────────────── */
.section-sp-projects__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--tt-white);
    box-shadow: 0 0.25rem 1.5rem 0 rgba(0, 0, 0, 0.03);
}

/* Ảnh card (node ...32833): full width, cao 19rem. */
.section-sp-projects__card-media {
    width: 100%;
    height: 19rem;
    overflow: hidden;
}

.section-sp-projects__card-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body card (node ...32834): padding 1.5rem. */
.section-sp-projects__card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

/* Khối info (node ...32835): text + tags, cách nhau 1.75rem. */
.section-sp-projects__card-info {
    display: flex;
    flex-direction: column;
}

/* Khối text (node ...32836): tiêu đề + mô tả, cách nhau 0.875rem. */
.section-sp-projects__card-text {
    display: flex;
    flex-direction: column;
}

/* Tiêu đề card (node ...32837): 600 / 1.5625rem / 2.0312rem / uppercase. */
.section-sp-projects__card-title {
    margin: 0;
    font-weight: 600;
    font-size: 1.5625rem;
    line-height: 2.0312rem;
    text-transform: uppercase;
    color: #000;
}

/* Mô tả card (node ...32838): 300 / 1rem / 1.5rem / -0.02rem. clamp 2 dòng (Figma cao 3rem). */
.section-sp-projects__card-desc {
    margin: 0.875rem 0 0;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.02rem;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags (node ...32839): hàng ngang, cách nhau 0.5rem. */
.section-sp-projects__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
}

.section-sp-projects__card-tags .tt-tag + .tt-tag {
    margin-left: 0;
}

/* Tag biến thể trong card (Figma node ...32840, "Variant2"): nền xám #f2f3f5, chữ tối —
   override màu cam mặc định của component cho đúng design section này. */
.section-sp-projects__card-tags .tt-tag {
    background-color: #f2f3f5;
    color: #000;
}

/* Nút card (node ...32843): primary xl, FILL chiều ngang. child_margin tới info = 3rem. */
.section-sp-projects__card-action {
    margin-top: 3rem;
}

.section-sp-projects__card-action .tt-btn {
    display: flex;
    width: 100%;
}

/* ── Mobile — Figma node 2348:32785 (375 / 23.4375rem) ───────────────────────── */
/* Swiper 2 card/view xếp dọc (grid rows 2 — xem scripts.js). */
@media screen and (max-width: 639.98px) {
    .section-sp-projects {
        padding: 3rem 1rem;
    }
    .section-sp-projects__card-body{
        padding:0.88rem;
        flex: 0 0 auto;
    }
    .section-sp-projects__nav-btn{
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        flex: 0 0 2.5rem;
        background-color: var(--Neutral-Xm, #F2F3F5);
        line-height: 1;
    }
    .section-sp-projects__nav-btn svg{
        width: 1.8rem;
        height: 1.8rem;
        flex-shrink: 0;
    }

    /* Mobile: nav xuống dưới cùng. Section thành flex-column, header "display:contents"
       để heading-group / nav trở thành flex-item trực tiếp → reorder bằng order. */
    .section-sp-projects {
        display: flex;
        flex-direction: column;
    }

    .section-sp-projects__header {
        display: contents;
    }

    .section-sp-projects__heading-group {
        order: 1;
    }

    .section-sp-projects__carousel {
        order: 2;
    }

    /* Footer carousel: bộ đếm "01/03" trái + 2 nút điều hướng phải. */
    .section-sp-projects__nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .section-sp-projects__counter {
        display: block;
        margin-right: auto;
    }

    /* H2 — Figma 2348:32787: 1.25rem/2rem, ls -0.0375rem */
    .section-sp-projects__title {
        font-size: 1.25rem;
        line-height: 2rem;
        letter-spacing: -0.0375rem;
    }

    /* Section desc — Figma 2348:32788: 0.875rem/1.3125rem, weight 300 */
    .section-sp-projects__desc {
        font-size: 0.875rem;
        line-height: 1.3125rem;
        letter-spacing: -0.0175rem;
        margin-top: 0.75rem;
    }

    .section-sp-projects__carousel {
        margin-top: 1.5rem;
    }

    .section-sp-projects__track {
        align-items: flex-start;
    }

    .section-sp-projects__carousel .swiper-slide,
    .section-sp-projects__card {
        height: auto !important;
    }

    /* Card image strip — 10.875rem (174 / 16) */
    .section-sp-projects__card-media {
        height: 10.875rem;
    }

    /* Card title h3 — Figma I2348:32790;2348:32850: 1rem/1.4rem uppercase */
    .section-sp-projects__card-title {
        font-size: 1rem;
        line-height: 1.4rem;
    }

    /* Card desc — 0.875rem/1.3125rem, weight 300 */
    .section-sp-projects__card-desc {
        font-size: 0.875rem;
        line-height: 1.3125rem;
        letter-spacing: -0.0175rem;
        margin-top: 0.75rem;
        -webkit-line-clamp: 3;
    }
    .section-sp-projects__card-tags{
        margin-top: 0.88rem;
    }

    .section-sp-projects__card-action {
        margin-top: 1.5rem;
    }
}


/* ===== template-parts/chi-tiet-san-pham/section-consult-form/assets/styles.css ===== */
/* =========================================================================
   Section Consult Form — Chi tiết sản phẩm (node 2348:32713)
   Desktop-first. Breakpoint: 639.98px. rem only (1px allowed for borders).
   White bg, 2 columns: LEFT hand-coded form + RIGHT Swiper image carousel.
   Form is hand-coded HTML (.sp-form); scripts.js submits to the CF7 REST endpoint.
   No mobile Figma frame → mobile layout is heuristic (stack, content first).
   ========================================================================= */

.section-sp-form {
  background-color: #ffffff;
}

.section-sp-form__inner {
  display: flex;

  max-width: 100rem;
  margin: 0 auto;
  padding: 6.25rem;
  box-sizing: border-box;
}

/* --- LEFT: content ------------------------------------------------------- */
.section-sp-form__content {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 1.75rem;
}

.section-sp-form__heading {
  margin: 0;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 3.25rem;
  letter-spacing: -0.05rem;
  text-transform: uppercase;
  color: #131313;
}

.section-sp-form__desc {
  margin: 0.75rem 0 0;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02rem;
  color: #131313;
}

/* =========================================================================
   Hand-coded form (.sp-form) — fields: your-name, your-email,
   your-message (textarea). No gap → margins on children. rem only.
   ========================================================================= */
.sp-form {
  width: 100%;
  margin-top: 1.75rem;
}

/* Ẩn form qua class .is-hidden → display:none nên margin-top cũng mất,
   không để lại khoảng cách thừa. Khi không ẩn, margin-top 1.75rem giữ nguyên. */
.sp-form.is-hidden {
  display: none;
}

.sp-form__fields {
  width: 100%;
}

.sp-form__field {
  min-width: 0;
}

.sp-form__field + .sp-form__field {
  margin-top: 0.875rem;
}

/* --- Controls ----------------------------------------------------------- */
.sp-form__control {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f8f8;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  padding: 1.0625rem 0.875rem;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.05rem;
  letter-spacing: -0.0088rem;
  color: #131313;
}

.sp-form__control::placeholder {
  color: rgba(19, 19, 19, 0.4);
  opacity: 1;
}

.sp-form__control:focus-visible {
  outline: none;
  border-color: #fa6900;
}

/* Textarea (Mô tả chi tiết nhu cầu của bạn) — Figma height 6.375rem */
.sp-form__control--textarea {
  min-height: 6.375rem;
  resize: vertical;
}

/* --- Actions: terms + submit -------------------------------------------- */
.sp-form__actions {
  margin-top: 1.75rem;
}

.sp-form__terms {
  margin: 0;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02rem;
  color: #131313;
}

.sp-form__terms--standalone {
  margin-top: 1.75rem;
}

.sp-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1rem;
  padding: 1rem 4rem;
  border: none;
  background-color: #fa6900;
  color: #ffffff;
  cursor: pointer;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.01rem;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.sp-form__submit-icon {
  display: block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  flex: 0 0 auto;
}

.sp-form__submit:hover {
  opacity: 0.9;
}

.sp-form__submit:focus-visible {
  outline: 0.125rem solid #131313;
  outline-offset: 0.125rem;
}

/* Submitting state (JS toggles .is-submitting) */
.sp-form.is-submitting .sp-form__submit {
  opacity: 0.6;
  pointer-events: none;
}

.sp-form.is-submitting .sp-form__submit-text::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  vertical-align: -0.125rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.5);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: sp-form-spin 0.7s linear infinite;
}

@keyframes sp-form-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Validation tips ---------------------------------------------------- */
.sp-form__tip {
  display: block;
  margin-top: 0.25rem;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.2rem;
  color: #e02b2b;
}

.sp-form__tip:empty {
  display: none;
}

.sp-form__field--invalid .sp-form__control {
  border: 1px solid #e02b2b;
}

/* --- Response / success notice (bottom — Figma node 2348:32727,
       annotation: "Thông báo này hiện khi bấm gửi thông tin").
       Mặc định ẩn hoàn toàn (display:none) để KHÔNG chiếm khoảng trống khi
       chưa có thông báo. JS thêm .is-visible khi submit → mới hiện ra kèm
       margin/min-height. ------------------------------------------------- */
.sp-form__response {
  display: none;
  margin: 1.75rem 0 0;
  min-height: 1.5rem;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.02rem;
}

.sp-form__response.is-visible {
  display: block;
}

.sp-form__response--success {
  color: #2db24a;
}

.sp-form__response--error {
  color: #e02b2b;
}

/* =========================================================================
   RIGHT: image carousel (Swiper) — Figma node 2348:32728
   ========================================================================= */
.section-sp-form__media {
  flex: 0 0 39.6875rem;
  width: 39.6875rem;
  margin-left: 5rem;
}

.sp-form-carousel {
  width: 100%;
  height: 33.875rem;
  overflow: hidden;
}

.sp-form-carousel .swiper-slide {
  width: 100%;
  height: 100%;
}

.sp-form-carousel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Controls (progress + nav) — Figma node 2348:32730, height 2.75rem --- */
.sp-form-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.75rem;
  margin-top: 1.25rem;
}

.sp-form-carousel__progress {
  display: flex;
  align-items: center;
}

/* Progress bars (active = wide orange, inactive = narrow grey) */
.sp-form-carousel__bars {
  display: flex;
  align-items: center;
}

.sp-form-carousel__bar {
  display: block;
  width: 2.5rem;
  height: 0.1875rem;
  background-color: rgba(19, 19, 19, 0.4);
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

.sp-form-carousel__bar + .sp-form-carousel__bar {
  margin-left: 0.375rem;
}

.sp-form-carousel__bar.is-active {
  width: 6.25rem;
  background-color: #fa6900;
}

.sp-form-carousel__count {
  margin-left: 0.75rem;
  font-family: "Lexend Deca", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.05rem;
  letter-spacing: -0.0088rem;
  color: #131313;
  white-space: nowrap;
}

/* --- Nav buttons (2 icon buttons) — Figma 2.75rem square, bg #f2f3f5 ----- */
.sp-form-carousel__nav {
  display: flex;
  align-items: center;
}

.sp-form-carousel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background-color: #f2f3f5;
  color: #131313;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.sp-form-carousel__btn + .sp-form-carousel__btn {
  margin-left: 0.625rem;
}

.sp-form-carousel__btn svg {
  display: block;
  width: 2rem;
  height: 2rem;
}

/* Mũi tên "sau" = lật ngang mũi tên trái (đồng bộ section-sp-documents__nav-btn--next). */
.sp-form-carousel__btn--next svg {
  transform: scaleX(-1);
}

/* Hover variant present in Figma (ON_HOVER → SMART_ANIMATE). Exact hover fill
   not exported in cache → use the design's orange accent (#fa6900) + white icon.
   TODO: confirm hover variant styling (node 2348:36970). */
.sp-form-carousel__btn:not(.swiper-button-disabled):not(:disabled):hover {
  background-color: #fa6900;
  color: #ffffff;
}

.sp-form-carousel__btn:focus-visible {
  outline: 0.125rem solid var(--tt-orange-accent);
  outline-offset: 0.125rem;
}

.sp-form-carousel__btn.swiper-button-disabled,
.sp-form-carousel__btn:disabled {
  background-color: #d9d9d9;
  color: #4b4a4a;
  opacity: 0.85;
  cursor: default;
  pointer-events: none;
}

/* =========================================================================
   Mobile — Figma node 2348:32802 (375 / 23.4375rem).
   Stack 1 cột: form trên → carousel ảnh dưới. Padding 3rem 1rem.
   ========================================================================= */
@media screen and (max-width: 639.98px) {
  .section-sp-form__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 3rem 1rem;
  }
  .sp-form {
    margin-top: 1.25rem;
  }
  .section-sp-form__content {
    margin-top: 0;
  }

  .sp-form-carousel__progress {
    display: none !important;
  }
  /* H2 heading — Figma 2348:32804: 1.25rem/2rem uppercase */
  .section-sp-form__heading {
    font-size: 1.25rem;
    line-height: 2rem;
    letter-spacing: -0.0375rem;
  }

  /* Desc — Figma 2348:32805: 0.875rem/1.3125rem, weight 300 */
  .section-sp-form__desc {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: -0.0175rem;
  }
  .sp-form__actions {
    margin-top: 1.25rem;
  }

  /* Inputs/textarea — 0.875rem theo body-scale mobile */
  .sp-form__control {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    height: 3.25rem;
  }

  /* Terms — Figma 2348:32813: 0.875rem/1.3125rem, weight 300 */
  .sp-form__terms {
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: -0.0175rem;
  }

  /* Success/error message — Figma 2348:32815: 0.875rem */
  .sp-form__response {
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }


  .section-sp-form__media {
    flex: 1 1 auto;
    width: 100%;
    margin-left: 0;
    margin-top: 1.25rem;
    /* Mốc định vị cho nav overlay (prev/next nằm giữa slide) */
    position: relative;
  }
  .sp-form-carousel__btn--next {
    margin-right: 0.62rem;
  }
  .sp-form-carousel__btn--prev {
    margin-left: 0.62rem;
  }

  /* Carousel ảnh — Figma ~18.2978rem (293 / 16) */
  .sp-form-carousel {
    height: 18.2978rem;
  }
  .sp-form__response {
    margin-top: 0;
    margin-top: 1.25rem;

/* PC/14/14-L-120 */
font-family: "Lexend Deca";
font-size: 0.875rem;
font-style: normal;
font-weight: 300;
line-height: 120%; /* 1.05rem */
letter-spacing: -0.00875rem;
  }

  .sp-form__response--success {
    color: #2db24a;
  }

  .sp-form__response--error {
    color: #e02b2b;
  }

  /* Controls không còn chiếm chỗ dưới slide — chỉ progress (đã ẩn) ở đây;
       nav được kéo ra overlay nên thu gọn container về 0. */
  .sp-form-carousel__controls {
    height: 0;
    margin-top: 0;
  }

  /* Nav prev/next: phủ lên carousel, căn giữa theo chiều dọc, 2 nút dạt 2 mép */
  .sp-form-carousel__nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 18.2978rem;
    justify-content: space-between;
    z-index: 2;
    /* Chỉ các nút bắt click, vùng trống giữa để xuyên xuống ảnh */
    pointer-events: none;
  }

  .sp-form-carousel__btn {
    pointer-events: auto;
  }

  /* space-between đã tách 2 nút — bỏ margin nối giữa chúng */
  .sp-form-carousel__btn + .sp-form-carousel__btn {
    margin-left: 0;
  }
}


/* ===== template-parts/chi-tiet-san-pham/section-documents/assets/styles.css ===== */
/* Section: Tài nguyên kỹ thuật và hồ sơ (documents carousel) — node 2348:32731 */

.section-sp-documents {
    box-sizing: border-box;
    width: 100%;
    padding: 6.25rem;
    background-color: var(--tt-white);
    font-family: var(--tt-font);
}

/* ── Frame trong (node I2348:32731;2348:37554) ─────────────────────────────── */
.section-sp-documents__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* ── Head: heading-group | nav (node I2348:32731;2348:37555) ───────────────── */
.section-sp-documents__head {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
}

/* Heading-group: tiêu đề + mô tả (node I2348:32731;2348:37556) */
.section-sp-documents__heading-group {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-sp-documents__title {
    margin: 0;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 3.25rem;
    letter-spacing: -0.05rem;
    text-transform: uppercase;
    color: var(--tt-heading);
}

.section-sp-documents__desc {
    margin: 0.875rem 0 0;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.02rem;
    color: var(--tt-heading);
}

/* Nav prev/next follows the header placement used by section-sp-projects__nav. */
.section-sp-documents__nav {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    margin-left: 2rem;
}

.section-sp-documents__nav-btn + .section-sp-documents__nav-btn {
    margin-left: 0.625rem;
}

.section-sp-documents__counter {
    display: none;
    color: var(--tt-heading);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 150%;
}

/* Nút icon nền xám #f2f3f5, mũi tên #131313 — Figma không bo góc (radius 0). */
.section-sp-documents__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--Neutral-Xm, #F2F3F5);
    color: var(--tt-heading);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.section-sp-documents__nav-btn:focus-visible {
    outline: 0.125rem solid var(--tt-orange-accent);
    outline-offset: 0.125rem;
}

.section-sp-documents__nav-btn svg,
.section-sp-documents__nav-icon {
    display: block;
    width: 2rem;
    height: 2rem;
}

.section-sp-documents__nav-btn--next svg {
    transform: scaleX(-1);
}

.section-sp-documents__nav-btn:not(.swiper-button-disabled):not(.section-sp-documents__nav-btn--disabled):not(:disabled):hover {
    background-color: var(--tt-orange-accent, #fa6900);
    color: var(--tt-white, #ffffff);
}

.section-sp-documents__nav-btn.swiper-button-disabled,
.section-sp-documents__nav-btn--disabled,
.section-sp-documents__nav-btn:disabled {
    background-color: #d9d9d9;
    color: var(--tt-text-muted, #4b4a4a);
    opacity: 0.85;
    cursor: default;
    pointer-events: none;
}

/* ── Carousel viewport (node I2348:32731;2348:37562) ───────────────────────── */
.section-sp-documents__carousel {
    margin-top: 2.5rem;
    width: 100%;
}

.section-sp-documents__swiper {
    width: 100%;
    overflow: hidden;
}

.section-sp-documents__swiper .swiper-wrapper {
    align-items: stretch;
}

.section-sp-documents__swiper .swiper-slide {
    height: auto;
}

.section-sp-documents__swiper .swiper-slide.section-sp-documents__page {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

/* ── Card tài liệu (Media, node I2348:32731;2348:37564) ────────────────────── */
.section-sp-documents__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    padding-right: 1.875rem;
    background: #F2F2F2;
}

/* Ảnh thumbnail (node ...;2348:27234 / Rectangle 27235) — không bo góc */
.section-sp-documents__card-media {
    position: relative;
    flex: 0 0 18.125rem;
    width: 18.125rem;
    height: 14.3125rem;
    overflow: hidden;
}
.section-sp-documents__card:hover .section-sp-documents__card-image{
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}
.section-sp-documents__card-media{
    overflow: hidden;
}
.section-sp-documents__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Body: text + nút (node ...;2348:27236, FILL chiều cao theo ảnh) */
.section-sp-documents__card-body {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-sp-documents__card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.section-sp-documents__card-title {
    margin: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.625rem;
    letter-spacing: -0.0187rem;
    text-transform: uppercase;
    color: var(--tt-heading);
}

.section-sp-documents__card-desc {
    margin: 0.625rem 0 0;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.02rem;
    color: var(--tt-heading);
}

.section-sp-documents__card-action {
    margin-top: 2.5rem;
    border-top-left-radius: 0.25rem;
     border-bottom-left-radius: 0.25rem;
}

/* Không có file → nút mờ đi, không cho click */
.section-sp-documents__card-action--disabled .tt-btn {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
}

/* ── Button size override (scoped: Figma Size=L = 0.875rem, not global 1rem) ── */
.section-sp-documents .tt-btn--l {
    font-size: 0.875rem;
    line-height: 1.1375rem;
    letter-spacing: -0.0088rem;
}

/* ── Mobile — Figma node 2348:32822 (375 / 23.4375rem) ───────────────────────── */
/* Mobile carousel: 1 column x 2 items, swipes horizontally. Padding 0 1rem 2.5rem (top 0). */
@media screen and (max-width: 639.98px) {
    .section-sp-documents {
        padding: 0 1rem 2.5rem;
    }
    .section-sp-documents__desc{
        display: none;
    }

    .section-sp-documents__head {
        display: contents;
    }

    .section-sp-documents__heading-group {
        order: 1;
    }

    .section-sp-documents__nav {
        order: 3;
        display: flex;
        width: 100%;
        margin-left: 0;
        margin-top: 1.5rem;
    }

    .section-sp-documents__counter {
        display: block;
        margin-right: auto;
    }

    .section-sp-documents__nav-btn {
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        flex: 0 0 2.5rem;
        background-color: var(--Neutral-Xm, #F2F3F5);
        line-height: 1;
    }

    .section-sp-documents__nav-btn svg,
    .section-sp-documents__nav-icon {
        width: 1.8rem;
        height: 1.8rem;
        flex-shrink: 0;
    }

    /* H2 — Figma 2348:32826: 1.25rem/2rem uppercase */
    .section-sp-documents__title {
        font-size: 1.25rem;
        line-height: 2rem;
        letter-spacing: -0.0375rem;
    }

    .section-sp-documents__card {
        flex-direction: column;
        align-items: stretch;
        padding-right: 0;
        background: #F2F2F2;
    }

    .section-sp-documents__carousel {
        order: 2;
        margin-top: 1.25rem;
    }

    .section-sp-documents__swiper {
        overflow: hidden;
    }

    .section-sp-documents__swiper .swiper-wrapper {
        align-items: flex-start;
    }

    .section-sp-documents__swiper .swiper-slide,
    .section-sp-documents__card {
        height: auto !important;
    }

    .section-sp-documents__swiper .swiper-slide.section-sp-documents__page {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: auto !important;
    }

    /* Card image — 14.3125rem (229 / 16) */
    .section-sp-documents__card-media {
        flex: 0 0 auto;
        width: 100%;
        height: 10.125rem;
    }

    .section-sp-documents__card-body {
        margin-left: 0;
        margin-top: 0.88rem;
    }

    /* Card title h3 — Figma I2348:32828;2348:27249: 1rem/1.5rem uppercase */
    .section-sp-documents__card-title {
        font-size: 1rem;
        line-height: 1.5rem;
        padding-left: 0.88rem;
        padding-right: 0.88rem;
    }

    /* Card desc — 0.875rem/1.3125rem, weight 300 */
    .section-sp-documents__card-desc {
        font-size: 0.875rem;
        line-height: 1.3125rem;
        letter-spacing: -0.0175rem;
        margin-top: 0.5rem;
        padding-left: 0.88rem;
        padding-right: 0.88rem;
    }
    .section-sp-documents__card-image{
        border-radius: 0rem;
        border-top-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }

    .section-sp-documents__card-action {
        margin-top: 1.5rem;
        padding-left: 0.88em;
        padding-bottom: 1rem;
    }
}


/* ===== template-parts/chi-tiet-san-pham/assets/styles.css ===== */
/* Chi tiết sản phẩm — page bundle
   Import component CSS first (tokens), then sections in layout order */

/* Shared components */



/* Sections */







/* Button color override for the chi-tiet-san-pham page bundle. */
.tt-btn--primary,
.sp-form__submit {
    background: var(--Title-Orange, #FA6900);
    border-color: var(--Title-Orange, #FA6900);
    color: var(--tt-white, #ffffff);
}

.tt-btn--primary:hover,
.sp-form__submit:hover {
    background: #FF7B1C;
    border-color: #FF7B1C;
    color: var(--tt-white, #ffffff);
    opacity: 1;
}

.tt-btn--primary .tt-btn__icon {
    filter: brightness(0) invert(1);
}

.section-sp-documents__card-action .tt-btn__icon {
    transform: rotate(90deg);
    transform-origin: center;
}

.section-sp-projects__nav-btn,
.section-sp-documents__nav-btn,
.sp-form-carousel__btn {
    color: var(--tt-heading, #131313);
}

.section-sp-projects__nav-btn:not(.swiper-button-disabled):not(:disabled):hover,
.section-sp-documents__nav-btn:not(.swiper-button-disabled):not(.section-sp-documents__nav-btn--disabled):not(:disabled):hover,
.sp-form-carousel__btn:not(.swiper-button-disabled):not(:disabled):hover {
    background: var(--Title-Orange, #FA6900);
    color: var(--tt-white, #ffffff);
}

.section-sp-projects__nav-btn.swiper-button-disabled,
.section-sp-projects__nav-btn:disabled,
.section-sp-documents__nav-btn.swiper-button-disabled,
.section-sp-documents__nav-btn--disabled,
.section-sp-documents__nav-btn:disabled,
.sp-form-carousel__btn.swiper-button-disabled,
.sp-form-carousel__btn:disabled {
    background: #d9d9d9;
    color: var(--tt-text-muted, #4b4a4a);
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

@media screen and (max-width: 639.98px) {
    .tt-btn--primary,
    .sp-form__submit {
        height: 2.62rem;
        padding-top: 0;
        padding-bottom: 0;letter-spacing: -0.00875rem;
        font-size: 0.875rem;
    }
}