@use "sass:color";
@use "bulma/sass/utilities/initial-variables.scss" as *;
@use "bulma/sass/utilities/mixins.scss" as *;

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900');

:root {
  --bulma-family-primary: 'Inter', 'SF Pro', 'Helvetica', 'Arial', sans-serif;
}

// ==========================================
// 1. BRAND PALETTE (GAM MÀU TỪ LOGO)
// ==========================================
$blue-dianne: #204853; // Dark Cyan - Primary, Headings, Link
$parchment:   #f2e5d6; // Cream - Accent, Background 
$sirocco:     #758385; // Greyish - Info, Border
$delta:       #b0afaa; // Grey - Text phụ, Disabled
$cutty-sark:  #566c72; // Blue Grey - Dark text, Warning text (Đậm)
$silver-rust: #ccc5bc; // Beige Grey - Line, Border nhạt
$fiord:       #3c5b63; // Deep Green/Blue - Secondary, Success
$pewter:      #959b99; // Medium Grey - Neutral
$pearl-bush:  #f2e5d6; // Light Beige - Light background

$white-pure:  #ffffff;
$black-pure:  #000000;

$primary-color:   $blue-dianne;
$secondary-color: $fiord;
$link-color:      $blue-dianne; 
$accent-color:    $parchment;
$info-color:      $sirocco;
$success-color:   $fiord; 

$warning-color:   $cutty-sark; 

$danger-color:    #f14668; 
$dark-color:      $cutty-sark;
$light-color:     $pearl-bush;
$neutral-color:   $delta;

// ==========================================
// 2. COLOR MAP & SIZE
// ==========================================
$color: (    
  "primary":   $primary-color,
  "secondary": $secondary-color,
  "link":      $link-color,     
  "accent":    $accent-color,
  "info":      $info-color,
  "success":   $success-color,
  "warning":   $warning-color, 
  "danger":    $danger-color,
  "dark":      $dark-color,
  "light":     $light-color,
  "delta":     $delta,
  "pewter":    $pewter,
  "silver":    $silver-rust,
  "white":     $white-pure, 
  "black":     $black-pure 
);

$size: (
  one: 10px,
  two: 17px,
  three: 30px,
  four: 40px,
  five: 50px,
  six: 60px
);

// ==========================================
// 3. MIXINS & UTILITIES
// ==========================================

@mixin cbox($width, $height, $font, $background) {
  display: flex;
  width: $width;
  height: $height;
  border: 1.5px solid $sirocco;
  font-size: $font;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  color: $sirocco;
  font-weight: bold;
  background-color: $background;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

// Tạo class cbox rỗng
@each $name, $hex in $color {
  @each $n, $v in $size {
    .cbox-#{$name}-#{$n} {
      @include cbox($v*2, $v*2, $v*1.1, white);
      border-color: $hex;
      color: $hex;
    }
  }
}

// Tạo class cbox đặc
@each $name, $hex in $color {
  @each $n, $v in $size {
    .cbox-fill-#{$name}-#{$n} {
      @include cbox($v*2, $v*2, $v, $hex);
      border-color: $hex;
      // Tự động tìm màu chữ tương phản
      color: if(color.channel($hex, "lightness", $space: hsl) > 70, $blue-dianne, $white-pure);
    }
  }
}

// Font size loops
@for $i from 10 through 50 {
  .fs-#{$i} { font-size: $i + px; }
  .fsb-#{$i} { font-size: $i + px; font-weight: bold; }
}

// ==========================================
// 4. CUSTOM CLASSES
// ==========================================

.fullheight { height: 100vh; }

.textsize {
  @include mobile { font-size: 18px; }
}

.header-logo {
  background: url('/logo_dev.png') no-repeat center center;
  background-size: 40px;
  width: 50px;
}

.border-bottom { border-bottom: 1px solid color.change($black-pure, $alpha: 0.15) }

.carousel-height {
  width: 100%;
  height: 80vh;
  @include mobile { height: 110vh; }
}

// Mobile Spacing Utilities
.mobile-mt20 { @include mobile { margin-top: 20px; } }
.mobile-px10 { @include mobile { padding-left: 10px; padding-right: 10px; } }
.mobile-pt10 { @include mobile { padding-top: 10px; } }
.mobile-pt80 { padding-top: 120px; @include mobile { padding-top: 80px; } }

.fullhd-pt30 {
  padding-top: 30px;
  @include until($fullhd) { padding-top: 0px; }
}

.media-width {
  width: 120px !important;
  @include mobile { width: 112px !important; }
}

.hideon-mobile { @include mobile { display: none; } }

// Typography Classes
.maintext {
  margin-top: 20px;
  font-size: 40px;
  line-height: 3rem;
  font-weight: 600;
  color: $blue-dianne;
  @include mobile { font-size: 34px; }
}

.subtext {
  margin-top: 30px;
  font-size: 1.2rem;
  line-height: 2rem;
  color: $cutty-sark;
  @include mobile { line-height: 1.8rem; }
}
  
.dotslide {
  position: fixed;
  bottom: 0;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 999;
}

.activetab {
  border-radius: 8px;
  color: $white-pure;
  background-color: $blue-dianne;
}

// Block Layout
.blockdiv {
  max-width: 1900px !important;
  background-color: $white-pure; 
  padding: 60px 15px 40px 15px;

  @include until($desktop) { padding: 65px 20px 30px 20px; }
  @include mobile { padding: 65px 16px 30px 16px; }

  .columns .column {
    @include mobile { padding-left: 0; padding-right: 0; }
  }

  .padding-desktop {
    @media screen and (min-width: $desktop) { padding-left: 20px; padding-right: 20px; }
  }
}

.padding-text {
  padding-left: 15%; padding-right: 5%;
  @include until($desktop) { padding-left: 0; padding-right: 0; }
  @include until($fullhd) { padding-left: 0; padding-right: 0; }
}

.padding-image {
  padding-left: 5%; padding-right: 15%;
  @include until($fullhd) { padding-left: 0; padding-right: 0; }
  @include until($desktop) { padding-left: 15%; padding-right: 15%; }
  @include mobile { padding-left: 0; padding-right: 0; } 
}

.imgcontainer {
  position: relative;
  width: 100% !important;
  max-width: 500px;
}

.centered {
  position: absolute;
  top: 80%; 
  text-align: center;
}

// Tooltip Styles
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: $white-pure;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: $fiord;
  color: $parchment;
  border-radius: 6px;
  position: absolute;
  margin-left: 0px;
  z-index: 999;
  bottom: 110%;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 6px;
  font-size: 14px;
  pointer-events: none;
}

.to-left { right: 30px; }

@mixin tooltipshow() {
  visibility: visible;
  opacity: 1;
  position: absolute;
  min-width: 300px;
  z-index: 999;
  background-color: $pearl-bush;
  color: $blue-dianne;
  border: 1px solid $silver-rust;
}

.tooltip:hover .tooltiptext { @include tooltipshow() }
.tooltip:hover .tooltiptext .to-left { @include tooltipshow() }

// Dot Indicators
@mixin dot($background) {
  height: 22px;
  width: 22px;
  text-align: center;
  color: $white-pure;
  font-weight: bold;
  background-color: $background;
  display: inline-block;
  cursor: pointer;
  font-size: 15px;
  border-radius: 50%;
}

@each $name, $hex in $color {
  .dot-#{$name} {
    @include dot($hex);
  }
}

// ==========================================
// 5. HELPER CLASSES GENERATOR
// ==========================================
@each $name, $hex in $color {
  .bg-#{$name} { background-color: $hex !important; }
  .text-#{$name} { color: $hex !important; }
  .border-#{$name} { border-color: $hex !important; }
  .icon-#{$name} { color: $hex !important; }
  
  .icon-bg-#{$name} {
    background-color: $hex !important;
    color: if(color.channel($hex, "lightness", $space: hsl) > 70, $blue-dianne, $white-pure) !important;
    padding: 0.5rem;
    border-radius: 4px;
  }
}

// ==========================================
// 6. BULMA OVERRIDES
// ==========================================

// Backgrounds
.has-background-primary { background-color: $primary-color !important; }
.has-background-secondary { background-color: $secondary-color !important; }
.has-background-info { background-color: $info-color !important; }
.has-background-success { background-color: $success-color !important; }
.has-background-warning { background-color: $warning-color !important; }
.has-background-danger { background-color: $danger-color !important; }
.has-background-light { background-color: $light-color !important; }
.has-background-dark { background-color: $dark-color !important; }
.has-background-white { background-color: $white-pure !important; }

// Text Colors
.has-text-primary { color: #086e71 !important; }
.has-text-secondary { color: $secondary-color !important; }
.has-text-info { color: $info-color !important; }
.has-text-success { color: $success-color !important; }
.has-text-warning { color: $warning-color !important; } 
.has-text-danger { color: $danger-color !important; }
.has-text-light { color: $accent-color !important; }
.has-text-dark { color: $dark-color !important; }

// Button/Element States (is-*)
.is-primary {
  background-color: $primary-color !important;
  border-color: transparent !important;
  color: $white-pure !important;
}

.is-secondary {
  background-color: $secondary-color !important;
  border-color: transparent !important;
  color: $white-pure !important;
}

.is-link {
  background-color: $link-color !important;
  border-color: transparent !important;
  color: $white-pure !important;
}

.is-info {
  background-color: $info-color !important;
  border-color: transparent !important;
  color: $white-pure !important;
}

.is-success {
  background-color: $success-color !important;
  border-color: transparent !important;
  color: $white-pure !important;
}

.is-warning {
  background-color: $warning-color !important;
  border-color: transparent !important;
  color: $white-pure !important; 
}

.is-danger {
  background-color: $danger-color !important;
  border-color: transparent !important;
  color: $white-pure !important;
}

.is-light {
  background-color: $light-color !important;
  border-color: transparent !important;
  color: $blue-dianne !important;
}

.is-dark {
  background-color: $dark-color !important;
  border-color: transparent !important;
  color: $white-pure !important;
}

// Outlined Variants
.is-primary.is-outlined {
  background-color: transparent !important;
  border-color: $primary-color !important;
  color: $primary-color !important;
}

.is-link.is-outlined {
  background-color: transparent !important;
  border-color: $link-color !important;
  color: $link-color !important;
}

.is-info.is-outlined {
  background-color: transparent !important;
  border-color: $info-color !important;
  color: $info-color !important;
}

.is-success.is-outlined {
  background-color: transparent !important;
  border-color: $success-color !important;
  color: $success-color !important;
}

.is-warning.is-outlined {
  background-color: transparent !important;
  border-color: $warning-color !important;
  color: $warning-color !important;
}

.is-primary.is-light {
  background-color: rgba($primary-color, 0.1) !important;
  color: $primary-color !important;
}

.is-info.is-light {
  background-color: rgba($info-color, 0.2) !important;
  color: color.adjust($info-color, $lightness: -10%) !important;
}

.is-success.is-light {
  background-color: rgba($success-color, 0.1) !important;
  color: $success-color !important;
}