/* ──────────────────────────────────────────────────────────────
   INT Rx · โทนเดียวกับตัวโปรแกรม (โหลดต่อจาก rx.css)
   พื้นกรมเข้มแบบแถบเมนูซ้ายของโปรแกรม · เขียวอมฟ้าเรืองแสง (#0EA5A0 → #22C9D8) · ทอง (#E7B646)
   ลวดลาย: ตารางกริด + ลายวงจร + แสงกวาดของเครื่องสแกน บนพื้นเข้ม
   ส่วนเนื้อหาสว่าง (sec--paper) ใช้การ์ดขาวขอบบนไล่สีแบบการ์ดแดชบอร์ดในโปรแกรม

   หลักการ: rx.css ใช้ --glass/--on กับพื้นที่ "กระจก" และ --carton/--ink กับวัตถุกระดาษ
   ไฟล์นี้พลิก --glass/--on เป็นโทนเข้มทั้งหน้า แล้วคืนค่าสว่างให้พื้นผิวสว่างทุกชิ้น
   ────────────────────────────────────────────────────────────── */

:root {
  --navy: #0a1b3d;
  --navy-2: #07132c;
  --navy-3: #050d20;
  --teal: #0ea5a0;
  --cyan: #22c9d8;
  --gold: #e7b646;
  --gold-hi: #f2c75c;
  --grad: linear-gradient(90deg, #0ea5a0, #22c9d8);
  --grad-line: linear-gradient(90deg, #0ea5a0, #22c9d8 45%, #e7b646);

  /* พื้นเข้ม */
  --glass: #07132c;
  --glass-2: rgba(255, 255, 255, 0.06);
  --glass-3: rgba(255, 255, 255, 0.1);
  --rule: rgba(120, 200, 235, 0.18);
  --tick: rgba(34, 201, 216, 0.5);
  --tick-fine: rgba(34, 201, 216, 0.24);
  --on: #eaf2ff;
  --on-2: #a9b8d0;
  --lock: #e7b646;
  --lock-hi: #f2c75c;
  --lock-ink: #f2c75c;
  --lock-display: #f2c75c;

  --carton: #ffffff;
  --carton-2: #eef3f9;
  --carton-3: #d5dde8;
  --r: 18px;
  --lift: 0 2px 6px rgba(5, 13, 32, 0.12), 0 24px 48px -22px rgba(5, 13, 32, 0.55);
  --lift-paper: 0 1px 2px rgba(14, 26, 43, 0.05), 0 10px 28px -16px rgba(14, 26, 43, 0.22);

  /* ลายวงจร (เส้น + จุดเชื่อม) */
  --circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%2322C9D8' stroke-width='1.2'%3E%3Cpath d='M0 44h52l22 22h46l12-12h88M24 220v-46l22-22v-34M150 0v34l-22 22M220 132h-34l-22 22v66M82 118h34l12 12h30M0 176h30l14-14'/%3E%3Cg fill='%2322C9D8' stroke='none'%3E%3Ccircle cx='52' cy='44' r='2.6'/%3E%3Ccircle cx='120' cy='66' r='2.6'/%3E%3Ccircle cx='46' cy='118' r='2.6'/%3E%3Ccircle cx='128' cy='56' r='2.6'/%3E%3Ccircle cx='164' cy='154' r='2.6'/%3E%3Ccircle cx='158' cy='130' r='2.6'/%3E%3Ccircle cx='82' cy='118' r='2.6'/%3E%3Ccircle cx='44' cy='162' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  --grid: linear-gradient(rgba(34, 201, 216, 0.075) 1px, transparent 1px) 0 0 / 44px 44px,
          linear-gradient(90deg, rgba(34, 201, 216, 0.075) 1px, transparent 1px) 0 0 / 44px 44px;
}

/* พื้นผิวสว่าง: คืนค่าตัวหนังสือเข้มและทองเข้ม */
.sec--paper, .carton, .dock, .slip, .menu nav, .ptag, .deep, .addon, .note-wide {
  --on: #0e1a2b;
  --on-2: #44526a;
  --rule: #cfd8e5;
  --glass-2: #eef3f9;
  --glass-3: #e3eaf3;
  --lock-ink: #7a4f00;
  --lock-display: #9a6400;
}

body { background: var(--navy-2); scrollbar-color: #1d3a66 var(--navy-3); }
::selection { background: rgba(34, 201, 216, 0.35); color: inherit; }

/* ───────────── ปุ่ม ───────────── */
.btn--go {
  background: linear-gradient(90deg, #0d9488, #0891b2);
  color: #ffffff;
  box-shadow: 0 10px 26px -10px rgba(34, 201, 216, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn--go:hover { background: linear-gradient(90deg, #0fa597, #0a9fc3); box-shadow: 0 14px 32px -10px rgba(34, 201, 216, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn--buy {
  background: linear-gradient(90deg, #e7b646, #f2c75c);
  color: #1e1400;
  box-shadow: 0 10px 24px -12px rgba(231, 182, 70, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn--buy:hover { background: linear-gradient(90deg, #f0c255, #ffd877); }
.btn--ghost { color: var(--ink); }
.btn--line:hover { background: rgba(34, 201, 216, 0.1); }
.sec--paper .btn--line:hover { background: rgba(14, 26, 43, 0.06); }
.tag--new { background: var(--grad); color: #04132b; }

/* ───────────── แถบบน: กระจกเข้ม + เส้นไล่สีแบบหัวหน้าโปรแกรม ───────────── */
.bar {
  background: rgba(6, 16, 38, 0.8);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 0;
}
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-line); opacity: 0.9; pointer-events: none;
}
.brand { position: relative; }
.brand::before {
  content: ""; position: absolute; z-index: -1; left: -5px; top: 50%; width: 52px; height: 52px; margin-top: -26px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, rgba(34, 201, 216, 0), rgba(34, 201, 216, 0.6), rgba(231, 182, 70, 0.6), rgba(34, 201, 216, 0));
  filter: blur(7px); opacity: 0.8;
}
.brand-word em {
  background: linear-gradient(90deg, #f2c75c, #ffe19a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav a:hover { background: rgba(34, 201, 216, 0.12); }
.menu[open] summary { background: var(--grad); color: #04132b; }
.menu nav { box-shadow: 0 0 0 1px rgba(34, 201, 216, 0.3), var(--lift); }
.fb:hover .fb-mono { outline-color: var(--cyan); }

/* ───────────── ไม้บรรทัดใต้แถบบน: ขีดสีฟ้า + เส้นไฟ ───────────── */
.ruler--top { background-color: var(--navy-2); }
.ruler--top::after {
  background:
    linear-gradient(90deg, rgba(34, 201, 216, 0) 0%, rgba(34, 201, 216, 0.9) 20%, rgba(94, 234, 212, 0.9) 80%, rgba(34, 201, 216, 0) 100%) top / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(34, 201, 216, 0.16) 0%, rgba(34, 201, 216, 0) 100%);
}

/* ───────────── จอแรก ───────────── */
.hero, .hero[class] {
  background:
    radial-gradient(ellipse 46% 60% at 74% 42%, rgba(34, 201, 216, 0.2) 0%, rgba(34, 201, 216, 0.06) 45%, transparent 75%),
    radial-gradient(ellipse 40% 50% at 4% 100%, rgba(231, 182, 70, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% -10%, rgba(14, 165, 160, 0.22), transparent 70%),
    linear-gradient(180deg, #0a1b3d 0%, #07132c 55%, #050d20 100%);
}
.hero > * { position: relative; z-index: 1; }
/* ตารางกริด + ลายวงจร จางลงที่ขอบ */
.hero::before, .sec--glass::before {
  content: ""; position: absolute; inset: 0; z-index: 0; width: auto; border: 0; pointer-events: none;
  background: var(--circuit) 0 0 / 220px 220px, var(--grid);
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 60% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 75% at 60% 40%, #000 30%, transparent 85%);
}
.sec--glass::before { opacity: 0.4; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 10%, transparent 75%); }
/* แสงเครื่องสแกนกวาดลงช้า ๆ */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(34, 201, 216, 0) 0%, rgba(34, 201, 216, 0.09) 70%, rgba(94, 234, 212, 0.55) 99%, rgba(94, 234, 212, 0) 100%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: fx-sweep 9s cubic-bezier(0.45, 0, 0.55, 1) 2.4s infinite; }
  .hero::before { animation: fx-breathe 7s ease-in-out infinite; }
  .brand::before { animation: fx-spin 8s linear infinite; }
}
@keyframes fx-sweep {
  0% { transform: translateY(-160px); opacity: 0; }
  8% { opacity: 1; }
  60% { opacity: 1; }
  72% { transform: translateY(110vh); opacity: 0; }
  100% { transform: translateY(110vh); opacity: 0; }
}
@keyframes fx-breathe { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.7; } }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* หัวเรื่องบรรทัดที่สองบนพื้นเข้ม: ตัวอักษรไล่สีเขียวอมฟ้า → ทอง */
.hero h1 .hl, .sec--glass .sec-head h2 .hl, .final-copy h2 > .hl {
  color: transparent; padding: 0; margin: 0;
  background: linear-gradient(90deg, #5eead4 0%, #22c9d8 45%, #f2c75c 100%);
  -webkit-background-clip: text; background-clip: text;
}
.sec--paper .sec-head h2 .hl {
  background: linear-gradient(180deg, transparent 58%, rgba(34, 201, 216, 0.32) 58%, rgba(34, 201, 216, 0.32) 90%, transparent 90%);
}

/* บิลและผลอ่านลอยบนพื้นเข้ม */
.doc { box-shadow: 0 0 0 1px rgba(34, 201, 216, 0.28), 0 30px 60px -24px rgba(0, 0, 0, 0.75); }
.carton, .dock, .slip { box-shadow: 0 0 0 1px rgba(34, 201, 216, 0.22), var(--lift); }
.slip { border-radius: 14px; }
.news:hover { box-shadow: inset 0 0 0 1px var(--cyan); }

/* แผงดาวน์โหลด/ซื้อใต้จอแรก: การ์ดขาว ขอบบนไล่สี + เรืองแสงรอบนอก */
.dock {
  border-radius: 20px;
  background: var(--grad) top / 100% 3px no-repeat, #ffffff;
  box-shadow: 0 0 0 1px rgba(34, 201, 216, 0.35), 0 26px 60px -26px rgba(34, 201, 216, 0.55), var(--lift);
}
.plan { border-radius: 14px; }
.plan:hover { box-shadow: inset 0 0 0 2px var(--teal), 0 12px 26px -14px rgba(34, 201, 216, 0.8); }
.vet-line img { background: rgba(255, 255, 255, 0.9); }

/* ───────────── การ์ด (แบบการ์ดแดชบอร์ดในโปรแกรม) ───────────── */
.carton { border-radius: var(--r); border-top-right-radius: var(--r); background: var(--grad) top / 100% 3px no-repeat, #ffffff; overflow: visible; }
.carton::before { display: none; }
.spec h2 { border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, #0a1b3d, #0c2a55); box-shadow: inset 0 -2px 0 rgba(34, 201, 216, 0.6); }
.ptag, .deep, .addon, .note-wide { border-radius: var(--r); }
.ptag { background: var(--grad) top / 100% 3px no-repeat, #ffffff; }
.ptag--pro { background: linear-gradient(90deg, #e7b646, #f2c75c) top / 100% 4px no-repeat, #ffffff; }
.ad-zoom { border-radius: 16px; box-shadow: 0 0 0 1px rgba(34, 201, 216, 0.25), var(--lift); }
.ad-arrow:hover { box-shadow: inset 0 0 0 1.5px var(--cyan); color: var(--cyan); }

/* ───────────── ส่วนเนื้อหา ───────────── */
.sec--glass {
  background:
    radial-gradient(ellipse 50% 60% at 92% 0%, rgba(34, 201, 216, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(231, 182, 70, 0.08), transparent 70%),
    linear-gradient(180deg, #081631, #050d20);
  border-top: 0;
}
.sec--glass > * { position: relative; z-index: 1; }
.sec--glass + .sec--glass { border-top: 1px solid var(--rule); }
.sec--paper {
  background:
    radial-gradient(ellipse 55% 40% at 88% 0%, rgba(34, 201, 216, 0.12), transparent 70%),
    radial-gradient(ellipse 45% 35% at 4% 0%, rgba(231, 182, 70, 0.1), transparent 70%),
    #f3f6fa;
}
/* รอยต่อด้านบนของส่วนสว่าง = เส้นไล่สีแบบหัวหน้าโปรแกรม */
.sec--paper::before {
  top: 0; height: 3px;
  background: var(--grad-line);
  box-shadow: 0 0 18px rgba(34, 201, 216, 0.55);
}
.sec--glass .sec-head h2, .final-copy h2 { text-shadow: 0 0 34px rgba(34, 201, 216, 0.18); }
.sec--glass .sec-head h2 .hl, .final-copy h2 > .hl { text-shadow: none; }
.help { box-shadow: inset 0 0 0 1px rgba(34, 201, 216, 0.25); }

/* ───────────── ท้ายหน้าและแถบลัดมือถือ ───────────── */
.foot { background: var(--navy-3); border-top: 0; position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--grad-line); opacity: 0.6; }
.foot nav a:hover { background: rgba(34, 201, 216, 0.12); }
@media (max-width: 759px) {
  .quickbar {
    background: rgba(5, 13, 32, 0.88);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid rgba(34, 201, 216, 0.3);
    box-shadow: 0 -12px 28px -14px rgba(0, 0, 0, 0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after { display: none; }
}