/* ========================
   CSS Variables
   ======================== */
:root {
  --blue-dark:    #003366;
  --blue-mid:     #0052A3;
  --blue-light:   #0066CC;
  --yellow:       #FFB90F;
  --yellow-light: #FFA500;
  --red:          #E63946;
  --green:        #25D366;
  --text-dark:    #333333;
  --text-mid:     #666666;
  --text-light:   #999999;
  --bg-white:     #FFFFFF;
  --bg-pale:      #F0F4F8;
  --bg-paler:     #F8FAFC;
  --border:       #E0E8F0;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sp-xs:8px; --sp-sm:16px; --sp-md:24px; --sp-lg:40px; --sp-xl:60px;
  --max-w:1200px; --radius:8px;
  --shadow:0 4px 20px rgba(0,51,102,0.10);
  --shadow-hover:0 8px 32px rgba(0,51,102,0.18);
  --transition:0.3s ease;
}

/* ========================
   Reset & Base
   ======================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);font-size:18px;line-height:1.75;color:var(--text-dark);background:var(--bg-white);overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:var(--font);}
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px;}

/* ========================
   Header
   ======================== */
#header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;border-bottom:2px solid var(--blue-dark);box-shadow:0 2px 12px rgba(0,51,102,0.10);transition:box-shadow var(--transition);}
#header.scrolled{box-shadow:0 4px 20px rgba(0,51,102,0.15);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo-link{display:flex;align-items:center;flex-shrink:0;}
.logo-link img{height:44px;width:auto;object-fit:contain;}
.nav-desktop{display:flex;align-items:center;gap:4px;}
.nav-desktop a{display:block;padding:8px 14px;font-size:16px;font-weight:600;color:var(--blue-dark);border-radius:6px;white-space:nowrap;transition:color var(--transition),background var(--transition);}
.nav-desktop a:hover,.nav-desktop a.active{color:var(--blue-light);background:rgba(0,102,204,0.08);}
.nav-cta{display:flex;align-items:center;flex-shrink:0;}
.btn-quote{padding:9px 22px;background:var(--yellow);color:var(--blue-dark);font-size:14px;font-weight:700;border-radius:6px;white-space:nowrap;transition:background var(--transition),transform var(--transition);}
.btn-quote:hover{background:var(--yellow-light);transform:translateY(-1px);}
#menuToggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;gap:5px;border-radius:6px;transition:background var(--transition);}
#menuToggle:hover{background:rgba(0,51,102,0.08);}
#menuToggle span{display:block;width:22px;height:2px;background:var(--blue-dark);border-radius:2px;transition:transform var(--transition),opacity var(--transition);}
#menuToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#menuToggle.open span:nth-child(2){opacity:0;}
#menuToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#navDrawer{display:none;position:fixed;top:72px;left:0;right:0;background:var(--blue-dark);border-bottom:2px solid var(--yellow);padding:var(--sp-md) 20px;z-index:999;transform:translateY(-10px);opacity:0;transition:transform var(--transition),opacity var(--transition);}
#navDrawer.open{transform:translateY(0);opacity:1;}
#navDrawer a{display:block;padding:12px 0;font-size:16px;font-weight:600;color:rgba(255,255,255,0.85);border-bottom:1px solid rgba(255,255,255,0.08);transition:color var(--transition);}
#navDrawer a:last-child{border-bottom:none;}
#navDrawer a:hover{color:var(--yellow);}

/* ========================
   Breadcrumb Bar
   ======================== */
#breadcrumb-bar{background:var(--bg-pale);border-bottom:1px solid var(--border);margin-top:72px;padding:12px 0;}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-mid);flex-wrap:wrap;}
.breadcrumb a{color:var(--text-mid);transition:color var(--transition);}
.breadcrumb a:hover{color:var(--blue-light);}
.breadcrumb i.fa-chevron-right{font-size:10px;color:var(--text-light);}
.breadcrumb span{color:var(--blue-dark);font-weight:600;}

/* ========================
   Video Detail Layout
   ======================== */
#video-detail{padding:var(--sp-lg) 0 var(--sp-xl);}
.detail-layout{display:block;max-width:900px;margin:0 auto;}

/* Content sections */
.content-section{margin-bottom:var(--sp-xl);}

/* ========================
   Video Player
   ======================== */
.video-player-wrap{background:#000;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-hover);}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;}
.video-responsive iframe,
.video-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;}

/* ========================
   Video Meta Row
   ======================== */
.video-meta-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-md);flex-wrap:wrap;padding:var(--sp-md) 0;border-bottom:1px solid var(--border);}
.video-meta-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.video-meta-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Category badge */
.vid-cat-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;font-size:12px;font-weight:800;border-radius:20px;text-transform:uppercase;letter-spacing:0.5px;}
.vid-cat-badge.construction{background:var(--blue-dark);color:#fff;}
.vid-cat-badge.demo{background:var(--yellow);color:var(--blue-dark);}
.vid-cat-badge.comparison{background:var(--red);color:#fff;}
.vid-cat-badge.review{background:var(--green);color:#fff;}

.vid-location-tag,.vid-date,.vid-duration-tag{font-size:14px;color:var(--text-mid);display:inline-flex;align-items:center;gap:5px;}
.vid-location-tag i{color:var(--blue-light);}
.vid-date i,.vid-duration-tag i{color:var(--text-light);}

.vid-model-pill{padding:5px 16px;background:var(--blue-dark);color:#fff;font-size:13px;font-weight:800;border-radius:20px;}

/* Share buttons */
.share-btns{display:flex;align-items:center;gap:8px;}
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:700;border-radius:6px;cursor:pointer;transition:all var(--transition);border:2px solid var(--border);color:var(--text-mid);background:var(--bg-white);}
.share-btn:hover{border-color:var(--blue-dark);color:var(--blue-dark);}
.share-btn.share-wa{padding:7px 12px;border-color:var(--green);color:var(--green);}
.share-btn.share-wa:hover{background:var(--green);color:#fff;}
.share-btn.share-li{padding:7px 12px;border-color:#0A66C2;color:#0A66C2;}
.share-btn.share-li:hover{background:#0A66C2;color:#fff;}

/* ========================
   Video Title Block
   ======================== */
.video-title-block{padding:var(--sp-md) 0;}
.video-title{font-size:26px;font-weight:900;color:var(--blue-dark);line-height:1.25;margin-bottom:var(--sp-sm);}
.video-subtitle{font-size:17px;color:var(--text-mid);line-height:1.75;margin-bottom:var(--sp-md);}
.video-title-image{width:100%;height:auto;max-width:100%;object-fit:cover;display:block;}

/* ========================
   Tab Panels (removed tab navigation)
   ======================== */

.panel-title{font-size:22px;font-weight:800;color:var(--blue-dark);margin-bottom:var(--sp-md);}
.panel-subtitle{font-size:18px;font-weight:700;color:var(--blue-dark);margin:var(--sp-lg) 0 var(--sp-sm);}
.tab-panel p{font-size:16px;color:var(--text-mid);line-height:1.8;margin-bottom:var(--sp-md);}
.tab-panel p strong{color:var(--text-dark);}

.panel-list{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--sp-lg);}
.panel-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--text-mid);line-height:1.6;}
.panel-list li > i{color:var(--blue-light);width:16px;flex-shrink:0;margin-top:3px;}

.panel-highlight{background:var(--bg-pale);border-left:4px solid var(--yellow);border-radius:0 8px 8px 0;padding:var(--sp-md);margin:var(--sp-md) 0;}
.panel-highlight > i{font-size:20px;color:var(--yellow);margin-bottom:8px;display:block;}
.panel-highlight blockquote{font-size:16px;color:var(--text-dark);line-height:1.75;font-style:italic;margin-bottom:8px;}
.panel-highlight cite{font-size:14px;color:var(--text-mid);font-weight:600;}

.panel-info-box{display:flex;gap:var(--sp-md);padding:var(--sp-md);background:rgba(0,51,102,0.05);border:1px solid var(--border);border-radius:var(--radius);margin-top:var(--sp-md);}
.panel-info-box > i{font-size:20px;color:var(--blue-light);flex-shrink:0;margin-top:3px;}
.panel-info-box strong{display:block;font-size:15px;color:var(--blue-dark);margin-bottom:6px;}
.panel-info-box p{font-size:15px;color:var(--text-mid);line-height:1.7;margin:0;}

/* Specs table */
.specs-table-wrap{overflow-x:auto;margin-bottom:var(--sp-lg);}
.specs-table{width:100%;border-collapse:collapse;font-size:15px;}
.specs-table th{background:var(--blue-dark);color:#fff;padding:11px 16px;text-align:left;font-weight:700;font-size:13px;white-space:nowrap;}
.specs-table thead th{background:var(--blue-dark);}
.specs-table tbody th{background:var(--bg-pale);color:var(--blue-dark);font-size:14px;width:25%;}
.specs-table td{padding:10px 16px;border-bottom:1px solid var(--border);color:var(--text-mid);}
.specs-table tr:last-child td,.specs-table tr:last-child th{border-bottom:none;}
.specs-table tr:nth-child(even) td{background:var(--bg-paler);}
.improvement{color:#16a34a;font-weight:800;}

/* Project stats */
.project-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-md);margin-bottom:var(--sp-lg);}
.proj-stat-card{text-align:center;padding:var(--sp-md) var(--sp-sm);background:var(--bg-pale);border-radius:var(--radius);border-top:3px solid var(--yellow);}
.proj-stat-icon{font-size:24px;color:var(--blue-dark);margin-bottom:8px;}
.proj-stat-num{font-size:22px;font-weight:900;color:var(--blue-dark);line-height:1.1;margin-bottom:6px;}
.proj-stat-label{font-size:13px;color:var(--text-mid);line-height:1.4;}

.comparison-table-wrap{overflow-x:auto;margin-bottom:var(--sp-lg);}

/* Tags row */
.video-tags-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:var(--sp-md);border-top:1px solid var(--border);margin-top:var(--sp-md);}
.tags-label{font-size:14px;font-weight:700;color:var(--text-mid);}
.vid-tag{padding:5px 14px;background:var(--bg-pale);color:var(--blue-mid);font-size:13px;font-weight:600;border-radius:20px;border:1px solid var(--border);transition:all var(--transition);}
.vid-tag:hover{background:var(--blue-dark);color:#fff;border-color:var(--blue-dark);}

/* ========================
   Sidebar
   ======================== */
.detail-sidebar{display:flex;flex-direction:column;gap:var(--sp-md);position:sticky;top:96px;}
.sidebar-card{background:var(--bg-white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.sidebar-card-header{display:flex;align-items:center;gap:8px;padding:14px var(--sp-md);background:var(--blue-dark);color:#fff;font-size:14px;font-weight:700;}
.sidebar-card-header i{color:var(--yellow);}

/* Model card */
.model-card-body{padding:var(--sp-md);}
.model-card-body img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;margin-bottom:var(--sp-sm);}
.model-badge{display:inline-block;padding:3px 14px;background:var(--blue-dark);color:#fff;font-size:13px;font-weight:800;border-radius:20px;margin-bottom:8px;}
.model-name{font-size:16px;font-weight:800;color:var(--blue-dark);margin-bottom:var(--sp-sm);}
.model-quick-specs{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--sp-md);}
.model-quick-specs li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-mid);}
.model-quick-specs li i{color:var(--blue-light);width:16px;text-align:center;flex-shrink:0;}
.model-quick-specs strong{color:var(--text-dark);}
.btn-view-model{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:var(--bg-pale);color:var(--blue-dark);font-size:14px;font-weight:700;border-radius:6px;border:2px solid var(--border);transition:all var(--transition);}
.btn-view-model:hover{background:var(--blue-dark);color:#fff;border-color:var(--blue-dark);}

/* Sidebar info list */
.sidebar-info-list{padding:var(--sp-sm) var(--sp-md);}
.sidebar-info-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-sm);padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;}
.sidebar-info-list li:last-child{border-bottom:none;}
.si-label{display:flex;align-items:center;gap:6px;color:var(--text-mid);font-weight:600;flex-shrink:0;}
.si-label i{color:var(--blue-light);width:14px;}
.si-value{font-weight:700;color:var(--blue-dark);text-align:right;}

/* App link card */
.app-link-card{display:flex;gap:var(--sp-sm);padding:var(--sp-md);align-items:center;transition:background var(--transition);}
.app-link-card:hover{background:var(--bg-pale);}
.app-link-card img{width:80px;height:60px;object-fit:cover;border-radius:6px;flex-shrink:0;}
.app-link-body strong{display:block;font-size:14px;font-weight:700;color:var(--blue-dark);margin-bottom:4px;}
.app-link-body span{font-size:13px;color:var(--text-mid);}

/* CTA sidebar card */
.sidebar-cta{padding:var(--sp-lg) var(--sp-md);text-align:center;background:var(--blue-dark);}
.sidebar-cta-icon{font-size:36px;color:var(--yellow);margin-bottom:var(--sp-sm);}
.sidebar-cta h3{font-size:18px;font-weight:800;color:#fff;margin-bottom:8px;}
.sidebar-cta p{font-size:14px;color:rgba(255,255,255,0.72);line-height:1.65;margin-bottom:var(--sp-md);}
.btn-sidebar-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--yellow);color:var(--blue-dark);font-size:14px;font-weight:800;border-radius:6px;margin-bottom:10px;transition:background var(--transition),transform var(--transition);}
.btn-sidebar-cta:hover{background:var(--yellow-light);transform:translateY(-1px);}
.btn-sidebar-wa{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--green);color:#fff;font-size:14px;font-weight:700;border-radius:6px;transition:background var(--transition),transform var(--transition);}
.btn-sidebar-wa:hover{background:#20be5b;transform:translateY(-1px);}

/* ========================
   Related Videos
   ======================== */
#related-videos{padding:var(--sp-xl) 0;background:var(--bg-pale);}
.related-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-lg);}
.related-title{font-size:26px;font-weight:800;color:var(--blue-dark);}
.btn-all-videos{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:var(--blue-dark);color:#fff;font-size:14px;font-weight:700;border-radius:var(--radius);transition:background var(--transition);}
.btn-all-videos:hover{background:var(--blue-light);}

.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-md);}
.related-card{background:var(--bg-white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition);}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}

.related-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;}
.related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.related-card:hover .related-thumb img{transform:scale(1.06);}
.related-thumb-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,20,50,0.60) 0%,transparent 55%);}
.related-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:rgba(255,185,15,0.90);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--blue-dark);transition:transform var(--transition),background var(--transition);}
.related-play:hover{background:var(--yellow);transform:translate(-50%,-50%) scale(1.12);}
.related-play i{margin-left:3px;}
.related-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,20,50,0.80);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;}
.related-cat{position:absolute;top:8px;left:8px;padding:3px 10px;font-size:11px;font-weight:800;border-radius:20px;text-transform:uppercase;}
.related-cat.construction{background:var(--blue-dark);color:#fff;}
.related-cat.demo{background:var(--yellow);color:var(--blue-dark);}
.related-cat.comparison{background:var(--red);color:#fff;}
.related-cat.review{background:var(--green);color:#fff;}

.related-body{padding:var(--sp-sm);}
.related-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:13px;color:var(--text-mid);}
.related-meta i{color:var(--blue-light);}
.related-model{padding:2px 10px;background:var(--blue-dark);color:#fff;font-size:11px;font-weight:800;border-radius:20px;}
.related-card-title{font-size:14px;font-weight:700;color:var(--blue-dark);line-height:1.4;}
.related-card-title a{color:inherit;transition:color var(--transition);}
.related-card-title a:hover{color:var(--blue-light);}

/* ========================
   Footer
   ======================== */
#footer{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 50%,#90caf9 100%);padding:var(--sp-xl) 0 var(--sp-md);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-xl);padding-bottom:var(--sp-xl);border-bottom:1px solid rgba(0,51,102,0.15);}
.footer-brand img{height:40px;width:auto;margin-bottom:var(--sp-md);}
.footer-brand p{font-size:14px;font-weight:700;color:#000;line-height:1.75;margin-bottom:var(--sp-md);}
.footer-social{display:flex;gap:var(--sp-xs);}
.social-btn{width:36px;height:36px;background:rgba(0,51,102,0.10);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--blue-dark);font-size:15px;transition:background var(--transition),color var(--transition);}
.social-btn:hover{background:var(--blue-dark);color:var(--yellow);}
.footer-col h4{font-size:14px;font-weight:700;color:#000;margin-bottom:var(--sp-md);letter-spacing:0.5px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{font-size:14px;font-weight:700;color:#000;display:flex;align-items:center;gap:6px;transition:color var(--transition);}
.footer-col ul li a:hover{color:var(--blue-light);}
.footer-col ul li a i{font-size:12px;width:14px;color:var(--blue-light);}
.footer-contact li{display:flex;gap:10px;font-size:14px;font-weight:700;color:#000;line-height:1.6;margin-bottom:12px;}
.footer-contact li i{color:var(--blue-light);margin-top:3px;flex-shrink:0;width:14px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--sp-md);flex-wrap:wrap;gap:var(--sp-sm);}
.footer-bottom p{font-size:13px;font-weight:700;color:#000;}
.footer-bottom a{color:#000;font-weight:700;transition:color var(--transition);}
.footer-bottom a:hover{color:var(--blue-dark);}

/* Scroll Top */
#scrollTop{position:fixed;bottom:28px;right:28px;width:44px;height:44px;background:var(--yellow);color:var(--blue-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 16px rgba(0,0,0,0.2);cursor:pointer;z-index:500;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity var(--transition),transform var(--transition),background var(--transition);}
#scrollTop.visible{opacity:1;transform:translateY(0);pointer-events:all;}
#scrollTop:hover{background:var(--yellow-light);}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.55s ease,transform 0.55s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ========================
   Responsive — Tablet ≤1024px
   ======================== */
@media(max-width:1024px){
  .related-grid{grid-template-columns:repeat(2,1fr);}
  .project-stats-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-lg);}
  .nav-desktop{display:none;}
  .nav-cta{display:none;}
  #menuToggle{display:flex;}
  #navDrawer{display:block;}
  .video-title-image{border-radius:6px;}
}

/* ========================
   Responsive — Mobile ≤640px
   ======================== */
@media(max-width:640px){
  .container{padding:0 16px;}
  body{font-size:17px;}
  .video-title{font-size:20px;}
  .video-subtitle{font-size:16px;}
  .video-title-image{border-radius:4px;margin-bottom:var(--sp-sm);}
  .video-meta-row{flex-direction:column;align-items:flex-start;}
  .video-player-wrap{border-radius:8px;}
  .video-responsive video{border-radius:0;}
  .tab-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tab-nav::-webkit-scrollbar{display:none;}
  .tab-btn{white-space:nowrap;padding:12px 16px;font-size:14px;}
  .related-grid{grid-template-columns:1fr;}
  .project-stats-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-lg);}
  .footer-bottom{flex-direction:column;text-align:center;}
  .share-btns{flex-wrap:wrap;}
  .related-header{flex-direction:column;align-items:flex-start;gap:var(--sp-sm);}
}