/* ========== DESIGN TOKENS (Figma: Khoi Nguyen website) ========== */
:root {
  /* Colors — Figma variables */
  --color-primary: #ffcc08;          /* Primary/primary */
  --color-secondary: #0767bb;        /* Primary/secondary */
  --color-dark: #00346a;             /* Primary/dark */
  --color-surface-dark: #00264d;     /* Surface/Dark */
  --color-navy: #172039;             /* "#1F2A44" (giá trị thật #172039) */
  --color-white: #ffffff;            /* Primary/white, Text/Inverse */
  --color-black: #000000;
  --color-neutral: #fcfbfa;          /* Neutral/Neutral */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #2c3441;         /* chữ submenu */
  --color-stroke: #dfe4ea;           /* Stroke */
  --color-text-muted: #9fbbd6;       /* Text/Muted */
  --color-border-glass: rgba(255, 255, 255, 0.16); /* Border/Default */

  /* Colors — dùng trực tiếp trong Figma (không có variable) */
  --color-blue: #005ac1;
  --color-blue-dark: #004b8c;
  --color-bg-light: #f5f5f5;
  --color-line-form: #385183;
  --color-check-bg: #f1f4ff;
  --color-submenu-active: #dbecff;
  --color-video-placeholder: #d8d8d8;
  --color-glass: rgba(255, 255, 255, 0.07);
  --color-overlay-team: rgba(0, 47, 113, 0.8);
  --color-overlay-contact: rgba(31, 42, 68, 0.7);
  --color-overlay-cta: rgba(0, 20, 22, 0.7);
  --color-overlay-modal: rgba(0, 0, 0, 0.8);
  --color-overlay-hero: rgba(0, 0, 0, 0.5);   /* lớp tối phủ video nền hero */
  --color-overlay-menu: rgba(0, 0, 0, 0.6);   /* nền mờ sau panel menu mobile (không có trong Figma) */
  --color-menu-divider: rgba(255, 255, 255, 0.12); /* kẻ giữa các mục menu mobile */
  --color-text-strong: #141414;      /* Primary/neutral — chữ timeline */
  --color-cyan: #00a7bc;             /* mốc 2026 timeline */
  --color-sand: #d3bfa3;             /* nền khối Tầm nhìn (dưới ảnh) */
  --color-overlay-vision: rgba(0, 75, 140, 0.95);
  --color-overlay-mission: rgba(0, 39, 80, 0.95);
  --color-cta-bg: #003366;           /* Section/Final CTA trang Giới thiệu */
  --color-cta-yellow: #ffcb05;       /* nút + marker CTA (khác #FFCC08) */
  --color-cta-beam: rgba(255, 203, 5, 0.3);
  --color-cta-ring-1: rgba(255, 255, 255, 0.07);
  --color-cta-ring-2: rgba(255, 255, 255, 0.05);
  --color-cta-ring-3: rgba(255, 255, 255, 0.04);
  --color-btn-outline: rgba(255, 255, 255, 0.42);
  --color-gray-300: #d1d5db;         /* viền breadcrumb */
  --color-gray-900: #111928;         /* icon home breadcrumb */
  --color-slate: #637381;            /* chữ breadcrumb */
  --color-text-body: #333333;        /* nội dung bài chi tiết */
  --color-text-heading: #333f51;     /* tiêu đề bài chi tiết */
  --color-tab-active: #f0f7ff;       /* nền tab đang chọn */
  --color-overlay-budget: rgba(4, 60, 116, 0.85);   /* lớp phủ form ngân sách */
  --color-panel-budget: rgba(0, 75, 140, 0.5);      /* khung "Hạng mục bạn đang cần" */
  --color-article-title: #1c0f13;    /* tiêu đề bài Chi tiết kiến thức */
  --color-article-text: #161213;     /* nội dung bài Chi tiết kiến thức */
  --color-teal: #3f9286;             /* chữ nhãn chủ đề + link trong bài */
  --color-teal-light: #def1ef;       /* nền nhãn chủ đề */
  --color-share-border: #d5dae1;     /* viền nút chia sẻ */
  --color-divider: #eef0f3;          /* đường kẻ trên thanh chia sẻ */
  --color-office-card: #eff7ff;      /* ô "Trụ sở" trang Liên hệ */
  --color-office-card-alt: #e7f2ff;  /* ô "Văn phòng" trang Liên hệ */
  --color-input-border: #d5dae1;     /* viền ô nhập form Liên hệ */
  --color-placeholder: #667085;      /* chữ gợi ý ô nhập form Liên hệ */
  --color-blue-50: #f2f7fc;          /* nền thẻ dịch vụ + vòng số bước trang Tư vấn & báo giá */
  --color-zinc-700: #3f3f46;         /* chữ ô chọn + mũi tên form Tư vấn */
  --color-step-text: #d5e3f2;        /* mô tả các bước trên nền xanh đậm */
  --color-step-ring: rgba(255, 255, 255, 0.32); /* viền vòng số bước */

  /* Gradients */
  --gradient-header: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
  --gradient-blue: linear-gradient(180deg, var(--color-blue) 0%, var(--color-dark) 100%);
  --gradient-light: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-white) 100%);
  --gradient-tile: linear-gradient(180deg, rgba(0, 90, 193, 0.6) 0%, rgba(0, 52, 106, 0.6) 100%);
  --gradient-tile-back: linear-gradient(180deg, rgba(0, 110, 230, 0.7) 0%, rgba(0, 66, 140, 0.7) 100%); /* mặt sau value-tile (hover) */
  --gradient-card-overlay: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 59.086%);
  --gradient-service-caption: linear-gradient(180deg, rgba(0, 52, 106, 0) 0%, rgba(0, 52, 106, 0.5) 33.859%, rgba(0, 52, 106, 0.75) 66.684%, rgb(0, 52, 106) 100%);

  /* Typography */
  --font-primary: 'SVN-Gilroy', sans-serif;
  --font-montserrat: 'Montserrat', sans-serif;
  --font-mona: 'Mona Sans', sans-serif;
  --font-unbounded: 'Unbounded', sans-serif;
  --font-inter: 'Inter', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-xbold: 800;

  --fs-hero: 56px;   --lh-hero: 78.4px;   /* hero H1 — 1.4 */
  --fs-h1: 48px;     --lh-h1: 67.2px;     /* Heading 1 — 1.4 */
  --fs-title: 40px;  --lh-title: 56px;    /* Tittle — 1.4 */
  --fs-h3: 36px;     --lh-h3: 50.4px;     /* tiêu đề thiết bị — 1.4 */
  --fs-h4: 32px;     --lh-h4: 41.6px;     /* Heading 4 — 1.3 */
  --fs-h5: 24px;     --lh-h5: 33.6px;     /* Heading 5 — 1.4 */
  --fs-h6: 20px;     --lh-h6: 28px;       /* Heading 6 — 1.4 */
  --fs-letter: 64px;                      /* chữ C-R-E-A-T-E */
  --fs-body-xl: 18px; --lh-body-xl: 26px; /* Body XL */
  --lh-body-xl-14: 25.2px;                /* 18px × 1.4 */
  --fs-body-l: 16px; --lh-body-l: 24px;   /* Body L */
  --lh-body-l-14: 22.4px;                 /* 16px × 1.4 */
  --lh-submenu: 25px;                     /* 18px × 1.4, Figma làm tròn 25px */
  --lh-label-auto: 17px;                  /* Auto 16px — đo từ frame Figma */
  --lh-tab-auto: 19px;                    /* Auto 18px (tab chi tiết dịch vụ) */
  --lh-h5-auto: 25px;                     /* Auto 24px (tiêu đề "Danh mục thiết bị") */
  --lh-spec: 32px;                        /* danh sách thông số thiết bị 18px/32px */
  --lh-office-title: 22px;               /* 20px — ô địa chỉ trang Liên hệ (đo từ frame) */
  --lh-office-address: 18px;             /* 18px — ô địa chỉ trang Liên hệ (đo từ frame) */
  --lh-office-address-wrap: 26px;        /* địa chỉ xuống 2 dòng (Figma mobile; dùng cả tablet) */
  --lh-input-label: 28px;                /* nhãn 18px form Liên hệ (đo từ frame) */
  --fs-body-m: 14px; --lh-body-m: 20px;   /* Body M */
  --fs-body-s: 12px; --lh-body-s: 16px;   /* chữ nhỏ 12px (Inter) trang Tư vấn */
  --fs-input-quote: 17px;                 /* chữ gợi ý ô nhập form Tư vấn (Gilroy) */
  --lh-quote-legend: 32px;                /* tiêu đề nhóm "01 Thông tin liên hệ" (+2px đệm trên = 34px) */
  --lh-quote-title: 32px;                 /* Inter 24px — tiêu đề thẻ dịch vụ, hotline */
  --lh-quote-step: 22px;                  /* Inter 16px — tên bước */
  --container-article: 995px;             /* cột nội dung bài Chi tiết kiến thức */
  --fs-display: 60px; --lh-display: 72px; --ls-display: -2.1px; /* Unbounded — Final CTA Giới thiệu */
  --ls-eyebrow: 3.2px;
  --lh-tagline: 42px;                     /* dòng 32px "We Don't Just Imagine" — Figma 42px */
  --lh-cta-desc: 32px;
  --lh-cta-phone: 25px;
  --fs-label: 11px;  --lh-label: 11px;  --ls-label: 1.54px; /* Desktop/Label */

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-29: 29px;
  --space-30: 30px;
  --space-31: 31px;
  --space-32: 32px;
  --space-34: 34px;
  --space-35: 35px;
  --space-41: 41px;
  --space-33: 33px;
  --space-36: 36px;
  --space-48: 48px;
  --space-60: 60px;
  --space-21: 21px;
  --space-64: 64px;
  --space-9: 9px;
  --space-65: 65px;
  --space-74: 74px;
  --space-75: 75px;
  --space-40: 40px;
  --space-18: 18px;
  --space-26: 26px;
  --space-23: 23px;
  --space-6: 6px;
  --space-46: 46px;
  --space-22: 22px;
  --space-25: 25px;
  --space-28: 28px;
  --space-42: 42px;
  --space-44: 44px;
  --space-90: 90px;
  --space-1: 1px;
  --space-17: 17px;
  --space-37: 37px;
  --space-51: 51px;
  --space-53: 53px;
  
  /* Layout */
  --container: 1200px;
  --container-padding: 0px;               /* lề 2 bên .container — desktop 0, mobile 20 */
  --menu-panel-width: 320px;              /* panel menu hamburger (tablet/mobile) */
  --burger-line-w: 22px;                  /* Figma mobile: 2 vạch dài 22px + 1 vạch ngắn 10px, dày 2px */
  --burger-line-short-w: 10px;
  --header-height: 80px;
  --partners-logo-w: calc((var(--container) - 5 * var(--space-20)) / 6); /* 6 logo / hàng như Figma */
  --section-py: 65px;

  /* Radius */
  --radius-xs: 4px;
  --radius-social: 7px;
  --radius-sm: 8px;
  --radius-input: 6px;
  --radius-card: 16px;
  --radius-pagination: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 30px;
  --radius-full: 50%;

  /* Effects */
  --blur-glass: 8px;
  --transition: 0.2s ease;
  --zoom-scale: 1.1;                 /* ảnh phóng to khi hover */
  --zoom-inset: calc((1 - 1 / var(--zoom-scale)) * 50%); /* phần cắt bù để khung ảnh giữ nguyên */
  --transition-flip: 0.6s ease;       /* lật value-tile trang chủ */
  --transition-zoom: 0.5s ease;
  --partners-marquee-duration: 30s;  /* 1 vòng logo đối tác trang chủ */
  --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.15); /* header khi bám đỉnh (không có trong Figma) */

  /* Z-index */
  --z-base: 1;
  --z-overlay: 2;
  --z-header: 100;
  --z-modal: 1000;
}

/* ========== TABLET (768–1279, không có Figma) ========== */
@media (max-width: 1279px) {
  :root {
    --container-padding: 32px;
    --about-hero-media-h: 480px;           /* ảnh hero trang Giới thiệu khi xếp dọc */
    --next-step-h: 470px;                  /* Final CTA trang Giới thiệu (chiều cao tối thiểu) */
    --project-list-row-h-tablet: 440px;    /* lưới dự án 2 cột (không có Figma) */
    --contact-map-h-tablet: 480px;         /* bản đồ trang Liên hệ khi xếp dưới form */
  }
}

/* ========== MOBILE (Figma Home mobile 594:3249, frame 440) ==========
   Giá trị đo từ ảnh export + metadata (chưa có design context) — chốt lại khi lấy được số Figma */
@media (max-width: 767px) {
  :root {
    --container-padding: 20px;            /* nội dung 400 trong frame 440 */
    --header-height: 75px;                /* header mobile 119 − status bar 44 */
    /* Figma: gradient đen 0.6 → 0 trải cả khung 119 (gồm status bar) → tại đỉnh bản build (y 44) còn 0.6 × 75/119 */
    --gradient-header: linear-gradient(180deg, rgba(0, 0, 0, 0.378) 0%, rgba(0, 0, 0, 0) 100%);
    --section-py: 40px;
    --btn-h-mobile: 38px;                 /* BUTTON_mobile */
    --about-intro-pb-mobile: 50px;
    --lh-stat-mobile: 40px;               /* số liệu 36px (about-intro) */
    --section-rule-w-mobile: 46px;        /* gạch trên nhãn tiêu đề section */
    --value-tile-h-mobile: 117.8px;        /* thẻ giá trị cốt lõi */
    --fs-letter-mobile: 48px;
    --core-values-h-mobile: 1059px;
    --projects-h-mobile: 628px;           /* ghim chiều cao section theo Figma (tránh lệch phần px dồn xuống) */
    --team-h-mobile: 464px;
    --partners-h-mobile: 368px;
    --news-h-mobile: 512px;
    --video-events-h-mobile: 973px;
    --contact-form-h-mobile: 1404px;
    --project-card-w-mobile: 330px;       /* card slider dự án / phản hồi / tin tức */
    --project-card-h-mobile: 377px;
    --member-card-w-mobile: 265px;        /* bước slider đội ngũ */
    --member-avatar-mobile: 160px;
    --partners-title-w-mobile: 300px;     /* tiêu đề đối tác xuống 3 dòng như Figma */
    --video-player-h-mobile: 269px;
    --video-thumb-w-mobile: 96px;
    --video-thumb-h-mobile: 70px;
    --final-cta-h-mobile: 470px;
    --lh-final-cta-title-mobile: 34px;
    --final-cta-btn-h-mobile: 42px;

    /* Trang Giới thiệu mobile (Figma 628:4383) — chiều cao section ghim theo Figma */
    --about-hero-media-h: 309px;           /* ảnh trên */
    --about-hero-content-h-mobile: 363px;  /* khối xanh dưới */
    --about-hero-content-pt-mobile: 123px;
    --about-hero-img-w-mobile: 591px;      /* ảnh 2480×1656 thu 0.238, x −119, y −56 */
    --about-hero-img-h-mobile: 395px;
    --about-play-mobile: 74px;
    --lh-h4-mobile: 36.4px;                /* 28px × 1.3 */
    --about-history-h-mobile: 1010px;
    --timeline-indent-mobile: 60px;        /* chữ timeline cách mép trái */
    --timeline-dot-mobile: 28px;           /* chỉ hiện vòng tròn của icon (bỏ cuống) */
    --timeline-tick-w-mobile: 22px;        /* vạch ngang sau vòng tròn */
    --about-stats-h-mobile: 371px;
    --vision-panel-h-mobile: 434px;
    --vision-photo-h-mobile: 344px;
    --mission-panel-h-mobile: 525px;
    --mission-photo-h-mobile: 345px;
    --vision-mission-px-mobile: 22px;
    --about-core-values-h-mobile: 1055px;
    --value-tile-h-about-mobile: 118px;    /* thẻ giá trị cốt lõi trang Giới thiệu (bước 131 = 118 + 13) */
    --about-projects-h-mobile: 622px;
    --next-step-h: 354px;
    --next-step-btn-h-mobile: 44px;
    --fs-display-mobile: 26px; --lh-display-mobile: 40px; --ls-display-mobile: -0.91px; /* Unbounded −0.035em */
    --ls-eyebrow-mobile: 2.8px;

    /* Trang Dịch vụ mobile (Figma 642:5499) */
    --status-bar-h-mobile: 44px;           /* status bar iOS trong frame Figma (bản build không có) */
    --page-banner-h-mobile: 541px;         /* banner 585 − status bar 44 */
    --event-process-h-mobile: 477px;
    --process-step-w-mobile: 258px;

    /* Trang Chi tiết dịch vụ mobile (Figma 646:6040) */
    --detail-gallery-h-mobile: 245px;      /* ảnh lớn 400×245 */
    --detail-thumb-h-mobile: 36px;         /* 6 thumbnail / hàng, cách 12 */
    --detail-thumbs-per-view-mobile: 6;
    --lh-article-title-mobile: 24px;       /* tiêu đề bài 24px, khung cao 24 */
    --lh-article-heading-mobile: 30px;     /* tiêu đề mục "Header" 20px, khung cao 30 */
    --article-figure-h-mobile: 252px;      /* ảnh minh hoạ trong bài 400×252 */
    --related-card-h-mobile: 392px;        /* card "Dịch vụ liên quan" 330×392 */
    --other-card-h-mobile: 296px;          /* card "Các dịch vụ chuyên nghiệp" 330×296 */
    --related-services-h-mobile: 634px;
    --other-services-h-mobile: 474px;

    /* Trang Thiết bị sự kiện mobile (Figma 646:7045) */
    --event-process-compact-h-mobile: 517px;
    --budget-scrollbar-top-mobile: 58px;   /* thanh cuộn trang trí trong khung hạng mục */
    --budget-scrollbar-h-mobile: 31px;
    --budget-btn-h-mobile: 36px;

    /* Trang Chi tiết thiết bị mobile (Figma 646:7887) */
    --equipment-top-gap-mobile: 21px;      /* hàng thumbnail → khung tiêu đề */
    --lh-equipment-title-mobile: 33px;     /* tiêu đề 24px — làm tròn 33.6 để không lệch phần px */
    --article-compact-gap-mobile: 17px;    /* tiêu đề bài → nội dung */
    --article-heading-w-mobile: 300px;     /* khung chữ tiêu đề mục trong bài */
    --equipment-detail-h-mobile: 2252px;   /* ghim chiều cao section (tránh lệch phần px dồn xuống) */
    --equipment-detail-pb-mobile: 37px;    /* chữ Gilroy dồn cao hơn Figma ~3px qua 90 dòng → bù ở đáy để section cao đúng 2252 */
    --featured-equipment-h-mobile: 471px;
    --featured-equipment-gap-mobile: 25px; /* tiêu đề → slider */
    --lh-h6-auto: 21px;                    /* Auto 20px (tên card "Các thiết bị nổi bật") */

    /* Trang Phim doanh nghiệp mobile (Figma 646:8246) */
    --film-card-h-mobile: 296px;           /* card loại phim 400×296 */
    --scope-image-mobile: 96px;            /* ảnh tròn hạng mục */
    --lh-film-stage-title-mobile: 22px;    /* tên giai đoạn 16px */
    --film-stage-number-mobile: 60px;      /* vòng ngoài số giai đoạn */
    --film-stage-dot-mobile: 41px;         /* hình tròn vàng đồng tâm */

    /* Trang Danh mục dự án mobile (Figma 646:9394) */
    --project-list-h-mobile: 3203px;       /* 585–3788 trong frame (ghim để section sau bắt đầu đúng px) */
    --project-list-rows-mobile: minmax(457px, auto) minmax(457px, auto) minmax(457px, auto) minmax(463px, auto) minmax(464px, auto) minmax(465px, auto);
    --project-list-row-h-mobile: 465px;    /* thẻ 7–9 khi bấm "Xem thêm" */

    /* Trang Danh mục kiến thức mobile (Figma 657:10273) */
    --knowledge-list-h-mobile: 1713px;     /* 585–2298 trong frame */
    --knowledge-list-pt-mobile: 40px;      /* gạch tiêu đề ở y 37 */
    --knowledge-head-mb-mobile: -1px;
    --knowledge-card-h-mobile: 222px;
    --knowledge-card-img-w-mobile: 174px;
    --knowledge-card-gap-mobile: 7px;
    --knowledge-more-mt-mobile: 0px;
    --featured-posts-h-mobile: 572px;      /* 2298–2870 */
    --featured-posts-gap-mobile: 24px;
    --blog-card-media-h-mobile: 270px;
    --featured-dots-mt-mobile: 0px;

    /* Trang Chi tiết kiến thức mobile (Figma 659:11068) */
    --article-detail-h-mobile: 2109px;     /* 119–2228 trong frame (ghim để section sau bắt đầu đúng px) */
    --article-detail-head-gap-mobile: 9px;   /* nhãn → tiêu đề; tiêu đề → mô tả = 9 + 2 */
    --lh-article-detail-title-mobile: 34px;
    --article-cover-h-mobile: 196px;       /* ảnh đầu bài 400×196 */
    --article-image-h-mobile: 214px;       /* ảnh minh hoạ 400×214 */

    /* Trang Liên hệ mobile (Figma 659:11726) */
    --contact-banner-h-mobile: 266px;      /* 44–310 trong frame (header đè lên) */
    --contact-pt-mobile: 39px;             /* gạch tiêu đề ở y 355 trong frame */
    --office-card-pb-mobile: 17px;         /* ô địa chỉ 400×128: 22 + tiêu đề 22 + 15 + 2×26 + 17 */
    --contact-panel-pt-mobile: 35px;
    --contact-logo-top-mobile: 100px;      /* ảnh logo 337 rộng, đỉnh ở y 144 trong frame */
    --contact-logo-w-mobile: 337px;
    --contact-map-h-mobile: 465px;         /* bản đồ full 440 */

    /* Trang Tư vấn & báo giá mobile (Figma 659:12410) */
    --quote-body-mt-mobile: 23px;          /* mô tả → "01 Thông tin liên hệ" */
    --quote-body-gap-mobile: 39px;         /* dòng "bảo mật" → ảnh dịch vụ */
    --fs-label-quote-mobile: 15px;        /* nhãn ô nhập (Gilroy Medium, đo theo độ rộng chữ) */
    --quote-textarea-h-mobile: 82px;
    --quote-grid-mt-mobile: 19px;          /* ghi chú → nhãn ô đầu tiên */
    --quote-consent-mt-mobile: 24px;       /* ô đính kèm → dòng đồng ý */
    --lh-quote-consent-mobile: 21px;       /* 14px × 1.5 */

    --fs-hero: 36px;   --lh-hero: 50px;  /* "Think Business / Make It Happen" — khung 2 dòng cao 100 */
    --fs-h1: 32px;     --lh-h1: 45px;     /* "Liên hệ tư vấn" — khung cao 45 */
    --fs-title: 28px;  --lh-title: 39px;  /* tiêu đề section — khung 2 dòng cao 78 */
  }
}