/* style/home_style.css - Custom Stylesheet สำหรับหน้าหลัก arxim ค้าส่ง และหน้า 20 ย่านการค้าส่ง Partner */

body {
font-family: 'Prompt', sans-serif;
background-color: #f1f5f9;
color: #0f172a;
}

/* Custom Scrollbar Hiding for Ribbon Steps & 20 Partner Hubs Slider */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

/* Interlocking Chevron / Arrow Step Buttons - Zero vertical gap */
.step-arrow {
position: relative;
clip-path: polygon(0% 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%, 12px 50%);
padding-left: 20px;
padding-right: 18px;
margin-right: -6px;
transition: all 0.18s ease;
}

.step-arrow:first-child {
clip-path: polygon(0% 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%);
padding-left: 14px;
}

/* Maritime Logistics Port Background Header */
.hero-port-bg {
background: linear-gradient(105deg, rgba(7, 33, 70, 0.94) 0%, rgba(11, 59, 117, 0.88) 55%, rgba(2, 132, 199, 0.82) 100%),
url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
}

/* Member Logged-In Alpha 50% Translucent Card */
.member-alpha-50 {
background-color: rgba(7, 33, 70, 0.50) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

/* Partner Hub Card Hover & Smooth Slider Effect */
.partner-hub-card {
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.partner-hub-card:hover {
box-shadow: 0 10px 20px -5px rgba(245, 158, 11, 0.35);
}

/* Smooth Modal & Expand Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.animate-fadeIn {
animation: fadeIn 0.2s ease-out forwards;
}

/* กรอบสีเหลืองทองเด่นๆ สำหรับการ์ดรายการด้านบนสุด */
.top-row-yellow-highlight {
border: 2.5px solid #f59e0b !important;
box-shadow: 0 6px 18px -4px rgba(245, 158, 11, 0.45);
}

/* กรอบกระพริบเด่นๆ สำหรับการ์ดรายการดีล (Group Deal) */
@keyframes dealBorderBlink {
0%, 100% {
border-color: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 6px 16px -3px rgba(225, 29, 72, 0.35);
}
50% {
border-color: #e11d48;
box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.55), 0 8px 20px -3px rgba(245, 158, 11, 0.5);
}
}

.deal-card-blink {
border-width: 2.5px !important;
border-style: solid !important;
animation: dealBorderBlink 1.3s infinite ease-in-out;
}

/* ข้อ 3: กราฟิกปลายริบบิ้นแฉก (Classic V-Notch Deal Ribbon) สำหรับกล่องเวลานับถอยหลังในการ์ดดีล */
.deal-ribbon-notch {
position: relative;
background: linear-gradient(90deg, #dc2626 0%, #e11d48 55%, #f59e0b 100%);
clip-path: polygon(
0% 0%,
100% 0%,
calc(100% - 11px) 50%,
100% 100%,
0% 100%,
11px 50%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px rgba(225, 29, 72, 0.35);
}

/* ป้ายกำกับ DEAL เล็กด้านซ้ายของริบบิ้นแฉก */
.deal-ribbon-tag {
background: #fef08a;
color: #881337;
clip-path: polygon(0% 0%, calc(100% - 7px) 0%, 100% 50%, calc(100% - 7px) 100%, 0% 100%);
padding-left: 8px;
padding-right: 11px;
}