/* ============================================================================
 * Inside Motor & Racing — Common Stylesheet (Compact Header, Brand Tabs & DropShadows)
 * ============================================================================ */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--imr-font-primary) !important;
    background-color: var(--imr-bg-page);
    color: var(--imr-text-main);
    line-height: 1.65;
    overflow-x: hidden;
}

/* ============================================================================
 * Requirement #3 & #4: Compact, Proportional Header & Navbar + Hamburger Menu
 * Total fixed header height is only 88px (34px top bar + 54px main navbar)
 * ============================================================================ */
.section.top-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 34px !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(90deg, #090E1A 0%, #0284C7 55%, #090E1A 100%) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    display: flex !important;
    align-items: center !important;
    pointer-events: auto !important;
}

/* Remove Webflow's ::before / ::after table pseudo-elements inside flex containers so left/right edges align 100% */
.imr-top-header-inner::before,
.imr-top-header-inner::after,
.imr-navbar-inner::before,
.imr-navbar-inner::after {
    display: none !important;
    content: none !important;
}

.imr-top-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.imr-top-contacts {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-right: auto !important;
    gap: 14px;
    font-size: 12px;
    color: #F8FAFC;
}

.imr-top-lang-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
}

.imr-top-line-pill {
    display: inline-flex;
    align-items: center;
    background: #06C755;
    color: #FFFFFF !important;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 99px;
    text-decoration: none !important;
    line-height: 1.4;
}

.imr-top-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #E2E8F0 !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 12px;
}

.imr-top-contact-item:hover {
    color: #FACC15 !important;
}

header,
.section.top-menu {
    position: relative;
    z-index: 9998 !important;
    pointer-events: auto !important;
}

.navbar.w-nav {
    position: fixed !important;
    top: 34px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 54px !important;
    z-index: 9998 !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(13, 19, 33, 0.18) !important;
    padding: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: auto !important;
}

.imr-navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
}

.imr-brand-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    text-decoration: none !important;
    padding: 0 !important;
    max-height: none !important;
    max-width: none !important;
    
    position: absolute;
    width: 200px;
    height: 149px;
}

.imr-brand-logo {
    /* height: 68px !important; */
    /* max-height: 68px !important; */
    width: auto !important;
    min-width: 190px !important;
    /* max-width: none !important; */
    object-fit: contain;
}

@media (max-width: 639px) {
    .imr-brand-logo {
        height: 52px !important;
        max-height: 52px !important;
        min-width: 145px !important;
    }
}

.imr-brand-title {
    font-size: 15px;
    font-weight: 800;
    color: #0D1321;
    letter-spacing: 0.3px;
}

.nav-menu.w-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    gap: 6px !important;
    position: static !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.nav-link.w-nav-link {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    align-items: center !important;
    padding: 7px 16px !important;
    font-family: var(--imr-font-primary) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0D1321 !important;
    text-decoration: none !important;
    border-radius: 8px;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
}

.nav-link.w-nav-link:hover {
    background-color: rgba(225, 29, 72, 0.08) !important;
    color: #E11D48 !important;
    transform: translateY(-1px);
}

.nav-link.w-nav-link.w--current {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%) !important;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.32);
}

/* Mobile Hamburger Toggle Button */
.imr-hamburger-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: #0D1321;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

/* Compact Hero Banner (Requirement #3: Neat, proportional, zero wasted space) */
.imr-compact-hero {
    padding: 98px 0 14px;
}

.imr-hero-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #090E1A 0%, #161F33 100%);
    box-shadow: var(--imr-drop-shadow-strong);
    border: 1px solid rgba(255, 255, 255, 0.14);
    width: 100%;
    aspect-ratio: 940 / 420;
    height: auto;
    max-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    
    /* ใช้ linear-gradient ไล่จากล่างขึ้นบน (to top) */
    background-image: linear-gradient(to top, 
    #001f3f 0px,         /* สีน้ำเงินเข้มเริ่มจากขอบล่างสุด */
    #001f3f 35px,        /* คงความเข้มไว้จนถึงระยะ 35px (เพื่อให้รอยต่อจบที่ 50px พอดี) */
    #ffffff 80px,        /* รอยต่อเฟดเป็นสีขาวเสร็จสิ้นที่ระยะ 50px (ช่วงรอยต่อกว้าง 15px) */
    #ffffff 100%         /* พื้นที่ด้านบนที่เหลือทั้งหมดเป็นสีขาว */
  );
  
  /* ป้องกันไม่ให้ Background ไล่สีซ้ำซ้อน */
  background-repeat: no-repeat; 
}

.imr-hero-banner-img {
    height: 100% !important;
    max-height: 420px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
    margin: 0 auto;
}

.imr-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 24px;
    background: linear-gradient(180deg, rgba(9, 14, 26, 0) 0%, rgba(9, 14, 26, 0.86) 100%);
    display: flex;
    align-items: flex-end;
}

.imr-hero-tagline {
    font-size: 19px;
    line-height: 1.4;
    margin: 0;
}

/* ============================================================================
 * Requirement #1: 4-Brand Official Website Showcase Tabs (Before News Section)
 * ============================================================================ */
.imr-brand-showcase-section {
    padding: 12px 0 18px;
}

.imr-brand-showcase-box {
    background: #0D1321;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--imr-drop-shadow-strong);
}

.imr-brand-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(90deg, #0D1321 0%, #161F33 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.imr-brand-tabs-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.imr-brand-spark {
    font-size: 24px;
}

.imr-brand-heading {
    font-size: 14px;
    font-weight: 800;
    color: #FACC15;
    letter-spacing: 0.6px;
}

.imr-brand-sub {
    font-size: 12px;
    color: #CBD5E1;
    margin-top: 2px;
}

.imr-brand-tabs-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.imr-brand-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #E2E8F0;
    font-size: 13.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.imr-brand-tab-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.imr-brand-tab-btn.active {
    background: #FFFFFF;
    color: #0D1321;
    border-color: #FACC15;
    box-shadow: 0 0 0 2px #FACC15, 0 8px 20px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}

.imr-brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.imr-brand-iframe-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 20px;
    background: #1E293B;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12.5px;
    color: #CBD5E1;
}

.imr-brand-url-pill strong {
    color: #38BDF8;
    margin-left: 6px;
}

.imr-brand-open-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 8px;
    background: #FACC15;
    color: #0D1321 !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
}

.imr-brand-iframe-wrap {
    width: 100%;
    height: 520px;
    background: #FFFFFF;
    position: relative;
}

.imr-brand-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Breadcrumb Bar (Requirement #4) */
.imr-breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: #FFFFFF;
    padding: 12px 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: var(--imr-drop-shadow);
    border: 1px solid #E2E8F0;
}

/* Signature DropShadow Philosophy (Requirement #6) */
.optionDropShadow {
    /*filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));*/
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.8));
    transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}

.optionSoftShadow {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.20));
}

.optionGlowWhite {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.optionColorYellow {
    color: #FFE600 !important;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95);
    font-weight: 700;
}

/* Constrained-Height Landscape Thumbnail System (Requirement #6) */
.imr-thumb-frame {
    position: relative;
    width: 100%;
    height: 220px;
    aspect-ratio: 16 / 10;
    background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--imr-drop-shadow);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.imr-thumb-frame img,
.imr-thumb-frame .article-thumb {
    height: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    min-width: 100%;
    max-width: none !important;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0 auto;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.imr-news-card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 24px;
    text-decoration: none !important;
    color: var(--imr-text-main);
    box-shadow: var(--imr-drop-shadow);
    border: 1px solid rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: calc(100% - 24px);
    position: relative;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.imr-news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--imr-drop-shadow-strong);
    border-color: rgba(225, 29, 72, 0.45);
}

.imr-news-card:hover .imr-thumb-frame img {
    transform: scale(1.05);
}

.imr-news-card.is-current-reading {
    border: 2px solid var(--imr-accent-red);
    background: linear-gradient(180deg, #FFF1F2 0%, #FFFFFF 100%);
    box-shadow: 0 14px 32px rgba(225, 29, 72, 0.28);
}

.imr-reading-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    background: var(--imr-accent-red);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.4px;
}

.imr-news-num-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 4;
    background: rgba(13, 19, 33, 0.82);
    color: #FACC15;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.imr-card-body {
    padding: 14px 6px 6px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.imr-card-title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.48;
    color: #0F172A;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 68px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));
}

.imr-card-meta {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px dashed #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
}

.imr-card-readmore {
    color: var(--imr-accent-red);
    font-weight: 700;
}

/* Section Headers */
.imr-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(15, 23, 42, 0.1);
}

.imr-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.imr-accent-bar {
    width: 6px;
    height: 32px;
    background: linear-gradient(180deg, #E11D48 0%, #9F1239 100%);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.45);
}

.imr-section-title {
    font-size: 23px;
    font-weight: 800;
    color: #0D1321;
    margin: 0;
    letter-spacing: -0.3px;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16));
}

/* Scoop / Knowledge Cards */
.imr-scoop-section {
    background: linear-gradient(180deg, #0D1321 0%, #161F33 100%);
    color: #FFFFFF;
    padding: 52px 0;
    margin: 32px 0;
    box-shadow: inset 0 10px 24px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.25);
    scroll-margin-top: 95px;
}

.imr-scoop-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none !important;
    color: #FFFFFF;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: calc(100% - 24px);
    margin-bottom: 24px;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.imr-scoop-card:hover {
    transform: translateY(-5px);
    border-color: #FACC15;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
}

.imr-scoop-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.imr-scoop-cat {
    display: inline-block;
    align-self: flex-start;
    background: rgba(250, 204, 21, 0.18);
    color: #FACC15;
    border: 1px solid rgba(250, 204, 21, 0.45);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.imr-scoop-title {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.45;
    margin: 0 0 10px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.imr-scoop-excerpt {
    font-size: 13.5px;
    color: #CBD5E1;
    line-height: 1.6;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.imr-scoop-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #94A3B8;
}

/* Pagination Bar */
.imr-pagination-wrap {
    margin: 24px 0 32px;
    padding: 16px 20px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: var(--imr-drop-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    position: relative;
    z-index: 10;
}

.imr-pagination-info {
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}

.imr-pagination-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.imr-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    color: #0F172A !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.imr-page-btn:hover {
    background: #0F172A !important;
    color: #FFFFFF !important;
    border-color: #0F172A;
    transform: translateY(-2px);
}

.imr-page-btn.active {
    background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%) !important;
    color: #FFFFFF !important;
    border-color: #BE123C;
    box-shadow: 0 6px 14px rgba(225, 29, 72, 0.38);
}

/* Search Bar */
.imr-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    background: #FFFFFF;
    padding: 12px;
    border-radius: 12px;
    box-shadow: var(--imr-drop-shadow);
    position: relative;
    z-index: 10;
}

.imr-search-input {
    flex: 1;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14.5px;
    font-family: inherit;
}

.imr-search-btn {
    background: linear-gradient(135deg, #0D1321 0%, #1E293B 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Social Share Bar */
.imr-share-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    margin: 24px 0;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: var(--imr-drop-shadow);
    border-left: 5px solid var(--imr-accent-red);
}

.imr-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF !important;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.imr-share-btn:hover {
    transform: translateY(-2px);
    opacity: 0.94;
}

.imr-share-fb { background: #1877F2; }
.imr-share-line { background: #06C755; }
.imr-share-x { background: #0F172A; }
.imr-share-copy { background: #475569; }

/* Language Switcher Pills in Header */
.imr-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(13, 19, 33, 0.85);
    padding: 2px 6px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.imr-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    color: #E2E8F0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.imr-lang-btn.active,
.imr-lang-btn.w--current {
    background: #E11D48;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.5);
}

.imr-mobile-lang-caret {
    display: none;
    font-size: 10px;
    margin-left: 2px;
    opacity: 0.9;
}

.imr-mobile-lang-popup {
    display: none;
}

#contact {
    scroll-margin-top: 95px;
}