@charset "UTF-8";

/* components.css v4.2 — Reusable UI Components */

/* 1. Root Variables */
:root {
  --header-height-desktop: 72px;
  --header-height-mobile: 48px;
}

/* 3. Icon System */

.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(--accent);
}

/* Trust Icons */
.icon--shield {
  --icon-url: url("../icon/trust-shield.svg");
}
.icon--shield-check {
  --icon-url: url("../icon/ui-shield-check.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");
}
.icon--blog {
  --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");
}

/* Action Icons - Continued */
.icon--lightning-bolt {
  --icon-url: url("../icon/ui-lightning-bolt.svg");
}
.icon--lightbulb {
  --icon-url: url("../icon/ui-lightbulb.svg");
}