/* ── Luxury font stack — Cormorant Garamond (editorial serif) + Montserrat (refined sans) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&family=Cinzel:wght@400;600;700&display=swap');

/* ════════════════════════════════════════════════════════════
   TAJELINE — Global Luxury Typography System
   Scale  : Perfect Fourth  ×1.333  @  17px base
   Source : 1stDibs / Sotheby's / JamesEdition pattern (2024-25)
   ════════════════════════════════════════════════════════════

   Step   Multiplier   px (≈)   rem       Role
   ─────  ──────────   ───────  ────────  ──────────────────────
   xs     ×0.694       11.8px   0.694rem  Eyebrow / ALL-CAPS tag
   sm     ×0.800       13.6px   0.800rem  Caption / meta label
   base   ×1.000       17px     1.000rem  Body copy
   md     ×1.125       19.1px   1.125rem  Lead / card title
   lg     ×1.333       22.7px   1.333rem  h3
   xl     ×1.777       30.2px   1.777rem  h2
   2xl    ×2.369       40.3px   2.369rem  h1
   3xl    ×3.157       53.7px   3.157rem  Display / hero

   Letter-spacing rules:
   — Negative (−0.02em) on large display serifs → confidence
   — Wide (0.10–0.20em) on ALL-CAPS small text  → luxury signature
   — Near-zero (0–0.01em) on body copy          → clean reading

   Line-height rules:
   — 1.7  on body           → generous air, premium signal
   — 1.1–1.2 on h1/h2      → editorial tight leading
   — 1.65 on captions       → legible even at 12px
   ════════════════════════════════════════════════════════════ */

:root {
    /* ── Type Scale Tokens ── */
    --tj-size-xs   : 0.694rem;   /* ≈ 11.8px — eyebrow floor     */
    --tj-size-sm   : 0.800rem;   /* ≈ 13.6px — caption / meta     */
    --tj-size-base : 1.000rem;   /*   17px   — body               */
    --tj-size-md   : 1.125rem;   /* ≈ 19.1px — lead / card title  */
    --tj-size-lg   : 1.333rem;   /* ≈ 22.7px — h3                 */
    --tj-size-xl   : 1.777rem;   /* ≈ 30.2px — h2                 */
    --tj-size-2xl  : 2.369rem;   /* ≈ 40.3px — h1                 */
    --tj-size-3xl  : 3.157rem;   /* ≈ 53.7px — display            */

    /* ── Fluid Heading Sizes (clamp: mobile → desktop) ── */
    --tj-h1-fluid  : clamp(1.65rem, 4.5vw, 2.82rem);   /* 28px → 48px */
    --tj-h2-fluid  : clamp(1.33rem, 3.2vw, 2.00rem);   /* 22px → 34px */
    --tj-h3-fluid  : clamp(1.10rem, 2.2vw, 1.50rem);   /* 18px → 25px */

    /* ── Line-heights ── */
    --tj-lh-display : 1.10;
    --tj-lh-heading : 1.20;
    --tj-lh-body    : 1.70;
    --tj-lh-caption : 1.65;

    /* ── Letter-spacing ── */
    --tj-ls-display : -0.02em;   /* tight — large display serif   */
    --tj-ls-heading : -0.01em;   /* slight negative on h2/h3      */
    --tj-ls-body    :  0.005em;  /* near-zero body                */
    --tj-ls-label   :  0.12em;   /* wide — ALL-CAPS CTA/button    */
    --tj-ls-eyebrow :  0.18em;   /* very wide — luxury tag/badge  */
    --tj-ls-nav     :  0.08em;   /* nav links                     */
}

@layer utilities {
   @variants responsive {

      /* Hide scrollbar for Chrome, Safari, and Opera */
      .no-scrollbar::-webkit-scrollbar {
         display: none;
      }


      /* Hide scrollbar for IE, Edge, and Firefox */
      .no-scrollbar {
         -ms-overflow-style: none;
         /* IE and Edge */
         scrollbar-width: none;
         /* Firefox */
      }
   }
}



/* ── Form elements inherit font — browsers don't do this by default ── */
button, input, textarea, select, optgroup {
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* ── Global base: 17px luxury standard ── */
html {
    font-size: 17px;                    /* luxury base > 16px default       */
    -webkit-text-size-adjust: 100%;     /* prevent iOS auto-resize           */
}

body {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: var(--tj-size-base);     /* 1rem = 17px                       */
    line-height: var(--tj-lh-body);     /* 1.70 — generous, premium signal   */
    letter-spacing: var(--tj-ls-body);  /* 0.005em — clean body reading      */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

/* ── Platform-wide heading defaults ─────────────────────────
   Pages can override per-component; these just ensure nothing
   defaults to the browser's ugly unstyled 2em/serif heading.
   ────────────────────────────────────────────────────────── */
h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--tj-h1-fluid);
    line-height: var(--tj-lh-display);
    letter-spacing: var(--tj-ls-display);
    font-weight: 600;
}

h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--tj-h2-fluid);
    line-height: var(--tj-lh-heading);
    letter-spacing: var(--tj-ls-heading);
    font-weight: 600;
}

h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: var(--tj-h3-fluid);
    line-height: var(--tj-lh-heading);
    letter-spacing: var(--tj-ls-heading);
    font-weight: 600;
}

h4, h5, h6 {
    font-family: 'Montserrat', system-ui, sans-serif;
}

h4 {
    font-size: var(--tj-size-md);       /* 19.1px — group labels              */
    line-height: 1.4;
    letter-spacing: 0;
    font-weight: 600;
}

h5, h6 {
    font-size: var(--tj-size-base);
    line-height: 1.5;
    font-weight: 600;
}

/* ── Utility classes (usable anywhere in the platform) ─── */

/* Eyebrow label — e.g. "NEW COLLECTION", category tags */
.tj-eyebrow {
    font-size: var(--tj-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tj-ls-eyebrow);
    line-height: 1.4;
}

/* Caption / meta text */
.tj-caption {
    font-size: var(--tj-size-sm);
    line-height: var(--tj-lh-caption);
    letter-spacing: 0.01em;
}

/* ALL-CAPS button / CTA text */
.tj-btn-label {
    font-size: var(--tj-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tj-ls-label);
}

/* ── Input/form base: min 16px on inputs → prevents iOS zoom ── */
input, select, textarea, button {
    font-family: inherit;
    font-size: max(1rem, 16px);         /* never below 16px on iOS           */
    line-height: 1.5;
}

nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   top: 0;
   z-index: 1000;
   
}

nav a {
   text-decoration: none;
   margin: 0 15px;
   font-size: 0.847rem;                 /* ≈ 14.4px — luxury nav standard    */
   letter-spacing: var(--tj-ls-nav);    /* 0.08em — ALL-CAPS nav signature   */
   line-height: 1.3;
}

nav .sell:hover {
   border-bottom: 2px solid #fff;
}

/* Sidebar Styles */
.sidebar {
   height: 100vh;
   width: 0;
   padding-top: 20px;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #fff;
   color: black;
   overflow-x: hidden;
   transition: 0.5s;
   z-index: 999;
}

.sidebar a {
   display: flex;
   align-items: center;
   justify-items: center;
   padding: 15px;
   text-decoration: none;
   font-size: 18px;
   color: black;
   transition: 0.3s;
}

.sidebar a:hover {
   color: #ffd700;
}

.menu-btn {
   font-size: 20px;
   cursor: pointer;
   margin-right: 15px;
   display: block;
}

@media screen and (max-width: 768px) {
   .menu-btn {
      display: block;
   }

   nav {
      flex-direction: column;
      align-items: flex-start;
   }

   .sidebar {
      padding-top: 15px;
   }
}


.hero {
   position: relative;
   height: 80vh;
   width: 100%;
   background-size: cover;
   background-position: center;
}



.welcome {
   color: #989898;
}


.pic {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   -webkit-animation: fade 20s infinite;
   animation: fade 20s infinite;
}

#pic1 {
   animation-delay: 0s;
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://thacoauto.vn/storage/thacobus/banner-post-bus-giuongnam.jpg');
}

#pic2 {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://hips.hearstapps.com/hmg-prod/amv-prod-cad-assets/images/17q3/685272/mercedes-amg-project-one-photos-and-info-news-car-and-driver-photo-690441-s-original.jpg');
   animation-delay: 5s;
}

#pic3 {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://www.thebikeinsurer.co.uk/static/5fd38b0f90cf3fe8e574b6538c9ac931/Motorsyclefilm_1edf85ecd1.jpg');
   animation-delay: 10s;
}

#pic4 {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://wallpaperbat.com/img/165425-road-bike-wallpaper-top-free-road-bike-background.jpg');
   animation-delay: 20s;
}

@-webkit-keyframes fade {
   0% {
      opacity: 1;
   }

   15% {
      opacity: 1;
   }

   25% {
      opacity: 0;
   }

   90% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes fade {
   0% {
      opacity: 1;
   }

   15% {
      opacity: 1;
   }

   25% {
      opacity: 0;
   }

   90% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.navbar {
   transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   z-index: 1000;
   background-color: #ffffff;
   /* Set a high z-index value to ensure the navbar appears on top */
}

/* Inside the dark hero on index.php — keep it transparent so hero shows through */
.hero .navbar {
   background-color: transparent;
}

/* Once scrolled out of hero, solid white is already applied via .navbar default */
.navbar.tj-scrolled {
   background-color: #ffffff;
   box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}