@charset "UTF-8";

/* ==========================================
   COMPONENTS.CSS - Reusable UI Components
   ==========================================
   Version: 1.0.0 | 2026-02-21
   
   Table of Contents:
   1. Root Variables (Header sizing)
   2. Card Styles & Hover Effects
   3. Section Padding & Headers
   4. Grid Utilities
   5. Icon System
   ========================================== */

/* ==========================================
   1. ROOT VARIABLES
   ========================================== */
:root {
  --header-height-desktop: 72px;
  --header-height-mobile: 48px;
}

/* ==========================================
   2. CARD STYLES & HOVER EFFECTS
   ========================================== */

/* Base card styles - reused by pricing-card, testimonial-card, platform-card, faq-item */
.pricing-card,
.testimonial-card,
.platform-card,
.faq-item {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(240, 246, 252, 0.05);
  transition: all var(--transition-base);
}

/* Common hover effect for cards */
.pricing-card:hover,
.testimonial-card:hover,
.platform-card:hover,
.faq-item:hover {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(47, 129, 247, 0.5);
  border-color: rgba(47, 129, 247, 0.5);
}

/* Cards with translateY hover effect */
.pricing-card:hover,
.platform-card:hover {
  transform: translateY(-4px);
}

/* ==========================================
   3. SECTION PADDING & HEADERS
   ========================================== */

/* Common section padding */
.pricing-section,
.comparison-section,
.faq-section,
.how-it-works-section,
.testimonials-section,
.platform-section,
.trust-section,
.blog-section,
.promo-section,
.partner-section,
.docs-section,
.content-section,
.account-section {
  padding: var(--space-8) 0;
  margin-bottom: 0;
}

/* Common section header styles */
.pricing-header,
.section-header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.pricing-header h2,
.section-header h2 {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-text-heading);
}

.pricing-header p,
.section-header p {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

/* ==========================================
   4. GRID UTILITIES
   ========================================== */

/* Common 3-column grid */
.testimonials-grid,
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}

/* ==========================================
   5. ICON SYSTEM
   ========================================== */

.trust-icon {
  font-size: 3rem;
  margin-bottom: var(--space-2);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.icon {
  --icon-url: none;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.icon--inline {
  margin-right: var(--space-1);
  vertical-align: -0.125em;
  color: var(--color-primary);
}

/* Trust Icons */
.icon--shield {
  --icon-url: url("../icon/trust-shield.svg");
}
.icon--bank {
  --icon-url: url("../icon/trust-bank.svg");
}
.icon--scale {
  --icon-url: url("../icon/trust-scale.svg");
}
.icon--card {
  --icon-url: url("../icon/trust-card.svg");
}

/* UI Icons */
.icon--star {
  --icon-url: url("../icon/ui-star.svg");
}
.icon--gift {
  --icon-url: url("../icon/ui-gift.svg");
}
.icon--crown {
  --icon-url: url("../icon/ui-crown.svg");
}
.icon--globe {
  --icon-url: url("../icon/ui-globe.svg");
}
.icon--chart-bar {
  --icon-url: url("../icon/ui-chart-bar.svg");
}
.icon--chart-line {
  --icon-url: url("../icon/ui-chart-line.svg");
}
.icon--mobile {
  --icon-url: url("../icon/ui-mobile.svg");
}
.icon--phone {
  --icon-url: url("../icon/ui-phone.svg");
}
.icon--refresh {
  --icon-url: url("../icon/ui-refresh.svg");
}
.icon--money {
  --icon-url: url("../icon/ui-money.svg");
}
.icon--bolt {
  --icon-url: url("../icon/ui-bolt.svg");
}
.icon--target {
  --icon-url: url("../icon/ui-target.svg");
}
.icon--rocket {
  --icon-url: url("../icon/ui-rocket.svg");
}
.icon--cap {
  --icon-url: url("../icon/ui-cap.svg");
}
.icon--chat {
  --icon-url: url("../icon/ui-chat.svg");
}
.icon--email {
  --icon-url: url("../icon/ui-email.svg");
}
.icon--lock {
  --icon-url: url("../icon/ui-lock.svg");
}
.icon--close {
  --icon-url: url("../icon/ui-close.svg");
}

.icon--fire {
  --icon-url: url("../icon/ui-fire.svg");
}
.icon--file {
  --icon-url: url("../icon/ui-file.svg");
}
.icon--note {
  --icon-url: url("../icon/ui-note.svg");
}
.icon--clock {
  --icon-url: url("../icon/ui-clock.svg");
}
.icon--plus {
  --icon-url: url("../icon/ui-plus.svg");
}
.icon--check {
  --icon-url: url("../icon/ui-check.svg");
}

/* Social Icons */
.icon--linkedin {
  --icon-url: url("../icon/ui-linkedin.svg");
}
.icon--facebook {
  --icon-url: url("../icon/ui-facebook.svg");
}
.icon--instagram {
  --icon-url: url("../icon/ui-instagram.svg");
}
.icon--youtube {
  --icon-url: url("../icon/ui-youtube.svg");
}

.icon--tiktok {
  --icon-url: url("../icon/ui-tiktok.svg");
}
.icon--whatsapp {
  --icon-url: url("../icon/ui-whatsapp.svg");
}

.icon--zalo {
  background-color: transparent;
  background-image: url("../icon/ui-zalo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask: none;
  mask: none;
}

/* Navigation Icons */
.icon--home {
  --icon-url: url("../icon/ui-home.svg");
}
.icon--menu {
  --icon-url: url("../icon/ui-menu.svg");
}
.icon--search {
  --icon-url: url("../icon/ui-search.svg");
}
.icon--user {
  --icon-url: url("../icon/ui-user.svg");
}
.icon--notification {
  --icon-url: url("../icon/ui-notification.svg");
}
.icon--settings {
  --icon-url: url("../icon/ui-settings.svg");
}

/* Tool Icons */
.icon--utm {
  --icon-url: url("../icon/ui-utm.svg");
}
.icon--qr {
  --icon-url: url("../icon/ui-qr.svg");
}
.icon--tree {
  --icon-url: url("../icon/ui-folder.svg");
}
.icon--folder {
  --icon-url: url("../icon/ui-folder.svg");
}

/* Finance Icons */
.icon--dollar {
  --icon-url: url("../icon/ui-dollar.svg");
}
.icon--trending-up {
  --icon-url: url("../icon/ui-trending-up.svg");
}
.icon--trending-down {
  --icon-url: url("../icon/ui-trending-down.svg");
}
.icon--calculator {
  --icon-url: url("../icon/ui-calculator.svg");
}
.icon--briefcase {
  --icon-url: url("../icon/ui-briefcase.svg");
}
.icon--credit-card {
  --icon-url: url("../icon/ui-credit-card.svg");
}

/* Arrow & Chevron Icons */
.icon--arrow-right {
  --icon-url: url("../icon/ui-arrow-right.svg");
}
.icon--arrow-left {
  --icon-url: url("../icon/ui-arrow-left.svg");
}
.icon--chevron-up {
  --icon-url: url("../icon/ui-chevron-up.svg");
}
.icon--chevron-down {
  --icon-url: url("../icon/ui-chevron-down.svg");
}
.icon--chevron-right {
  --icon-url: url("../icon/ui-chevron-right.svg");
}
.icon--chevron-left {
  --icon-url: url("../icon/ui-chevron-left.svg");
}

/* Action Icons */
.icon--download {
  --icon-url: url("../icon/ui-download.svg");
}
.icon--upload {
  --icon-url: url("../icon/ui-upload.svg");
}
.icon--edit {
  --icon-url: url("../icon/ui-edit.svg");
}

/* Misc Icons */
.icon--help {
  --icon-url: url("../icon/ui-help.svg");
}
.icon--smartphone {
  --icon-url: url("../icon/ui-smartphone.svg");
}
.icon--faq {
  --icon-url: url("../icon/ui-faq.svg");
}
.icon--document {
  --icon-url: url("../icon/ui-document.svg");
}
.icon--users-group {
  --icon-url: url("../icon/ui-users-group.svg");
}

/* Account Icons */
.icon--account-micro {
  --icon-url: url("../icon/account-micro.svg");
}
.icon--account-mini {
  --icon-url: url("../icon/account-mini.svg");
}
.icon--account-bronze {
  --icon-url: url("../icon/account-bronze.svg");
}
.icon--account-silver {
  --icon-url: url("../icon/account-silver.svg");
}
.icon--account-gold {
  --icon-url: url("../icon/account-gold.svg");
}
.icon--account-diamond {
  --icon-url: url("../icon/account-diamond.svg");
}
.icon--account-master {
  --icon-url: url("../icon/account-master.svg");
}

/* Partner Icons */
.icon--partner-bronze {
  --icon-url: url("../icon/partner-bronze.svg");
}
.icon--partner-silver {
  --icon-url: url("../icon/partner-silver.svg");
}
.icon--partner-gold {
  --icon-url: url("../icon/partner-gold.svg");
}
.icon--partner-diamond {
  --icon-url: url("../icon/partner-diamond.svg");
}
.icon--partner-premium {
  --icon-url: url("../icon/partner-premium.svg");
}