/*! รักประมูล (Rakpramool) — Royal Navy & Gold Theme
 *  ธีมหรูหราแบบ "ทอง-กรมท่า" : น้ำเงินเข้ม (Royal Navy) + ทอง (Gold)
 *  โหลดหลัง css/styles.css เพื่อ override ธีมเดิมทั้งเว็บ
 *  แก้สี/ดีไซน์ที่นี่ได้ที่เดียว
 */

/* ==========================================================
   1. PALETTE (ตัวแปรสีหลักของทั้งธีม)
   ========================================================== */
:root {
    /* ทองคลาสสิก */
    --gold:            #d4af37;
    --gold-light:      #f5c451;
    --gold-bright:     #ffe9a8;
    --gold-dark:       #a8801f;
    --gold-deep:       #7a5c12;

    /* น้ำเงินกรมท่า / กลางคืน */
    --navy-900:        #05091c;
    --navy-800:        #0a1130;
    --navy-700:        #0e1a45;
    --navy-600:        #14275a;
    --navy-500:        #1d3a7a;
    --navy-400:        #274a9e;

    /* น้ำเงินราชการ (ปุ่ม/ลิงก์) */
    --royal:           #1e40af;
    --royal-light:     #3b82f6;
    --royal-dark:      #1732a0;

    /* พื้นผิว & ตัวอักษร */
    --theme-bg:        #f6f7fb;
    --theme-surface:   #ffffff;
    --theme-ink:       #101a35;
    --theme-muted:     #5b6785;

    /* เส้นขอบ / เงา */
    --theme-line:      rgba(20, 39, 90, .10);
    --theme-line-gold: rgba(212, 175, 55, .45);
    --theme-shadow:        0 4px 20px rgba(10, 17, 48, .06);
    --theme-shadow-hover:  0 18px 44px rgba(10, 17, 48, .14);
    --theme-shadow-gold:   0 12px 30px rgba(212, 175, 55, .34);
}

/* ==========================================================
   2. BASE / BODY
   ========================================================== */
html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(1100px 520px at 88% -8%, rgba(212, 175, 55, .10), transparent 60%),
        radial-gradient(900px 480px at 4% 104%, rgba(30, 64, 175, .10), transparent 62%),
        var(--theme-bg) !important;
    color: var(--theme-ink);
}
/* ==========================================================
   3. NAVBAR (ขาว + ตัวอักษรกรมท่า + เส้นทองใต้เมนู)
   ========================================================== */
#mainNav {
    background: rgba(255, 255, 255, .96) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--theme-line) !important;
    box-shadow: 0 6px 28px rgba(10, 17, 48, .05) !important;
}
#mainNav .navbar-brand img {
    height: 44px !important;
    transition: transform .25s ease;
}
#mainNav .navbar-brand:hover img { transform: scale(1.04); }

#mainNav .nav-link {
    color: var(--navy-600) !important;
    font-weight: 600 !important;
    position: relative;
}
#mainNav .nav-link::after {
    content: "";
    position: absolute;
    left: 1rem; right: 1rem; bottom: .35rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-bright), var(--gold), var(--gold-dark));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
#mainNav .nav-link:hover,
#mainNav .nav-item.active .nav-link { color: var(--navy-900) !important; }
#mainNav .nav-link:hover::after,
#mainNav .nav-item.active .nav-link::after { transform: scaleX(1); }
/* ปุ่มในเมนู: เข้าสู่ระบบ = ขอบทอง, สมัครสมาชิก = น้ำเงินราชการ */
#mainNav .btn-outline-primary {
    color: var(--gold-dark) !important;
    border: 2px solid var(--gold) !important;
    background: linear-gradient(135deg, rgba(255,233,168,.35), rgba(212,175,55,.14)) !important;
    box-shadow: 0 4px 14px rgba(212, 175, 55, .20);
}
#mainNav .btn-outline-primary:hover {
    color: #2b1c05 !important;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-light) 55%, var(--gold-dark)) !important;
    border-color: var(--gold-dark) !important;
    box-shadow: var(--theme-shadow-gold) !important;
}
#mainNav .btn-primary {
    background: linear-gradient(135deg, var(--royal-light) 0%, var(--royal) 60%, var(--royal-dark) 100%) !important;
    box-shadow: 0 6px 18px rgba(30, 64, 175, .30) !important;
}
#mainNav .btn-primary:hover { box-shadow: 0 10px 26px rgba(30, 64, 175, .42) !important; }

/* เมนู dropdown */
#mainNav .dropdown-menu {
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid var(--theme-line) !important;
    box-shadow: 0 20px 50px rgba(10, 17, 48, .16) !important;
}
#mainNav .dropdown-item { color: var(--theme-ink); font-weight: 500; }
#mainNav .dropdown-item:hover {
    background: rgba(212, 175, 55, .10);
    color: var(--navy-900);
}

.navbar-toggler { border-color: rgba(10, 17, 48, .18) !important; }
.navbar-toggler-icon { filter: invert(14%); }

@media (max-width: 991.98px) {
    #mainNav .navbar-collapse {
        background: #fff !important;
        border: 1px solid var(--theme-line) !important;
        box-shadow: 0 20px 50px rgba(10, 17, 48, .16) !important;
    }
    #mainNav .navbar-collapse .nav-link { color: var(--navy-700) !important; }
    #mainNav .nav-link::after { display: none; }
}

/* ==========================================================
   4. ANNOUNCEMENT MARQUEE (แถบน้ำเงินราชการ + เส้นทอง)
   ========================================================== */
.promo-marquee {
    background: linear-gradient(90deg, #0b1a45 0%, var(--royal) 45%, #2563eb 100%) !important;
    color: rgba(255, 255, 255, .96) !important;
    border-bottom: 1px solid rgba(212, 175, 55, .35) !important;
    box-shadow: 0 6px 24px rgba(11, 26, 69, .22);
    position: relative;
}
.promo-marquee::before,
.promo-marquee::after {
    content: "";
    position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.65), transparent);
}
.promo-marquee::before { top: 0; }
.promo-marquee::after  { bottom: 0; }
.promo-marquee .marquee-content {
    font-weight: 600;
    letter-spacing: .2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.promo-marquee .marquee-content b {
    color: var(--gold-bright) !important;
    font-weight: 800;
    text-shadow: 0 0 14px rgba(212, 175, 55, .55);
}
/* ==========================================================
   5. BUTTONS / BADGES ทั่วเว็บ
   ========================================================== */
.btn-primary {
    background: linear-gradient(135deg, var(--royal-light) 0%, var(--royal) 55%, var(--royal-dark) 100%) !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(30, 64, 175, .28) !important;
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(30, 64, 175, .40) !important; }

.btn-outline-primary {
    color: var(--royal) !important;
    border: 2px solid rgba(30, 64, 175, .55) !important;
}
.btn-outline-primary:hover {
    background: var(--royal) !important;
    color: #fff !important;
}

/* ปุ่ม/แบดจ์สีทอง */
.btn-gold,
.badge.badge-gold {
    background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-light) 50%, var(--gold-dark) 100%);
    color: #2b1c05;
    border: none;
    font-weight: 700;
}
.btn-gold:hover { color: #2b1c05; box-shadow: var(--theme-shadow-gold); }

/* ==========================================================
   6. CARDS / การ์ดสินค้า
   ========================================================== */
.prod-card,
.rk-why-card,
.shopee-categories,
.sponsor-box {
    border-color: var(--theme-line) !important;
    box-shadow: var(--theme-shadow) !important;
}

/* ==========================================================
   7. ส่วนหัวข้อ / ลิงก์
   ========================================================== */
.rk-why-head .eyebrow {
    color: var(--navy-700) !important;
    background: linear-gradient(135deg, rgba(255,233,168,.7), rgba(212,175,55,.3)) !important;
    border: 1px solid var(--theme-line-gold);
}
.section-title { color: var(--navy-900); }
.section-title .accent,
.rk-why-head h2 .accent {
    background: linear-gradient(120deg, var(--gold-bright), var(--gold-light) 45%, var(--gold-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
a { color: var(--royal); }
a:hover { color: var(--royal-dark); }

/* ==========================================================
   8. ฟอร์ม
   ========================================================== */
.form-control:focus,
.form-select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .18) !important;
}
.form-control::placeholder { color: #9aa3bd; }

/* ==========================================================
   9. SCROLLBAR
   ========================================================== */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold), var(--navy-500));
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* เส้นทองด้านบนการ์ดตอน hover */
.prod-card:hover,
.rk-why-card:hover {
    border-color: var(--theme-line-gold) !important;
    box-shadow: var(--theme-shadow-hover) !important;
}

/* ==========================================================
   10. องค์ประกอบเสริม (ใช้คลาสเหล่านี้เพิ่มได้ตามต้องการ)
   ========================================================== */
/* แถบคั่นสีทอง */
.gold-divider {
    height: 3px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright), var(--gold));
    box-shadow: 0 2px 12px rgba(212, 175, 55, .45);
    margin: 18px 0;
}

/* ป้ายกำกับสีทองอ่อน */
.badge-gold-soft {
    background: rgba(212, 175, 55, .14);
    border: 1px solid var(--theme-line-gold);
    color: var(--gold-deep);
    font-weight: 700;
}

/* การ์ดพื้นเข้มแบบน้ำเงินกรมท่า + แสงทอง */
.royal-dark {
    background:
        radial-gradient(900px 380px at 82% -12%, rgba(212, 175, 55, .22), transparent 62%),
        linear-gradient(140deg, var(--navy-800) 0%, var(--navy-700) 45%, var(--navy-600) 100%);
    color: #fff;
    border-radius: 24px;
    box-shadow: 0 26px 60px rgba(5, 9, 28, .34);
}
.royal-dark h1,
.royal-dark h2,
.royal-dark h3 { color: #fff; }
.royal-dark .muted { color: rgba(214, 224, 245, .84); }
.royal-dark .gold-text {
    background: linear-gradient(120deg, var(--gold-bright), var(--gold-light) 45%, var(--gold-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* เส้นทองด้านบนการ์ดตอน hover */
.prod-card::after,
.rk-why-card::after {
    background: linear-gradient(90deg, var(--royal), var(--gold)) !important;
}