web/app/assets/styles/main.scss

@use "sass:color";
@use "bulma/sass/utilities/initial-variables.scss" as *;
@use "bulma/sass/utilities/derived-variables.scss" as *;
@use "bulma/sass/utilities/mixins.scss" as *;
@use "bulma/sass/components/card.scss" as *;
@use "utils.scss";
@use "overrides-components.scss";

:root {
  font-size: 15px;
}

// ==========================================
// 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
// ==========================================

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

// Block Layout
.blockdiv {
  max-width: 1900px !important;
  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; }
  }
}

// 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;
}

@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() }