/* ################################################################# */
/* G E N E R A L CSS S T Y L E */
/* #region */


*,
*::before,
*::after {
  box-sizing: border-box;
  transition: background-color 1s ease-in-out;

}

html {
  scroll-behavior: smooth;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1.5;
  overflow-x: hidden;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.iso-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-image: url('icon.ico');
  background-size: contain;
  background-repeat: no-repeat;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* กลางวัน */
:root {
  /* --- LIGHT MODE / กลางวัน (ค่าเริ่มต้น) --- */
  --color-bg-blur-white:#ffffff18;
  /* พื้นหลังหลัก (Background) */
  --color-bg-primary: #FFFFFF;
  /* ขาวสะอาด */
  --color-bg-natural: #F9FAF7;
  /* ขาวอมเขียวธรรมชาติ */
  --color-bg-warm: #FFFDF9;
  /* ขาวอมส้มอบอุ่น */
  --color-bg-light-eco: #F2F7F2;
  /* เขียวอ่อนจาง */
  --color-bg-cream-orange: #FFF8F0;
  /* ครีมอมส้ม */
  --color-bg-soft-cream: #F9F9F6;
  /* พื้นหลังหลัก (เบา, ขาวอมครีม) */
  --color-bg-earth-secondary: #F2EFEA;
  /* background รอง โทน earth */
  --color-bg-eco-section: #F8F5F0;
  /* section eco */
  --color-bg-clean-light-green: #F4F7F3;
  /* โทนเขียวอ่อนสะอาด */
  --color-text-premium-text: #d4a373;
  --color-text-grey-text: #6c6c6c;
  
  /* กล่อง/การ์ด (Box / Card) */
  --color-card-eco-box: #E8F5E9;
  /* เขียวจาง eco box */
  --color-card-pastel-orange: #FFF3E0;
  /* ส้มพาสเทลกล่อง */
  --color-card-light-green: #F1F8E9;
  /* การ์ดเขียวเบา */
  --color-card-sun-yellow: #FFFDE7;
  /* กล่องเหลืองอมส้ม */
  --color-card-bright-green: #F0FFF4;
  /* เขียวอมขาวสดใส */
  --color-card-warm-sunshine: #FFF9E6;
  /* การ์ดโทนอุ่น sunshine */
  --color-card-accent-eco: #F0F4C3;
  /* accent สดใส eco */
  --color-card-beige-nature: #FAF3E0;
  /* โทน beige / nature */
  --color-card-box-nature: #78A97A;


  /* ข้อความ (Text) */
  --color-text-primary: #2E2E2E;
  /* ตัวอักษรหลัก */
  --color-text-secondary: #4E4E4E;
  /* ตัวอักษรรอง */
  --color-text-heading-eco: #1B5E20;
  /* เขียวเข้ม (หัวข้อ eco) */
  --color-text-subhead-green: #388E3C;
  /* เขียวสด (subhead) */
  --color-text-emphasis-orange-dark: #E65100;
  /* ส้มเข้ม (เน้น) */
  --color-text-highlight-orange: #FF6F00;
  /* ส้มสด (highlight) */
  --color-text-secondary-eco: #33691E;
  /* ตัวอักษรเขียวเข้มรอง */
  --color-text-warm-key: #BF360C;
  /* ตัวอักษรโทนอบอุ่น (เน้นคำสำคัญ) */
  --color-text-cream-orange: #FFF8F0;
  /* ครีมอมส้ม */


  /* ปุ่ม (Button) */
  --color-btn-eco-action: #4CAF50;
  /* ปุ่มเขียว eco action */
  --color-btn-eco-secondary: #81C784;
  /* ปุ่มเขียวรอง */
  --color-btn-orange-bright: #FF9800;
  /* ปุ่มส้มสดใส */
  --color-btn-orange-dark: #FB8C00;
  /* ปุ่มส้มเข้ม */
  --color-btn-orange-earth: #F57C00;
  /* ปุ่มส้ม earth tone */
  --color-btn-accent-yellow: #FFB300;
  /* ปุ่ม accent yellow */
  --color-btn-earth-tone: #6D4C41;
  /* ปุ่ม earth tone */

  /* 1. Eco Green Gradients (โทนธรรมชาติ/สุขภาพ) */
  --gradient-eco-1: linear-gradient(135deg, #A5D6A7 0%, #388E3C 100%);
  /* Light Green to Dark Green */
  --gradient-eco-2: linear-gradient(to right, #C8E6C9, #91da95);
  /* Gentle Green Wash */
  --gradient-eco-3: linear-gradient(45deg, #F0FFF4 0%, #E8F5E9 100%);
  /* Very Light Eco Background */
  --gradient-eco-4: linear-gradient(to bottom, #4CAF50, #1B5E20);
  /* Action Green to Deep Green */
  --gradient-eco-5: radial-gradient(circle, #F4F7F3 0%, #F9FAF7 100%);
  /* Soft radial green */

  /* 2. Warm Orange/Sunset Gradients (โทนอบอุ่น/พลังงาน) */
  --gradient-warm-1: linear-gradient(135deg, #FF9800 0%, #E65100 100%);
  /* Bright Orange to Deep Orange */
  --gradient-warm-2: linear-gradient(to right, #FFCA28, #FB8C00);
  /* Yellow Accent to Mid Orange */
  --gradient-warm-3: linear-gradient(to top, #FFFDE7, #FFF9E6);
  /* Light Creamy Transition */
  --gradient-warm-4: linear-gradient(45deg, #FFF3E0 0%, #FFF8F0 100%);
  /* Soft Pastel Orange */
  --gradient-warm-5: radial-gradient(circle, #FFF8F0 0%, #F57C00 100%);
  /* Cream center to Earth Orange edge */

  /* 3. Earth Tone Gradients (โทนดิน/ไม้) */
  --gradient-earth-1: linear-gradient(135deg, #8D6E63 0%, #6D4C41 100%);
  /* Mid Brown to Dark Brown */
  --gradient-earth-2: linear-gradient(to right, #F2EFEA, #FAF3E0);
  /* Light Earth to Beige */
  --gradient-earth-3: linear-gradient(45deg, #BF360C 0%, #E65100 100%);
  /* Clay Red to Dark Orange */
  --gradient-earth-4: linear-gradient(to bottom, #4E4E4E, #2E2E2E);
  /* Soft Grey/Text to Dark Text */
  --gradient-earth-5: radial-gradient(circle, #F9F9F6 0%, #F2EFEA 100%);
  /* Natural White to Earth Secondary */

  /* 4. Utility/Blue Gradients (โทนสะอาด/เทคโนโลยี) */
  --gradient-utility-1: linear-gradient(135deg, #42A5F5 0%, #1976D2 100%);
  /* Sky Blue to Royal Blue */
  --gradient-utility-2: linear-gradient(to right, #B3E5FC, #81D4FA);
  /* Light Cyan Wash */
  --gradient-utility-3: linear-gradient(45deg, #E3F2FD 0%, #BBDEFB 100%);
  /* Very Light Blue (Clean) */
  --gradient-utility-4: linear-gradient(to bottom, #9E9E9E, #616161);
  /* Light Grey to Dark Grey */
  --gradient-utility-5: radial-gradient(circle, #FFFFFF 0%, #E0E0E0 100%);
  /* White to Light Grey */

  /* 5. NEW DAYTIME GRADIENTS (กลางวัน) - 5 สี ตามคำขอ */
  --gradient-day-1: linear-gradient(180deg, #FFFFFF 0%, #E6FADF 100%);
  /* ขาว-เขียวอ่อน: Clean, soft eco wash */
  --gradient-day-2: linear-gradient(45deg, #FFD700 0%, #FF8C00 100%);
  /* Sunrise: Gold to Bright Dark Orange */
  --gradient-day-3: linear-gradient(135deg, #87CEEB 0%, #00BFFF 100%);
  /* Clear Sky: Light Sky Blue to Deep Sky Blue */
  --gradient-day-4: linear-gradient(to right, #FFDAB9, #FFE4E1);
  /* Pastel Peach: Peach to Misty Rose */
  --gradient-day-5: radial-gradient(circle, #E6E6FA 0%, #D8BFD8 100%);
  /* Soft Lavender: Lavender center to Thistle edge */
}

/* กลางคืน */
body.dark-theme {
  /* พื้นหลังหลัก (Background) */
  --color-bg-primary: #121212;
  /* พื้นหลังหลัก */
  --color-bg-secondary: #1B1B1B;
  /* พื้นหลังรอง */
  --color-bg-eco-base-dark: #202820;
  /* เขียวเข้ม eco base */
  --color-bg-dark-orange-earth: #1E1B16;
  /* ดำอมส้ม earth */
  --color-bg-neutral-dark: #262626;
  /* เทาเข้ม neutral */
  --color-bg-section-dark: #1C1C1C;
  /* พื้นหลัง section */
  --color-bg-readable: #202124;
  /* พื้นหลังเน้นอ่านง่าย */
  --color-bg-soft-dark-grey: #2C2C2C;
  /* โทนเทาเข้ม soft */
  --color-bg-eco-dark-base: #1B2421;
  /* eco dark green base */

  /* กล่อง/การ์ด (Box / Card) */
  --color-card-eco-dark: #2E3B32;
  /* กล่องเขียวเข้ม */
  --color-card-dark-orange: #3E2C1E;
  /* กล่องโทนส้มเข้ม */
  --color-card-neutral-green: #37473F;
  /* กล่อง neutral green */
  --color-card-earth-dark: #332F2B;
  /* earth tone */
  --color-card-grey: #424242;
  /* grey card */
  --color-card-neutral-dark-blue: #37474F;
  /* การ์ด neutral dark */
  --color-card-cool-tone: #263238;
  /* การ์ดโทน cool */
  --color-card-earth-dark-brown: #3E2723;
  /* earth dark brown */
  --color-card-neutral-grey: #424242;
  /* neutral grey card */
  --color-card-nerf-grey: #5c5c5c;
  
  /* ข้อความ (Text) */
  --color-text-primary: #E0E0E0;
  /* ตัวอักษรหลัก */
  --color-text-secondary: #BDBDBD;
  /* ตัวอักษรรอง */
  --color-text-light-green: #C8E6C9;
  /* เขียวอ่อนอ่านง่าย */
  --color-text-emphasis-orange: #FFCC80;
  /* ส้มอ่อนเน้นข้อความ */
  --color-text-secondary-green: #A5D6A7;
  /* เขียวรอง */
  --color-text-secondary-orange: #FFB74D;
  /* ส้มรอง */
  --color-text-warm-key: #FFECB3;
  /* ตัวอักษรเน้นโทนอบอุ่น */
  --color-text-cream-orange: #FFF8F0;
  /* ครีมอมส้ม */
  --color-text-warm-bright: #FFFDF9;
  /* ขาวอมส้มอบอุ่น */
  --color-text-accent-eco: #F0F4C3;
  /* accent สดใส eco */

  /* ปุ่ม (Button) */
  --color-btn-eco-action: #66BB6A;
  /* ปุ่มเขียวสดใส */
  --color-btn-eco-secondary: #43A047;
  /* ปุ่มเขียวเข้ม eco */
  --color-btn-orange-bright: #FF9800;
  /* ปุ่มส้มสด */
  --color-btn-orange-dark: #FB8C00;
  /* ปุ่มส้มกลาง */
  --color-btn-orange-earth: #EF6C00;
  /* ปุ่มส้มเข้ม earth */
  --color-btn-accent-yellow: #FFCA28;
  /* ปุ่ม accent yellow */
  --color-btn-earth-tone: #8D6E63;
  /* ปุ่ม earth brown tone */

  /* 1. Eco Green Gradients (โทนเข้มธรรมชาติ) */
  --gradient-eco-1: linear-gradient(135deg, #43A047 0%, #2E3B32 100%);
  /* Dark Green to Card Green */
  --gradient-eco-2: linear-gradient(to right, #202820, #1B2421);
  /* Subtle Eco Dark Base */
  --gradient-eco-3: linear-gradient(45deg, #37473F 0%, #263238 100%);
  /* Card Green to Cool Card Tone */
  --gradient-eco-4: linear-gradient(to bottom, #66BB6A, #4CAF50);
  /* Bright Eco to Mid Eco */
  --gradient-eco-5: radial-gradient(circle, #2C2C2C 0%, #1B1B1B 100%);
  /* Soft dark grey radial */

  /* 2. Warm Orange/Sunset Gradients (โทนเข้มอบอุ่น) */
  --gradient-warm-1: linear-gradient(135deg, #FFB74D 0%, #fd7d13 100%);
  --gradient-warm-11: linear-gradient(0deg, #ffaf37 0%, #d66000 100%);
  /* Light Orange to Deep Earth Orange */
  --gradient-warm-2: linear-gradient(to right, #3E2C1E, #332F2B);
  /* Dark Orange Card to Earth Dark Card */
  --gradient-warm-3: linear-gradient(to top, #1E1B16, #121212);
  /* Dark Orange Earth to Primary Dark */
  --gradient-warm-4: linear-gradient(45deg, #FFCA28 0%, #FF9800 100%);
  /* Accent Yellow to Bright Orange */
  --gradient-warm-5: radial-gradient(circle, #3E2723 0%, #262626 100%);
  /* Earth Dark Brown center to Neutral Dark */

  /* 3. Earth Tone Gradients (โทนเข้มดิน/ไม้) */
  --gradient-earth-1: linear-gradient(135deg, #8D6E63 0%, #424242 100%);
  /* Earth Brown to Neutral Grey */
  --gradient-earth-2: linear-gradient(to right, #424242, #2C2C2C);
  /* Neutral Grey to Soft Dark Grey */
  --gradient-earth-3: linear-gradient(45deg, #202124 0%, #121212 100%);
  /* Readable Dark to Primary Dark */
  --gradient-earth-4: linear-gradient(to bottom, #BDBDBD, #E0E0E0);
  /* Light Text to Primary Text (Highlight) */
  --gradient-earth-5: radial-gradient(circle, #333333 0%, #1C1C1C 100%);
  /* Mid Dark Grey to Section Dark */

  /* 4. Utility/Blue Gradients (โทนเข้มสะอาด/เทคโนโลยี) */
  --gradient-utility-1: linear-gradient(135deg, #64B5F6 0%, #1565C0 100%);
  /* Mid Blue to Deep Blue */
  --gradient-utility-2: linear-gradient(to right, #263238, #37474F);
  /* Cool Card to Neutral Dark Blue Card */
  --gradient-utility-3: linear-gradient(45deg, #455A64 0%, #263238 100%);
  /* Dark Blue Grey */
  --gradient-utility-4: linear-gradient(to bottom, #757575, #424242);
  /* Mid Grey to Dark Grey */
  --gradient-utility-5: radial-gradient(circle, #333333 0%, #121212 100%);
  /* Mid Dark Grey to Primary Dark */

  /* 5. NEW NIGHTTIME GRADIENTS (กลางคืน) - 2 สี ตามคำขอ */
  --gradient-night-1: linear-gradient(135deg, #1A004B 0%, #3C008D 100%);
  /* Deep Cosmic: ม่วงเข้มสู่ม่วงราตรี */
  --gradient-night-2: linear-gradient(45deg, #2A0800 0%, #8C0E00 100%);
  /* Volcanic Magma: แดงเข้มสู่แดงเพลิง */
  --gradient-night-3: linear-gradient(to right, #001000 0%, #007D4C 100%);
  /* Tech Green: เขียวเข้มสู่เขียวนีออน (สำหรับเน้น) */
  --gradient-night-4: linear-gradient(180deg, #292929 0%, #1A1A1A 100%);
  /* Ambient Dark: เทาเข้มลึกสู่ดำ (ความลึกพื้นหลัง) */
  --gradient-night-5: radial-gradient(circle, #FF7B00 0%, #FF007B 100%);
  /* Vaporwave Accent: ส้ม-ชมพูม่วง (จุดเน้นฉูดฉาด) */
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */



/* #endregion */

/* ################################################################# */