/**
 * bridge.css — CSS bespoke DUY NHẤT của dự án Company (hàng native+css / class bridge của conversion-map §3).
 * Luật (bin-html-to-elementor references/style-ownership-and-css-bridge.md):
 *  - màu/chữ đi control + __globals__ của kit; ở đây chỉ thứ KHÔNG có control (pseudo, mask, kích thước khung icon, trạng thái hover
 *    theo thẻ cha, vị trí nhãn %…) — mỗi khối ghi lý do;
 *  - alias màu kit khai trên body[class*="elementor-kit-"] (kit định nghĩa --e-global-color-* trên .elementor-kit-N, không phải :root);
 *  - pseudo/lớp phủ trang trí luôn pointer-events:none; SVG data-URI luôn có xmlns (khối @generated cuối file).
 * Giá trị lấy từ HTML/assets/css/main.css của nguồn (ghi mục nguồn ở từng khối).
 */

/* 1. Alias var kit (kit/token-map.json) — tên theo biến nguồn :root để đối chiếu main.css */
body[class*="elementor-kit-"] {
  --accent-color: var(--e-global-color-primary);
  --heading-color: var(--e-global-color-secondary);
  --default-color: var(--e-global-color-text);
  --surface-color: var(--e-global-color-573f472);
  --contrast-color: var(--e-global-color-573f472);
  --light-background-color: var(--e-global-color-df2265a);
  --dark-background-color: var(--e-global-color-9c80ab5);
  --dark-surface-color: var(--e-global-color-b272749);
}

/* 2. Token ngoài kit — khối :root của nguồn không có spacing/radius/shadow riêng; giữ hành vi cuộn mượt (main.css "Smooth scroll") */
:root {
  scroll-behavior: smooth;
}

/* 2b. Reboot theo Bootstrap 5.3 của nguồn (reset của Hello khác): heading margin 0 0 .5rem (Hello .5rem 0 1rem), đoạn văn
   margin 0 0 1rem (Hello .9rem), không ép làm mượt font. Specificity thẻ (0,0,1) — control của widget (Spacing, Paragraph Spacing,
   title_bottom_space) vẫn thắng khi đặt. */
body[class*="elementor-kit-"] {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* 3. Gutter chỉ thuộc top-level container (kit container_padding 0 12px áp mọi container) */
.e-con .e-con:not(.e-con-boxed) {
  --container-default-padding-top: 0;
  --container-default-padding-right: 0;
  --container-default-padding-bottom: 0;
  --container-default-padding-left: 0;
}

/* 4. Component classes */

/* 4.1 Tiêu đề section (main.css "Global Section Titles"): gạch accent 50×3 dưới h2 — pseudo, không có control.
   Khoảng padding/margin 20px của h2 = control Advanced của widget heading (spec); pseudo gắn vào h2 thật nhưng định vị theo
   wrapper widget (position:relative) — không đụng position của chính widget. */
.section-title__heading .elementor-heading-title::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  pointer-events: none;
}

/* 4.1b Icon Bootstrap Icons trong icon-list: rộng đúng 1em như <i> của nguồn (Elementor mặc định 1.25em cho icon font) —
   không có control bề rộng icon; cỡ/màu icon vẫn là control của widget. */
.elementor-widget-icon-list .elementor-icon-list-icon i.bi {
  width: 1em;
}

.elementor-widget-icon-list .elementor-icon-list-icon:has(> i.bi) + .elementor-icon-list-text {
  padding-inline-start: 0; /* khoảng icon↔chữ = control Text Indent (đúng số của nguồn), bỏ 5px mặc định của Elementor */
}

/* Chiều cao dòng của icon theo nguồn: danh sách About `i{line-height:1.2}` · Bảng giá ul{line-height:20px} */
.our-story__list .elementor-icon-list-icon i.bi {
  line-height: 1.2;
}

.pricing-item__features .elementor-icon-list-icon i.bi {
  line-height: 20px;
}

/* 4.2 Thẻ dịch vụ (main.css "Services Section"): khung icon 100×100 + blob nền (mask, hình theo thẻ ở khối @generated);
   rê thẻ → icon trắng, blob đổi sang màu icon của thẻ (currentColor = control màu icon). Chỉ áp ở :hover → control màu vẫn ăn. */
.service-item__icon .elementor-icon {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-item__icon .elementor-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  -webkit-mask: var(--service-blob) center / 100% 100% no-repeat;
  mask: var(--service-blob) center / 100% 100% no-repeat;
  transition: background-color 0.5s;
  pointer-events: none;
}

.service-item__icon .elementor-icon i {
  position: relative;
  transition: color 0.5s;
}

.e-con.service-item:hover .service-item__icon .elementor-icon i {
  color: var(--contrast-color);
}

.e-con.service-item:hover .service-item__icon .elementor-icon::before {
  background-color: currentColor;
}

/* 4.3 Hero (main.css "Hero Section"): widget ảnh absolute (control Position/Offset) phủ kín slide — chiều cao wrapper không có control;
   chấm phân trang: nguồn chấm thường mờ 0.6, chấm active màu accent (nested-carousel chỉ có control màu thường/hover). */
.hero-slide__image {
  height: 100%;
}

.hero-slider {
  --swiper-pagination-bullet-inactive-opacity: 0.6;
}

.hero-slider .swiper-pagination-bullet-active {
  background: var(--accent-color);
}

/* 4.4 About (main.css "About Section"): ảnh phủ kín cột ảnh (wrapper absolute bằng control, cao 100% ở đây);
   icon nút Watch Video 2rem màu accent (nút không có control cỡ/màu icon riêng). */
.about__image {
  height: 100%;
}

.our-story__video .elementor-button-icon {
  font-size: 2rem;
  color: var(--accent-color);
}

.our-story__video .elementor-button-content-wrapper {
  align-items: center;
}

/* 4.5 Logo khách hàng (main.css "Clients Section"): img padding 50px (≤767: 30px) — image widget không có control padding ảnh;
   max-width 80%/50% = control "Max Width" của widget. Nguồn đổi ở 640px — thống nhất về breakpoint mobile 767 (D-13). */
.client-logo__img img {
  padding: 50px;
}

@media (max-width: 767px) {
  .client-logo__img img {
    padding: 30px;
  }
}

/* 4.6 Bảng giá (main.css "Pricing Section"): ký hiệu tiền `sup` 28px và "/ month" `span` 18px 500 color-mix(default 50%)
   nằm trong tiêu đề giá — phần tử con của heading không có control riêng. */
.pricing-item__price .elementor-heading-title sup {
  font-size: 28px;
}

.pricing-item__price .elementor-heading-title span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
  font-weight: 500;
}

/* 4.7 Kỹ năng (main.css "Skills Section"): nhãn là khối riêng cách thanh 6px; % nằm cùng dòng nhãn, sát phải
   (widget progress đặt % trong thanh — vị trí không có control). */
.skill-bar .elementor-title {
  display: block;
  margin-bottom: 6px;
}

.skill-bar .elementor-progress-wrapper {
  position: static;
}

/* Màu + chữ của nhãn % theo nhãn kỹ năng nguồn (.skill .val: màu tiêu đề, Raleway 600 12px). Elementor 4.3.2 chỉ hiện + chỉ in CSS
   cho control màu/chữ của "Inner Text" khi Inner Text KHÁC rỗng (progress.php condition `inner_text!`) — nguồn không có Inner Text nên
   ô chỉnh màu nhãn % không có trên panel: đổi màu theo màu Secondary của kit (D-64; bảng "ô chỉnh qua CSS"). */
.skill-bar .elementor-progress-percentage {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  color: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

/* 4.8 Testimonial (main.css "Testimonials Section"): dấu ngoặc kép đầu/cuối trích dẫn — bi-quote 26px màu color-mix(accent 50%),
   dấu cuối lật 2 chiều, lệch xuống 10px (mask ở khối @generated). */
.testimonial-quote p::before,
.testimonial-quote p::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 26px;
  height: 26px;
  vertical-align: -3.25px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
  -webkit-mask: var(--testimonial-quote) center / contain no-repeat;
  mask: var(--testimonial-quote) center / contain no-repeat;
  pointer-events: none;
}

.testimonial-quote p::before {
  left: -5px;
}

.testimonial-quote p::after {
  right: -5px;
  top: 10px;
  transform: scale(-1, -1);
}

/* 4.9 Header (main.css "Global Header" · "Navigation Menu"): dấu "." accent 26px sau tên site (tên site = widget site-title, dấu chấm
   là trang trí — dev sửa ở đây); menu con desktop: ul padding 10 0, rộng tối thiểu 200px (không có control cho ul của menu con). */
.header__logo .elementor-heading-title::after {
  content: ".";
  color: var(--accent-color);
  font-size: 26px;
  font-weight: 700;
}

.header__nav .elementor-nav-menu--main .sub-menu {
  padding: 10px 0;
  min-width: 200px !important; /* SmartMenus gắn inline min-width:10em lúc mở; min-width không thuộc control nào của widget */
}

/* Nút menu ≤1199 (nguồn .mobile-nav-toggle: icon 28px trần, không đệm) — Elementor mặc định đệm .25em + dòng 1.5 làm header cao 76px;
   cỡ/màu icon vẫn là control Toggle Button của widget. */
.header__nav .elementor-menu-toggle {
  padding: 0;
  line-height: 1;
}

/* 4.10 Thanh tiêu đề trang (main.css "Global Page Titles & Breadcrumbs"): dấu "/" giữa các mục breadcrumb = color-mix(default 70%)
   → cùng màu chữ (control Text Color) với độ mờ 0.3, không đặt color riêng để control màu chữ vẫn điều khiển cả dấu. */
.page-title-bar__crumbs .elementor-icon-list-item + .elementor-icon-list-item .elementor-icon-list-text::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  opacity: 0.3;
}

/* 4.11 Footer (main.css "Global Footer"): tên site trong dòng bản quyền có padding 0 .25rem (class px-1 của nguồn). */
.copyright__text strong {
  padding: 0 0.25rem;
}

/* 4.11b Footer dính đáy ở trang NGẮN hơn cửa sổ (dự án chưa có chi tiết, 404…): body là cột flex cao tối thiểu bằng cửa sổ, footer đẩy
   xuống đáy thay vì để dải trắng dưới footer. Đo trước khi áp (24 cặp URL × 1180/390): trang dài không đổi 1px, trang ngắn đáy footer =
   đáy cửa sổ (plans/qa/FIX-R2-B3.out). Không áp trong editor (D-68). */
body:not(.elementor-editor-active) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.admin-bar:not(.elementor-editor-active) {
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

body:not(.elementor-editor-active) > .elementor-location-footer {
  margin-top: auto;
}

/* 4.12 Nút lên đầu trang (main.css "Scroll Top Button"): ẩn tới khi cuộn quá 100px (child theme JS gắn .is-visible — §11 ②);
   nhãn "Back to top" ẩn thị giác nhưng giữ tên truy cập (nguồn là icon trần không nhãn). Vị trí cố định = control Position. */
.scroll-top {
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s;
}

.scroll-top.is-visible {
  visibility: visible;
  opacity: 1;
}

.scroll-top .elementor-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 5. Nội dung động + form (phiên B2a) */

/* 5.1 Thẻ bài — Loop item Blog card (main.css "Blog Posts Section"). Thẻ cao bằng ô lưới (h-100 của article nguồn; container không có
   control chiều cao). Khi rê thẻ: ảnh phóng 1.1, tiêu đề + "Read More" màu accent (hiệu ứng theo thẻ CHA — control :hover của từng
   widget chỉ bắt khi rê chính widget đó; thời lượng chuyển của ảnh + "Read More" = control của widget). Dấu "/" giữa tác giả và danh mục = pseudo (nguồn span.px-3 text-black-50, 15px). */
.blog-card {
  height: 100%;
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.1);
}

/* Bài KHÔNG có ảnh đại diện (5 bài "Recent Posts" của nguồn chỉ có tiêu đề + ngày — D-29; bài khách viết không ảnh): Elementor bỏ widget
   ảnh rỗng → khung ảnh cao 0 + overflow ẩn cắt mất nhãn ngày đặt trên ảnh. Khung giữ tỉ lệ 4:3 như ảnh 800×600 của nguồn (thẻ cùng nhịp
   lưới h-100 như nguồn, nhãn ngày đúng góc dưới-phải) và thành ẢNH BÌA có chủ đích: nền tối của kit + icon bài viết màu accent — không
   để ô xám trống (mắt tươi đọc là "ảnh tải lỗi"), không thẻ co ngắn lệch hàng (D-66). ::after (::before của container là lớp phủ nền của
   Elementor). Trong editor giữ nguyên để khách thấy ô ảnh. */
body:not(.elementor-editor-active) .blog-card__media:not(:has(img)) {
  aspect-ratio: 4 / 3;
  background-color: var(--e-global-color-9c80ab5);
}

body:not(.elementor-editor-active) .blog-card__media:not(:has(img))::after {
  content: "";
  width: 56px;
  height: 56px;
  margin: auto;
  background-color: var(--e-global-color-primary);
  -webkit-mask: var(--journal-text) center / contain no-repeat;
  mask: var(--journal-text) center / contain no-repeat;
}

.blog-card__title .elementor-heading-title {
  transition: color 0.3s; /* control thời lượng của tiêu đề chỉ nhắm link <a> trong tiêu đề — tiêu đề thẻ không phải link */
}

.blog-card:hover .blog-card__title .elementor-heading-title,
.blog-card:hover .blog-card__more .elementor-icon-box-title,
.blog-card:hover .blog-card__more .elementor-icon {
  color: var(--accent-color);
  fill: var(--accent-color);
}

.blog-card__meta .elementor-icon-list-item + .elementor-icon-list-item::before {
  content: "/";
  padding: 0 16px;
  color: rgba(0, 0, 0, 0.5);
}

/* Icon Bootstrap Icons của post-info rộng đúng 1em như <i> nguồn (Elementor 1.25em cho icon font) — như 4.1b cho icon-list. */
.elementor-widget-post-info .elementor-icon-list-icon i.bi {
  width: 1em;
}

/* 5.2 Thẻ dự án — Loop item Project card (main.css "Portfolio Section"): lớp thông tin ẩn dưới đáy thẻ, trượt lên + hiện khi rê
   (nguồn: bottom -100% → 0, opacity 0 → 1, 0.5s). Vị trí lớp = control Position/Offset; ẩn/hiện dùng opacity + `translate` (thuộc tính
   riêng, không đụng offset/transform của control). Lớp không nhận chuột, widget bên trong nhận (map §3 LP1); bàn phím: :focus-within.
   Trong editor lớp luôn hiện để khách bấm sửa tiêu đề/mô tả/nút (ngoài site vẫn ẩn tới khi rê). Nhãn 2 nút ẩn thị giác (a11y). */
.project-card__info {
  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.5s ease-in-out, translate 0.5s ease-in-out;
  pointer-events: none;
}

.project-card__info .elementor-element {
  pointer-events: auto;
}

.project-card:hover .project-card__info,
.project-card:focus-within .project-card__info,
body.elementor-editor-active .project-card__info {
  opacity: 1;
  translate: none;
}

.project-card__zoom .elementor-button-text,
.project-card__link .elementor-button-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 5.3 Thẻ thành viên — Loop item Team member (main.css "Team Section"): thanh mạng xã hội hiện khi rê thẻ (opacity 0 → 1, 0.3s). */
.team-member__social {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.team-member:hover .team-member__social,
.team-member:focus-within .team-member__social {
  opacity: 1;
}

/* 5.4 Phân trang Blog (main.css "Blog Pagination Section") — dùng chung cho lưới bài của trang Blog + Archive chung và lưới dự án của Archive Project category (B2b): ô số padding 7 16, trang hiện tại/rê nền accent — phân trang của Loop Grid
   chỉ có control màu chữ/typography/khoảng cách. "Trang trước/sau": nhãn (control) giữ làm tên truy cập, hiển thị mũi tên như nguồn
   (mask); trang trước ở trang 1 (span vô hiệu) ẩn như nguồn. */
:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top; /* ô mũi tên (chữ 0px) cùng đỉnh với ô số */
  padding: 7px 16px;
  transition: 0.3s;
}

:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination .page-numbers.current,
:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination a.page-numbers:hover {
  background-color: var(--accent-color);
}

:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination a.page-numbers.prev,
:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination a.page-numbers.next {
  font-size: 0;
}

:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination a.page-numbers.prev::before,
:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination a.page-numbers.next::before {
  content: "";
  display: block;
  width: 16px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--chevron-right) center / 16px 16px no-repeat;
  mask: var(--chevron-right) center / 16px 16px no-repeat;
  pointer-events: none;
}

:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination a.page-numbers.prev::before {
  -webkit-mask-image: var(--chevron-left);
  mask-image: var(--chevron-left);
}

:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination span.page-numbers.prev,
:is(.blog-posts__grid, .portfolio__grid) .elementor-pagination span.page-numbers.next {
  display: none;
}

/* 5.5 Form Pro (main.css "Contact Section" · "Global Footer"): chữ gợi ý màu default 30% (form không có control màu placeholder);
   viền accent khi ô đang nhập (không có control trạng thái focus). Trường Honeypot: Pro tự ẩn ô (display:none) trong một div 0×0 không
   phải field-group — không cần CSS. */
.contact-form__form .elementor-field-textual::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
  opacity: 1;
}

.contact-form__form .elementor-field-textual:focus,
.footer-newsletter__form .elementor-field-textual:focus {
  border-color: var(--accent-color);
  box-shadow: none;
}

/* Nút Send Message cách ô Message 8px như nguồn (.form-group padding-bottom 8) — các hàng trường vẫn cách 24 theo control Rows Gap
   (form Pro chỉ có 1 control khoảng cách hàng cho cả trường lẫn nút). */
.contact-form__form .e-form__buttons {
  margin-top: -16px;
}

/* 5.6 Trang soạn bằng trình soạn WordPress (Privacy Policy, Terms of Service — map §3 PP2/TO2): nội dung trong template Single Page
   không có section Elementor bao quanh → khung .section + .container của nguồn (padding 60 · bề rộng vùng nội dung của kit + gutter 12)
   và tiêu đề mục h2 22px 700 margin 30 0 12 (main.css "Legal / default page content"). Trang Elementor (body.elementor-page) không bị ảnh
   hưởng. Width/padding là control tab Advanced CHƯA bind của widget (style-ownership §8.3 — layout thuộc bridge); specificity tăng bằng
   class thật để thắng `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }` (0,4,0) của Elementor. */
body:not(.elementor-page) .e-con.page-content .page-content__body.elementor-widget {
  width: 100%;
  max-width: calc(var(--container-max-width, 1116px) + 24px);
  margin: 0 auto;
  padding: 60px 12px;
}

body:not(.elementor-page) .page-content__body h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 30px 0 12px;
}

body:not(.elementor-page) .page-content__body h2:first-child {
  margin-top: 0;
}

/* 6. Theme Builder động (phiên B2b): Single Post · Single Service · Single Project · Archive */

/* 6.1 Single Post — vùng nội dung bài (main.css "Blog Details Section"): tiêu đề mục h3 22px 700 cách trên 30; trích dẫn nền default 5%,
   đệm 60, căn giữa, chữ 22px nghiêng 500 + vạch accent trái (pseudo); ảnh trong bài không tràn khung. Nội dung là block của trình soạn
   WordPress — phần tử bên trong không có control Elementor (Typography/Color của widget Post Content vẫn áp cho chữ thân). */
.blog-details__content h3 {
  margin-top: 30px;
  font-size: 22px;
  font-weight: 700;
}

.blog-details__content blockquote {
  position: relative;
  overflow: hidden;
  margin: 20px 0;
  padding: 60px;
  border: 0;
  text-align: center;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.blog-details__content blockquote p {
  margin-bottom: 0;
  color: var(--default-color);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
}

.blog-details__content blockquote::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  margin: 20px 0;
  background-color: var(--accent-color);
  pointer-events: none;
}

.blog-details__content figure {
  margin: 0 0 1rem;
}

.blog-details__content img {
  max-width: 100%;
  height: auto;
}

/* Nhãn danh mục/thẻ dòng meta cuối bài: màu accent khi rê (post-info không có control màu :hover; màu thường = control Text Color). */
.e-con .blog-details__terms.elementor-widget .elementor-icon-list-text a:hover {
  color: var(--accent-color);
}

/* 6.2 Bình luận + form "Post Comment" (comments.php của child — main.css "Blog Comments Section" · "Comment Form Section"). Gỡ kiểu
   bình luận của theme cha Hello (theme.css `#comments …`: ảnh absolute bo tròn, vạch dưới, mũi tên ↪ trước trả lời, gạch chân link)
   bằng cùng id + class của khối, rồi dựng lại bố cục nguồn: ảnh 60 trái, tên + Reply cùng dòng, ngày, nội dung; trả lời thụt 40. */
#comments.blog-comments__area a {
  text-decoration: none;
}

#comments.blog-comments__area .comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: inherit;
}

#comments.blog-comments__area .comment-list .children {
  margin: 0;
  padding: 0 0 0 40px;
  list-style: none;
}

#comments.blog-comments__area ol.comment-list .children::before {
  content: none;
}

#comments.blog-comments__area .comment {
  position: relative;
  margin-top: 30px;
}

#comments.blog-comments__area .comment .avatar {
  position: static;
  display: block;
  width: 60px;
  height: auto;
  margin: 0;
  border-radius: 0;
}

.blog-comments__area .comments-count {
  font-weight: 700;
}

.blog-comments__area .comment__body {
  display: flex;
}

.blog-comments__area .comment__img {
  flex: none;
  margin-right: 14px;
}

.blog-comments__area .comment__main {
  flex: 1 1 auto;
  min-width: 0;
}

.blog-comments__area .comment__author {
  margin-bottom: 2px;
  font-size: 16px;
  line-height: 24px; /* dòng tên cao 24 như nguồn (icon Reply 20px nở dòng) */
}

.blog-comments__area .comment__name {
  font-weight: 700;
  color: var(--default-color);
}

.blog-comments__area .comment-reply-link {
  padding-left: 10px;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.blog-comments__area .comment-reply-link:hover {
  color: var(--accent-color);
}

.blog-comments__area .comment-reply-link::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: -4px;
  background-color: currentColor;
  -webkit-mask: var(--reply-fill) center / contain no-repeat;
  mask: var(--reply-fill) center / contain no-repeat;
  pointer-events: none;
}

.blog-comments__area .comment__date {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-comments__area .comment-respond {
  margin-top: 50px;
  padding: 30px;
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-comments__area .comment-reply-title {
  font-size: 22px;
  font-weight: 700;
}

.blog-comments__area .comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.blog-comments__area .comment-form > p {
  margin: 0 0 25px;
}

.blog-comments__area .comment-form > .comment-notes {
  margin-bottom: 16px;
  font-size: 14px;
}

.blog-comments__area .comment-form > .comment-notes,
.blog-comments__area .comment-form > .comment-form-url,
.blog-comments__area .comment-form > .comment-form-comment,
.blog-comments__area .comment-form > .comment-form-cookies-consent,
.blog-comments__area .comment-form > .form-submit {
  grid-column: 1 / -1;
}

.blog-comments__area .comment-form input:not([type="checkbox"]):not([type="submit"]),
.blog-comments__area .comment-form textarea {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--default-color);
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
}

.blog-comments__area .comment-form textarea {
  height: 120px;
}

.blog-comments__area .comment-form input::placeholder,
.blog-comments__area .comment-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  opacity: 1;
}

.blog-comments__area .comment-form input:focus,
.blog-comments__area .comment-form textarea:focus {
  border-color: var(--accent-color);
  box-shadow: none;
  outline: 0;
}

.blog-comments__area .comment-form-cookies-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
}

.blog-comments__area .comment-form > .form-submit {
  margin: 0;
  text-align: center;
}

.blog-comments__area .form-submit .submit {
  padding: 10px 20px;
  border: 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--contrast-color);
  background-color: var(--accent-color);
  transition: 0.3s;
}

.blog-comments__area .form-submit .submit:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@media (max-width: 767px) {
  .blog-comments__area .comment-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 6.3 Sidebar bài viết (main.css "Widgets"): tiêu đề bài mới màu accent khi rê (widget Posts không có control màu :hover); đám mây thẻ =
   widget WordPress (không có control kiểu dáng): tiêu đề widget 20px 700, thẻ dạng viên nền default 6%, rê nền accent chữ trắng. */
.e-con .blog-sidebar__recent.elementor-widget .elementor-post__title a:hover {
  color: var(--accent-color);
}

/* Ảnh tác giả + ảnh gallery dự án: bỏ khe dòng dưới ảnh inline (reboot Bootstrap của nguồn: img vertical-align middle) — widget không có
   control canh dòng của ảnh; cỡ/bo góc vẫn là control. */
.blog-sidebar__author .elementor-author-box__avatar img,
.project-gallery .swiper-slide-image {
  vertical-align: middle;
}

.blog-sidebar__tags .widget-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
}

.blog-sidebar__tags .tagcloud a {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 5px 15px;
  border-radius: 50px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: 0.3s;
}

.blog-sidebar__tags .tagcloud a:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

/* 6.4 Single Service (main.css "Service Details Section"): mỗi mục menu dịch vụ có vạch trái 3px (default 30%), mục đang xem + khi rê
   vạch accent (nav-menu không có control viền mục; màu chữ mục đang xem = control; độ đậm = control Typography chung — nguồn in đậm
   mục đang xem, bản dựng giữ control sống: D-56). Danh sách trong
   nội dung dịch vụ: bỏ chấm, mỗi mục cách 5 + dấu check accent 20px (glyph bi-check-circle — mask). */
.service-sidebar__menu .elementor-item {
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
}

.service-sidebar__menu .elementor-item:hover,
.service-sidebar__menu .elementor-item.elementor-item-active {
  border-left-color: var(--accent-color);
}

.service-content__body ul {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.service-content__body ul li {
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.service-content__body ul li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 30px;
  margin-right: 8px;
  background-color: var(--accent-color);
  -webkit-mask: var(--check-circle) center / 20px 20px no-repeat;
  mask: var(--check-circle) center / 20px 20px no-repeat;
  pointer-events: none;
}

/* 6.5 Single Project (main.css "Portfolio Details Section"): nút trước/sau của gallery nền tròn 48 đen 15% (rê 30%) — carousel chỉ có
   control cỡ + màu icon; dấu ngoặc kép đầu/cuối trích dẫn (như 4.8); gạch accent 50×3 dưới "Project information". */
.project-gallery .elementor-swiper-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s;
}

.project-gallery .elementor-swiper-button:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Chấm của gallery cách đáy ảnh 20 như nguồn (.project-gallery__dots margin-top 20): hàng chấm sát đáy vùng đệm 30 của carousel, dòng
   chữ 0 để hộp chấm cao đúng 10 — cỡ/khoảng cách/màu chấm vẫn là control. */
.project-gallery .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 0;
  line-height: 0;
}

.portfolio-testimonial__quote::before,
.portfolio-testimonial__quote::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 26px;
  height: 26px;
  vertical-align: -3.25px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
  -webkit-mask: var(--testimonial-quote) center / contain no-repeat;
  mask: var(--testimonial-quote) center / contain no-repeat;
  pointer-events: none;
}

.portfolio-testimonial__quote::before {
  left: -5px;
}

.portfolio-testimonial__quote::after {
  right: -5px;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-info__title .elementor-heading-title::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  pointer-events: none;
}

/* 6.6 Co gọn khi ô dữ liệu trống (D-51): Elementor bỏ widget có nội dung rỗng nhưng luôn in container — khung testimonial (nền + đệm)
   và khối nhãn–giá trị Project information (khối Project URL gồm cả nút Visit Website) ẩn khi dự án không có dữ liệu tương ứng (chỉ Skincare
   có chi tiết — D-28). Ẩn CONTAINER bọc, không ẩn widget (control vị trí/khoảng cách của widget vẫn sống khi có dữ liệu). Trong editor luôn
   hiện để khách thấy chỗ sửa. */
body:not(.elementor-editor-active) .e-con.portfolio-testimonial:not(:has(.elementor-widget)),
body:not(.elementor-editor-active) .e-con.portfolio-info__item:not(:has(.portfolio-info__value)) {
  display: none;
}

/* Dự án không có gallery ACF: widget carousel không in → bỏ khoảng 48px dành cho gallery trên hàng mô tả (thanh tiêu đề → tiêu đề dự
   án còn 60px như mọi trang) (D-67). */
body:not(.elementor-editor-active) .e-con.portfolio-details:not(:has(.project-gallery)) > .e-con-inner > .e-con.portfolio-details__row,
body:not(.elementor-editor-active) .e-con.portfolio-details:not(:has(.project-gallery)) > .e-con.portfolio-details__row {
  margin-top: 0;
}


/* @generated bridge_masks.py — START (không sửa tay) */
/* Blob nền icon thẻ dịch vụ (map §12 nhóm 2): path SVG inline của nguồn, viewBox 600 → mask 100×100. */
.service-item--blob-1 { --service-blob: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath d='M300,521.0016835830174C376.1290562159157,517.8887921683347,466.0731472004068,529.7835943286574,510.70327084640275,468.03025145048787C554.3714126377745,407.6079735673963,508.03601936045806,328.9844924480964,491.2728898941984,256.3432110539036C474.5976632858925,184.082847569629,479.9380746630129,96.60480741107993,416.23090153303,58.64404602377083C348.86323505073057,18.502131276798302,261.93793281208167,40.57373210992963,193.5410806939664,78.93577620505333C130.42746243093433,114.334589627462,98.30271207620316,179.96522072025542,76.75703585869454,249.04625023123273C51.97151888228291,328.5150500222984,13.704378332031375,421.85034740162234,66.52175969318436,486.19268352777647C119.04800174914682,550.1803526380478,217.28368757567262,524.383925680826,300,521.0016835830174'/%3E%3C/svg%3E"); }
.service-item--blob-2 { --service-blob: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath d='M300,582.0697525312426C382.5290701553225,586.8405444964366,449.9789794690241,525.3245884688669,502.5850820975895,461.55621195738473C556.606425686781,396.0723002908107,615.8543463187945,314.28637112970534,586.6730223649479,234.56875336149918C558.9533121215079,158.8439757836574,454.9685369536778,164.00468322053177,381.49747125262974,130.76875717737553C312.15926192815925,99.40240125094834,248.97055460311594,18.661163978235184,179.8680185752513,50.54337015887873C110.5421016452524,82.52863877960104,119.82277516462835,180.83849132639028,109.12597500060166,256.43424936330496C100.08760227029461,320.3096726198365,92.17705696193138,384.0621239912766,124.79988738764834,439.7174275375508C164.83382741302287,508.01625554203684,220.96474134820875,577.5009287672846,300,582.0697525312426'/%3E%3C/svg%3E"); }
.service-item--blob-3 { --service-blob: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath d='M300,541.5067337569781C382.14930387511276,545.0595476570109,479.8736841581634,548.3450877840088,526.4010558755058,480.5488172755941C571.5218469581645,414.80211281144784,517.5187510058486,332.0715597781072,496.52539010469104,255.14436215662573C477.37192572678356,184.95920475031193,473.57363656557914,105.61284051026155,413.0603344069578,65.22779650032875C343.27470386102294,18.654635553484475,251.2091493199835,5.337323636656869,175.0934190732945,40.62881213300186C97.87086631185822,76.43348514350839,51.98124368387456,156.15599469081315,36.44837278890362,239.84606092416172C21.716077023791087,319.22268207091537,43.775223500013084,401.1760424656574,96.891909868211,461.97329694683043C147.22146801428983,519.5804099606455,223.5754009179313,538.201503339737,300,541.5067337569781'/%3E%3C/svg%3E"); }
.service-item--blob-4 { --service-blob: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath d='M300,503.46388370962813C374.79870501325706,506.71871716319447,464.8034551963731,527.1746412648533,510.4981551193396,467.86667711651364C555.9287308511215,408.9015244558933,512.6030010748507,327.5744911775523,490.211057578863,256.5855673507754C471.097692560561,195.9906835881958,447.69079081568157,138.11976852964426,395.19560036434837,102.3242989838813C329.3053358748298,57.3949838291264,248.02791733380457,8.279543830951368,175.87071277845988,42.242879143198664C103.41431057327972,76.34704239035025,93.79494320519305,170.9812938413882,81.28167332365135,250.07896920659033C70.17666984294237,320.27484674793965,64.84698225790005,396.69656628748305,111.28512138212992,450.4950937839243C156.20124167950087,502.5303643271138,231.32542653798444,500.4755392045468,300,503.46388370962813'/%3E%3C/svg%3E"); }
.service-item--blob-5 { --service-blob: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath d='M300,532.3542879108572C369.38199826031484,532.3153073249985,429.10787420159085,491.63046689027357,474.5244479745417,439.17860296908856C522.8885846962883,383.3225815378663,569.1668002868075,314.3205725914397,550.7432151929288,242.7694973846089C532.6665558377875,172.5657663291529,456.2379748765914,142.6223662098291,390.3689995646985,112.34683881706744C326.66090330228417,83.06452184765237,258.84405631176094,53.51806209861945,193.32584062364296,78.48882559362697C121.61183558270385,105.82097193414197,62.805066853699245,167.19869350419734,48.57481801355237,242.6138429142374C34.843463184063346,315.3850353017275,76.69343916112496,383.4422959591041,125.22947124332185,439.3748458443577C170.7312796277747,491.8107796887764,230.57421082200815,532.3932930995766,300,532.3542879108572'/%3E%3C/svg%3E"); }
.service-item--blob-6 { --service-blob: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath d='M300,566.797414625762C385.7384707136149,576.1784315230908,478.7894351017131,552.8928747891023,531.9192734346935,484.94944893311C584.6109503024035,417.5663521118492,582.489472248146,322.67544863468447,553.9536738515405,242.03673114598146C529.1557734026468,171.96086150256528,465.24506316201064,127.66468636344209,395.9583748389544,100.7403814666027C334.2173773831606,76.7482773500951,269.4350130405921,84.62216499799875,207.1952322260088,107.2889140133804C132.92018162631612,134.33871894543012,41.79353780512637,160.00259165414826,22.644507872594943,236.69541883565114C3.319112789854554,314.0945973066697,72.72355303640163,379.243833228382,124.04198916343866,440.3218312028393C172.9286146004772,498.5055451809895,224.45579914871206,558.5317968840102,300,566.797414625762'/%3E%3C/svg%3E"); }
/* Dấu ngoặc kép testimonial (map §3 TS1b): glyph bi-quote của Bootstrap Icons (MIT). */
body[class*="elementor-kit-"] { --testimonial-quote: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M225 225Q233 225 238.5 219.5Q244 214 244 206V160Q244 153 238.5 147.5Q233 142 225 142H199Q199 132 200.5 121.5Q202 111 206.0 103.0Q210 95 216.5 90.0Q223 85 233 85V56Q216 56 204.0 63.0Q192 70 184.0 82.5Q176 95 172.5 110.0Q169 125 169 142V206Q169 214 174.5 219.5Q180 225 187 225ZM113 225Q120 225 125.5 219.5Q131 214 131 206V160Q131 153 125.5 147.5Q120 142 112 142H86Q86 132 87.5 121.5Q89 111 93.5 103.0Q98 95 104.0 90.0Q110 85 120 85V56Q104 56 91.5 63.0Q79 70 71.0 82.5Q63 95 59.5 110.0Q56 125 56 142V206Q56 214 61.5 219.5Q67 225 75 225Z'/%3E%3C/svg%3E"); }
/* Mũi tên phân trang Blog (map §3 BL1 — nguồn: <i class="bi bi-chevron-right"> trong link "Next page"): glyph bi-chevron-left/right. */
body[class*="elementor-kit-"] { --chevron-left: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M213 31Q216 34 216.0 37.5Q216 41 213 44L107 150L213 256Q216 259 216.0 262.5Q216 266 213.0 269.0Q210 272 206.0 272.0Q202 272 200 269L87 157Q84 154 84.0 150.0Q84 146 87 143L200 31Q202 28 206.0 28.0Q210 28 213 31Z'/%3E%3C/svg%3E"); --chevron-right: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M87 31Q90 28 94.0 28.0Q98 28 100 31L213 143Q216 146 216.0 150.0Q216 154 213 157L100 269Q98 272 94.0 272.0Q90 272 87.0 269.0Q84 266 84.0 262.5Q84 259 87 256L193 150L87 44Q84 41 84.0 37.5Q84 34 87 31Z'/%3E%3C/svg%3E"); }
/* Dấu check trước mục danh sách nội dung dịch vụ (map §3 SD2b — nguồn: <i class="bi bi-check-circle">) · icon nút Reply của bình luận (map §3 BD3 — nguồn: <i class="bi bi-reply-fill">): glyph Bootstrap Icons (MIT). */
body[class*="elementor-kit-"] { --check-circle: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M150 281Q114 281 84.0 263.5Q54 246 36.5 216.0Q19 186 19.0 150.0Q19 114 36.5 84.0Q54 54 84.0 36.5Q114 19 150.0 19.0Q186 19 216.0 36.5Q246 54 263.5 84.0Q281 114 281.0 150.0Q281 186 263.5 216.0Q246 246 216.0 263.5Q186 281 150 281ZM150 300Q191 300 225.5 280.0Q260 260 280.0 225.5Q300 191 300.0 150.0Q300 109 280.0 74.5Q260 40 225.5 20.0Q191 0 150.0 0.0Q109 0 74.5 20.0Q40 40 20.0 74.5Q0 109 0.0 150.0Q0 191 20.0 225.5Q40 260 74.5 280.0Q109 300 150 300ZM206 93 205 94 140 177 101 137Q97 133 91.0 133.5Q85 134 81.0 138.0Q77 142 77.0 147.5Q77 153 81 157L131 207Q135 211 141.0 211.0Q147 211 151 206L226 113Q230 109 230.0 103.0Q230 97 225.5 93.0Q221 89 215.5 89.0Q210 89 206 93Z'/%3E%3C/svg%3E"); --reply-fill: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M111 223 25 162Q19 158 19.0 150.0Q19 142 25 138L111 77Q118 73 124.5 77.0Q131 81 131 88V112Q156 112 174 118Q205 128 226 157Q254 195 263 262Q249 239 231 222Q215 208 196 200Q181 193 164 190Q152 187 140 187H131V212Q131 219 124.5 223.0Q118 227 111 223Z'/%3E%3C/svg%3E"); }
/* Ảnh bìa thay thế của thẻ bài KHÔNG có ảnh đại diện (D-66): glyph bi-journal-text của Bootstrap Icons (MIT) — icon bài viết cùng bộ icon meta của thẻ (bi-person, bi-folder2). */
body[class*="elementor-kit-"] { --journal-text: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M94 197Q94 193 96.5 190.0Q99 187 103 187H141Q145 188 147.5 190.5Q150 193 150.0 197.0Q150 201 147.5 203.5Q145 206 141 206H103Q99 206 96.5 203.5Q94 201 94 197ZM94 159Q94 155 96.5 152.5Q99 150 103 150H197Q201 150 203.5 152.5Q206 155 206.0 159.0Q206 163 203.5 166.0Q201 169 197 169H103Q99 169 96.5 166.0Q94 163 94 159ZM94 122Q94 118 96.5 115.0Q99 112 103 112H197Q201 112 203.5 115.0Q206 118 206.0 122.0Q206 126 203.5 128.5Q201 131 197 131H103Q99 131 96.5 128.5Q94 126 94 122ZM94 84Q94 80 96.5 77.5Q99 75 103 75H197Q201 75 203.5 77.5Q206 80 206.0 84.0Q206 88 203.5 91.0Q201 94 197 94H103Q99 94 96.5 91.0Q94 88 94 84ZM56 0H244Q259 0 270.0 11.0Q281 22 281 38V262Q281 278 270.0 289.0Q259 300 244 300H56Q41 300 30.0 289.0Q19 278 19 263V244H38V262Q38 270 43.0 275.5Q48 281 56 281H244Q252 281 257.5 275.5Q263 270 263 262V37Q263 30 257.5 24.5Q252 19 244 19H56Q48 19 43.0 24.5Q38 30 38 37V56H19V37Q19 22 30.0 11.0Q41 0 56 0ZM19 94V84Q19 80 21.5 77.5Q24 75 28.0 75.0Q32 75 35.0 77.5Q38 80 38 84V94H47Q51 94 53.5 96.5Q56 99 56.0 103.0Q56 107 53.5 110.0Q51 113 47 113H9Q5 112 2.5 109.5Q0 107 0.0 103.0Q0 99 2.5 96.5Q5 94 9 94ZM19 150V141Q19 137 21.5 134.0Q24 131 28.0 131.0Q32 131 35.0 134.0Q38 137 38 141V150H47Q51 150 53.5 152.5Q56 155 56.0 159.0Q56 163 53.5 166.0Q51 169 47 169H9Q5 169 2.5 166.0Q0 163 0.0 159.0Q0 155 2.5 152.5Q5 150 9 150ZM19 206V197Q19 193 21.5 190.0Q24 187 28.0 187.5Q32 188 35.0 190.5Q38 193 38 197V206H47Q51 206 53.5 209.0Q56 212 56.0 216.0Q56 220 53.5 222.5Q51 225 47 225H9Q5 225 2.5 222.5Q0 220 0.0 216.0Q0 212 2.5 209.0Q5 206 9 206Z'/%3E%3C/svg%3E"); }
/* @generated bridge_masks.py — END */