:root {
  --ink: #07172B;
  --navy: #0B2545;
  --navy-2: #122F55;
  --navy-3: #1B3F6B;
  --brass: #C9A14A;
  --brass-2: #E0BE6F;
  --brass-soft: #F2E2B7;
  --bone: #F4F0E8;
  --bone-2: #EAE3D4;
  --paper: #FBF8F2;
  --slate: #4A5A70;
  --slate-2: #6B7A8F;
  --line: #1E3A60;
  --line-soft: #DCD3BF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.serif { font-family: 'Sora', sans-serif; }
.mono  { font-family: 'JetBrains Mono', monospace; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D4AF37;
}

h1, h2, h3, h4 {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: 64px; line-height: 1.04; letter-spacing: -0.025em; font-weight: 800; }
h2 { font-size: 44px; line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: 22px; line-height: 1.25; }
p  { line-height: 1.6; }

::selection { background: var(--brass); color: var(--navy); }

/* image-slot placeholder rendering (the original artifact uses a custom element) */
image-slot {
  display: block;
  background:
    linear-gradient(135deg, rgba(11,37,69,0.12), rgba(201,161,74,0.10)),
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(201,161,74,0.06) 10px 11px);
  border: 1px dashed rgba(201,161,74,0.35);
  position: relative;
}
image-slot::after {
  content: attr(placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-2);
}

/* ========================================================
   ULTIMATE LIQUID LAYOUT & RESPONSIVE PATCH
   ปรับโครงสร้างเว็บทั้งหมดให้เป็นสัดส่วนของเหลว (Liquid) 100% 
   แก้ปัญหาพื้นที่ว่างด้านขวา และตัดสิทธิ์การเลื่อนจอแนวราบทุกกรณี
======================================================== */

/* 1. คุมขอบเขตกล่องใหญ่สุดระดับ Global ไม่ให้บวมหรือล้นออกนอกจอ */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: clip !important; /* ล็อคป้องกันการ Scroll แนวนอนเด็ดขาด */
  margin: 0;
  padding: 0;
}

/* 2. ปรับ Container ของแต่ละเซกชันให้ยืดหยุ่นแบบเหลวตามสัดส่วนหน้าจอ */
.container {
  width: 100% !important;
  max-width: 1240px !important;
  box-sizing: border-box !important;
}

/* ========================================================
   สำหรับหน้าจอขนาดเล็กและมือถือ (Max-Width: 768px)
======================================================== */
@media (max-width: 768px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ปรับขนาดหัวข้อใหญ่ไม่ให้ล้นหน้าจอ */
  h1 { font-size: 32px !important; line-height: 1.2 !important; }
  h2 { font-size: 28px !important; line-height: 1.25 !important; }

  /* --------------------------------------------------
     TOPBAR (แถบข้อมูลติดต่อด้านบนสุด) 
     - ตัวการหลักที่ทำตัวหนังสือล้นขอบจอ: ปรับให้ขึ้นบรรทัดใหม่ตามแนวตั้ง
  -------------------------------------------------- */
  div[style*="background: var(--ink)"] > .container {
    height: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 0 !important;
    white-space: normal !important;
    gap: 12px !important;
  }
  div[style*="background: var(--ink)"] > .container > div {
    flex-direction: column !important;
    align-items: center !important;
    white-space: normal !important;
    gap: 8px !important;
  }

  /* --------------------------------------------------
     NAVIGATION BAR (แถบเมนูด้านบน)
     - ย้ายปุ่ม Contact ขึ้นบรรทัดแรกคู่โลโก้ แล้วย้ายแถบเมนูลงมาบรรทัดที่ 2 ปัดซ้ายขวาได้
  -------------------------------------------------- */
  div[style*="position: sticky"] > .container {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 14px 20px !important;
    gap: 14px !important;
  }
  div[style*="position: sticky"] > .container > div:last-child {
    order: 2 !important; /* ดึงปุ่ม Contact ขึ้น */
  }
  div[style*="position: sticky"] > .container > div:last-child > a {
    padding: 10px 14px !important;
    font-size: 11.5px !important;
  }
  nav {
    display: flex !important;
    width: 100% !important;
    order: 3 !important; /* ดันเมนูลงมาบรรทัดที่ 2 */
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important; /* ปัดนิ้วซ้ายขวาเฉพาะตัวเมนู */
    white-space: nowrap !important;
    padding-bottom: 6px !important;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
  }
  nav::-webkit-scrollbar { display: none; } /* ซ่อนแถบเลื่อนเมนูให้สวยงาม */

  /* --------------------------------------------------
     HERO SECTION (ส่วนหัวเว็บบนสุด)
  -------------------------------------------------- */
  section h1 ~ p ~ div {
    flex-direction: column !important;
    gap: 12px !important;
  }
  section h1 ~ p ~ div > a {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* แถบกล่องสถิติสี่เหลี่ยมด้านล่าง (FOCUS, MODEL, STANDARD) */
  section .container > div:last-child {
    flex-direction: column !important;
    gap: 24px !important;
    margin-top: 40px !important;
  }
  section .container > div:last-child > div[style*="width: 1"] {
    display: none !important; /* ซ่อนเส้นคั่นแนวตั้งที่ทำจอเบี้ยว */
  }
  
  /* กล่องข้อความคำเตือนมุมขวาล่าง (VESSEL APPROACHING PORT...)
     ปลดล็อคจาก Absolute ให้ลงมาต่อท้ายด้านล่างสุด ไม่ซ้อนทับแน่นอน */
  section > .mono:last-child {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    text-align: left !important;
    padding: 0 20px !important; /* ดึงขอบให้ตรงกับกล่อง Container บนมือถือ */
    margin-top: 40px !important;
    margin-bottom: 24px !important;
    display: block !important;
  }

  /* --------------------------------------------------
     GRID SYSTEM OVERHAUL (รื้อหน้าซ้าย/ขวา ทุกเซกชันให้ต่อกันแนวดิ่ง)
  -------------------------------------------------- */
  /* 1. โครงสร้างแบบ 2 คอลัมน์หลัก (ซ้าย/ขวา) */
  #introduction > .container > div,
  #products > .container > div:first-child,
  #philosophy > .container > div,
  #contact > .container > div {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* 2. บล็อกข้อมูลแบบ 3 คอลัมน์ย่อย (เซกชัน Introduction และ Philosophy) */
  #introduction .container div[style*="grid-template-columns: repeat(3"],
  #philosophy .container div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  #introduction .container div[style*="grid-template-columns: repeat(3"] > div,
  #philosophy .container div[style*="grid-template-columns: repeat(3"] > div {
    border-left: none !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  #introduction .container div[style*="grid-template-columns: repeat(3"] > div:last-child,
  #philosophy .container div[style*="grid-template-columns: repeat(3"] > div:last-child {
    border-bottom: none !important;
  }

  /* 3. การ์ดสินค้าและการ์ดขอบเขตงานแบบ 4 คอลัมน์ (ปรับเป็น 1 คอลัมน์เต็มจอ) */
  #scope > .container > div:last-child,
  #products > .container > div:last-child {
    grid-template-columns: 1fr !important;
  }
  #scope > .container > div:last-child > div,
  #products > .container > div:last-child > div {
    border-right: none !important;
    border-bottom: 1px solid var(--line-soft) !important;
  }
  #scope > .container > div:last-child > div:last-child,
  #products > .container > div:last-child > div:last-child {
    border-bottom: none !important;
  }
  #scope > .container > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* --------------------------------------------------
     TRADE LANES (ส่วนแผนที่เครือข่ายท่าเรือ)
  -------------------------------------------------- */
  #operations > .container > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* แผนที่ SVG: บังคับให้อยู่ในกล่อง และให้ปัดดูแผนที่ในกล่องตัวเอง ไม่ให้ดันหน้าเว็บเบี้ยว */
  #operations > .container > div:nth-child(2) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
  }
  #operations > .container > div:nth-child(2) > svg {
    min-width: 800px !important; /* ล็อคขนาดแผนที่ไว้ในหน้าต่าง Scroll ของมันเอง */
  }
  #operations > .container > div:nth-child(2) > div.mono:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    line-height: 1.5 !important;
  }
  #operations > .container > div:nth-child(2) > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* รายชื่อรายชื่อท่าเรือด้านล่างแผนที่ */
  #operations > .container > div:nth-child(3) {
    grid-template-columns: 1fr !important;
  }
  #operations > .container > div:nth-child(3) > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(201,161,74,0.2) !important;
  }
  #operations > .container > div:nth-child(3) > div:last-child {
    border-bottom: none !important;
  }
  /* ท้ายเซกชันการคว่ำบาตร (Sanctions Note) */
  #operations > .container > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* --------------------------------------------------
     CONTACT FORM & FOOTER
  -------------------------------------------------- */
  #contact form { padding: 32px 20px !important; }
  #contact form > div:nth-child(2),
  #contact form > div:nth-child(4) {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  #contact form > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* ส่วนท้ายสุดของเว็บ */
  footer .container > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  footer .container > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  footer .container > div:last-child > div:last-child {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }
}

div[style*="position: sticky"] {
  position: -webkit-sticky !important; 
  position: sticky !important;
  top: -1px !important; 
  z-index: 9999 !important; 
}

/* ========================================================
   PRELOADER (หน้าจอ Loading 100%) - Spinner Icon
======================================================== */
#preloader {
  position: fixed;
  inset: 0;
  background-color: var(--ink); 
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(224, 190, 111, 0.15); 
  border-top: 3px solid var(--brass-2); 
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}