/* ============================================================
   morning-theme.css — CSS dùng chung cho CẢ 13 trang của site.
   Load thứ tư, SAU normalize.css + components.css + tblogs.css của khung Webflow.
   Đổi nhận diện cam/teal của khung sang token Morning (DESIGN.md B1):
   navy #001B4D + gold #E8A237, sample từ brand_assets/LOGO.jpg.
   Khối cuối file là đợt tối ưu responsive 2026-08-13, phải luôn nằm cuối.
   ============================================================ */

:root{
  --primary-color: #E8A237;      /* cam TBLog -> gold Morning */
  --secondary-color: #001B4D;    /* teal TBLog -> navy Morning */
  --title-color: #0B1B36;
  --content-color: #45526B;
  --background-color: #FAF6EE;   /* nền/chữ trên nút */
  /* token tên-hex di sản TransitFlow, re-point sang hệ Morning */
  --015bcb: #123B7A;
  --024497: #001B4D;
  --911318: #C9861F;
  --e6242c: #E8A237;
  --ec5157: #F5BE63;
  --011732: #001236;
  --color: #C9861F;
}

/* Teal phụ #0a4d68 không khai token trong tblogs.css - đè các khối chính dùng nó */
.header-section, .footer-section, .footer-shade-bg{ background-color: #001B4D !important; }
.div-block-2{ background-color: #001236 !important; }

/* ---- Header gọn: 1 strip mỏng + 1 thanh nav trắng chứa LOGO THẬT ---- */
.div-block-2{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:16px; padding:7px 5% !important; min-height:0 !important; height:auto !important; }
.navigation-headder{ margin:0 !important; padding:0 !important; }
.text-block-3{ padding:0 !important; }
.text-block-3 div{ font-size:0.8125rem; }
.div-block-3{ position:static !important; margin:0 !important; padding:0 !important; }
.dropdown-2 .link-flag, .dropdown-2 .link{ font-size:0.8125rem; }
.strip-right{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:20px; width:auto !important; }
.strip-right .w-dropdown{ margin:0 !important; }
.strip-contact{ color:#C7D0DE; font-size:0.8125rem; text-decoration:none; white-space:nowrap; }
.strip-contact:hover{ color:#FFFFFF; }
@media (max-width:1100px){ .strip-contact{ display:none; } }
.navigation-bar{ background-color:#FFFFFF !important; border-bottom:1px solid #E3DED2; }
.nav-bar-container{ display:flex; align-items:center; }
.nav-logo{ margin-right:auto; display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img{ height:60px; width:auto; display:block; }
.nav-logo-text{ display:flex; flex-direction:column; line-height:1.05; }
.nav-logo-text b{ font-family:Rubik,sans-serif; font-weight:700; font-size:1.25rem; color:#001B4D; letter-spacing:.02em; } /* typography.title */
.nav-logo-text span{ font-family:Rubik,sans-serif; font-weight:600; font-size:0.8125rem; color:#C9861F; letter-spacing:.26em; } /* typography.label */
.navigation-menu{ display:flex; align-items:center; }
.navigation-link{ color:#0B1B36 !important; }
.navigation-link:hover{ color:#C9861F !important; }
.nav-menu-line{ background-color:#E3DED2 !important; }
.nav-dropdown-list, .nav-dropdown-list.w--open{ background-color:#FFFFFF !important; box-shadow:0 10px 28px rgba(0,27,77,.12); }
.nav-dropdown-link{ color:#0B1B36 !important; }
.nav-dropdown-link:hover{ background-color:#FAF6EE !important; color:#001B4D !important; }
.navigation-button-wrap{ display:flex; align-items:center; } /* màu/shape nút: xem "HỆ BUTTON THỐNG NHẤT" bên dưới */
.w-nav-button, .w-icon-nav-menu{ color:#001B4D !important; }
@media (max-width:991px){
  .w-nav-overlay .navigation-menu{ background:#FFFFFF; }
  .nav-logo img{ height:48px; }
}

/* ---- Lưới 8 dịch vụ: ảnh chính, hover hiện mô tả ---- */
.service-section .w-container{ max-width:1200px; }
/* Heading dịch vụ 1 hàng riêng, lưới card xuống dưới full-width */
.service-whole-wrap{ display:block !important; grid-template-columns:none !important; }
.service-title-wrap{ max-width:640px; margin-bottom:8px; }
.svc8-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:40px; }
@media (max-width:991px){ .svc8-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svc8-grid{ grid-template-columns:1fr; } }
.svc8-card{ position:relative; display:block; border-radius:14px; overflow:hidden; background:#001B4D; text-decoration:none; }
.svc8-card > img{ display:block; width:100%; aspect-ratio:1/1.05; object-fit:cover; }
.svc8-plate{ position:absolute; left:0; bottom:0; z-index:2; display:flex; align-items:center; gap:8px; background:#FFFFFF; border-radius:0 14px 0 14px; padding:10px 12px; width:calc(100% - 24px); }
.svc8-icon{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:6px; background:#E8A237; color:#001B4D; flex:none; } /* rounded.chip */
.svc8-icon svg{ width:17px; height:17px; }
.svc8-name{ font-family:Rubik,sans-serif; font-weight:600; font-size:0.9375rem; line-height:1.2; color:#0B1B36; flex:1; } /* typography.frame-title/frame-body trong DESIGN.md (hệ chữ khung TBLog sau pivot) */
.svc8-arrow{ color:#C9861F; flex:none; display:inline-flex; }
.svc8-arrow svg{ width:18px; height:18px; transition:transform .18s ease; }
.svc8-desc{ position:absolute; inset:0; z-index:1; background:rgba(0,18,54,.84); opacity:0; transition:opacity .22s ease-out; padding:24px 24px 84px; display:flex; align-items:flex-end; }
.svc8-desc p{ color:#FFFFFF; font-size:0.9375rem; line-height:1.6; margin:0; } /* typography.frame-body */
.svc8-card:hover .svc8-desc, .svc8-card:focus-visible .svc8-desc{ opacity:1; }
.svc8-card:hover .svc8-arrow svg{ transform:translateX(3px); }
.svc8-card:focus-visible{ outline:2px solid #E8A237; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .svc8-desc, .svc8-arrow svg{ transition:none !important; } }

/* Footer: logo thật trên nền navy đặt trong ô trắng */
.footer-real-logo{ background:#FFFFFF; border-radius:10px; padding:8px; height:96px; width:auto; margin-bottom:20px; }

/* Footer 4 cột canh đỉnh, tiêu đề nằm trên cùng một đường.
   Template để .footer-title-wrap padding 30px nhưng cột subscribe padding 0, cộng
   .footer-link-block margin-top 45px -> các cột lệch nhau. Đồng bộ lại. */
/* Template khai .footer-grid 3 cột, còn các id w-node-* lại đặt grid-area span 2
   -> với 4 cột nội dung thì 2 cột giữa bị đẩy khỏi lưới và biến mất. Hủy span, tự khai 4 cột. */
.footer-grid{ display:grid !important; grid-template-columns:1.5fr 1fr 0.9fr 1.2fr !important; gap:40px !important; margin-top:0 !important; align-items:start; }
.footer-grid > *{ grid-area:auto !important; }
@media (max-width:991px){ .footer-grid{ grid-template-columns:1fr 1fr !important; } }
@media (max-width:600px){ .footer-grid{ grid-template-columns:1fr !important; } }
.footer-title-wrap, .footer-title-wrap.subscribe-title{ padding-top:0 !important; padding-bottom:0 !important; }
.footer-link-block{ margin-top:20px !important; }
.footer-form-wrapper .footer-text{ margin-top:20px; }

/* Lưới dịch vụ: chỉ hiện 6 card, 2 card cuối mở bằng nút (JS chỉ là enhancement,
   không có JS thì cả 8 card vẫn hiện đủ) */
.svc8-grid.svc8-collapsed .svc8-card:nth-child(n+7){ display:none; }
.svc8-more{ display:none; justify-content:center; margin-top:32px; }
.svc8-more.is-on{ display:flex; }

/* Khối "Vì sao chọn Morning": collage template vỡ tỉ lệ sau khi thay ảnh -> 1 ảnh chính full cột */
.about-image-wrap > img{ width:100%; height:auto; border-radius:14px; object-fit:cover; }
.about-image{ display:none; }

/* Counter trong about-section: chữ trắng của template trên nền trắng -> navy/muted */
.about-section .counter-number{ color:#001B4D !important; }
.about-section .counter-text{ color:#45526B !important; }

/* Dải cam ffca59->e8943a -> dải gold Morning */
.yellow-gradient{ background-image: linear-gradient(180deg, #F5BE63, #E8A237) !important; }

/* ============================================================
   HỆ BUTTON THỐNG NHẤT (Daniel chốt 2026-08-12): lấy nút gold ở hero làm chuẩn
   cho toàn trang. Template gốc có 4 class rời rạc (yellow-overlay / primary /
   dark-overlay / navigation), vài chỗ để chữ kem trên nền vàng (contrast fail).
   Tất cả quy về: nền gold, chữ navy 600, radius 10px (rounded.field), hover gold-deep.
   Biến thể navy DUY NHẤT cho nút nằm trên band gold (gold trên gold sẽ chìm).
   ============================================================ */
.yellow-overlay-button,
.primary-button,
.navigation-button,
.dark-overlay-button{
  position:relative; z-index:1; overflow:hidden !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:180px; padding:16px 32px !important;
  border:0; border-radius:10px !important;
  background-image:none !important; background-color:#E8A237 !important;
  color:#001B4D !important;
  font-family:Rubik,sans-serif !important; font-size:1rem !important; font-weight:600 !important; line-height:1.2;
  text-align:center; text-decoration:none;
  transition:background-color .18s ease, color .18s ease, transform .12s ease;
}
/* Chữ trong nút: luôn navy (kể cả khi IX2 đổi màu chữ lúc hover - !important thắng inline style).
   Khối trắng .yellow-button-hover trượt vào khi hover => navy trên trắng, đọc tốt cả 2 trạng thái. */
.yellow-overlay-button .text-block{ position:relative; color:#001B4D !important; font-family:Rubik,sans-serif !important; font-weight:600; font-size:1rem; }
.dark-overlay-button div:not(.dark-button-hover){ position:relative; font-family:Rubik,sans-serif; font-weight:600; }

.yellow-overlay-button:active, .primary-button:active, .navigation-button:active, .dark-overlay-button:active{ transform:translateY(1px); }
.yellow-overlay-button:focus-visible, .primary-button:focus-visible, .navigation-button:focus-visible, .dark-overlay-button:focus-visible{
  outline:2px solid #001B4D; outline-offset:2px;
}
/* Nút trên band gold giữ nguyên hiệu ứng gốc của template (khối navy đậm trượt vào) */
.work-section .dark-overlay-button{ background-color:#001B4D !important; color:#FFFFFF !important; }
.work-section .dark-overlay-button:focus-visible{ outline-color:#FFFFFF; }
.work-section .dark-button-hover{ background-color:#000C24 !important; }
/* Nút trong thanh nav: cùng hệ + cùng hiệu ứng, chỉ gọn hơn cho vừa chiều cao header */
.nav-cta{ min-width:0 !important; padding:13px 24px !important; }
.nav-cta .text-block{ font-size:0.9375rem; }

/* Hero: thay ảnh tàu TBLog bằng ảnh cảng bình minh Morning (Pexels/Felix Rottmann, credit trong brand_assets/README.md) */
.banner-section{
  /* Ảnh hero rất sáng ở nửa trái (mặt nước hắt nắng) nên chữ trắng và chữ gold chìm.
     Phủ navy chuyển sắc: đậm ở mép trái nơi đặt chữ, nhạt dần sang phải để vẫn thấy cảng. */
  background-image: linear-gradient(100deg, rgba(0,18,54,.88) 0%, rgba(0,18,54,.74) 34%, rgba(0,18,54,.34) 62%, rgba(0,18,54,.14) 100%), url('../../brand_assets/hero-port-dawn.web.webp') !important;
  background-color: #001236 !important;
  background-position: 50% 30%;
  background-attachment: scroll; /* bỏ fixed: mượt hơn trên mobile */
}

/* Band slogan: ảnh cảng bình minh Morning + phủ navy */
.image-section{
  background-image: linear-gradient(rgba(0,18,54,.55), rgba(0,18,54,.55)), url('../../brand_assets/slogan-port.web.webp') !important;
  background-position: 50% 45%;
  background-size: cover;
  background-color: #001B4D;
}

/* Stats tự chủ trong about-section: hàng 4 số căn giữa, vạch gold dưới số */
.mstat-row{ display:flex; justify-content:center; text-align:center; flex-wrap:wrap; gap:24px 0; margin:64px 0 16px; }
.mstat{ flex:1 1 0; min-width:170px; max-width:300px; padding:0 28px; border-right:1px solid #E3DED2; }
.mstat:last-child{ border-right:0; }
.mstat strong{ display:block; font-family:Rubik,sans-serif; font-weight:600; font-size:3.25rem; line-height:1.1; color:#001B4D; font-variant-numeric:tabular-nums; } /* typography.stat-lg trong DESIGN.md (Daniel yêu cầu số to, 2026-08-12) */
.mstat strong::after{ content:''; display:block; width:36px; height:4px; background:#E8A237; margin:10px auto 8px; }
.mstat span{ display:block; font-size:0.9375rem; color:#45526B; }
/* .mstat ở khổ nhỏ: xem khối TỐI ƯU RESPONSIVE cuối file (một nguồn sự thật) */

/* Section khách hàng và đối tác: logo thật do khách cung cấp, chia dải theo loại hình.
   Lưới dùng flex-wrap chứ không phải grid vì mỗi dải có số logo lẻ (11, 8, 6, 7)
   và hàng cuối cần tự căn giữa thay vì dồn về trái. */
.mpartners-section{ padding:90px 0; background:#FAF6EE; }
.mpartners-band{ margin-top:40px; }
.mpartners-label{ font-family:Rubik,sans-serif; font-size:0.9375rem; font-weight:600; color:#45526B; text-align:center; margin:0 0 18px; }
/* template đặt ul{flex-direction:column; padding-left:40px} -> phải ghi đè như .mchips-list */
.mpartners-grid{ list-style:none; display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
                 justify-content:center; gap:16px; margin:0 !important; padding:0 !important; }
.mpartners-grid li{ flex:0 1 calc(16.666% - 14px); min-width:132px; display:flex; align-items:center; justify-content:center;
                    background:#FFFFFF; border:1px solid #E3DED2; border-radius:14px; height:96px; padding:12px 16px;
                    transition:border-color .18s ease, box-shadow .18s ease; }
.mpartners-grid li:hover{ border-color:#C9861F; box-shadow:0 6px 18px rgba(0,27,77,.08); }
/* Logo nằm giữa canvas 400x350 nên phải cho ảnh cao hẳn, giới hạn 44px thì logo thật chỉ còn ~20px */
.mpartners-grid img{ width:100%; height:70px; object-fit:contain; display:block; }
.mpartners-more{ display:flex; justify-content:center; margin-top:36px; }

/* ---- Carousel logo 2 hàng (Daniel chốt 2026-08-13 theo _reference/logo-carousel.png) ----
   Lưới tĩnh 25 ô làm section dài gần 900px; carousel gói cùng số logo vào 2 hàng ~200px
   và vẫn cho thấy hết. Danh sách được nhân đôi trong HTML nên vòng lặp liền mạch;
   chỉ animate transform, hover thì dừng, ai tắt hiệu ứng thì thành dải cuộn tay. */
.mpartners-lead{ max-width:640px; margin:12px auto 0; }
.mlogos{ margin-top:36px; }
.mlogos-viewport{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #0B1B36 7%, #0B1B36 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #0B1B36 7%, #0B1B36 93%, transparent); }
.mlogos-viewport + .mlogos-viewport{ margin-top:16px; }
.mlogos-track{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  list-style:none; width:max-content; gap:16px; margin:0 !important; padding:0 !important;
  animation:mlogos-drift 64s linear infinite; will-change:transform; }
.mlogos-track--rtl{ animation-name:mlogos-drift-rtl; animation-duration:58s; }
@keyframes mlogos-drift{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 8px)); } }
@keyframes mlogos-drift-rtl{ from{ transform:translateX(calc(-50% - 8px)); } to{ transform:translateX(0); } }
.mlogos:hover .mlogos-track, .mlogos:focus-within .mlogos-track{ animation-play-state:paused; }
/* hàng ít logo được nhân ba nên quãng lặp là 1/3 chứ không phải 1/2 */
.mlogos-track[style*="--reps:3"]{ animation-name:mlogos-drift3; }
.mlogos-track--rtl[style*="--reps:3"]{ animation-name:mlogos-drift3-rtl; }
@keyframes mlogos-drift3{ from{ transform:translateX(0); } to{ transform:translateX(calc(-33.3333% - 5.33px)); } }
@keyframes mlogos-drift3-rtl{ from{ transform:translateX(calc(-33.3333% - 5.33px)); } to{ transform:translateX(0); } }
/* biến thể có nhãn nhóm: mỗi hàng kèm một dòng chữ nhỏ phía trên */
.mlogos--labelled .mpartners-label{ margin:26px 0 12px; }
.mlogos--labelled .mpartners-label:first-child{ margin-top:0; }
.mlogos--labelled .mlogos-viewport + .mlogos-viewport .mlogos-track{ margin-left:0 !important; }
/* hàng dưới lệch nửa ô cho so le, giống bản tham chiếu */
.mlogos-viewport + .mlogos-viewport .mlogos-track{ margin-left:-94px !important; }
.mlogo{ position:relative; flex:none; width:172px; height:92px; display:flex; align-items:center; justify-content:center;
  background:#FFFFFF; border:1px solid #E3DED2; border-radius:10px; padding:12px 18px; /* rounded.field */
  transition:border-color .18s ease, box-shadow .18s ease; }
.mlogo::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px;
  background:#E8A237; border-radius:10px 10px 0 0; opacity:0; transition:opacity .18s ease; }
.mlogo:hover{ border-color:#C9861F; box-shadow:0 8px 22px rgba(0,27,77,.09); }
.mlogo:hover::before{ opacity:1; }
.mlogo img{ width:100%; height:64px; object-fit:contain; display:block; }
@media (max-width:767px){
  .mlogo{ width:140px; height:80px; padding:10px 14px; }
  .mlogos-viewport + .mlogos-viewport .mlogos-track{ margin-left:-76px !important; }
  .mlogo img{ height:52px; }
  .mlogos-track{ gap:12px; animation-duration:46s; }
  .mlogos-track--rtl{ animation-duration:42s; }
  @keyframes mlogos-drift{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 6px)); } }
  @keyframes mlogos-drift-rtl{ from{ transform:translateX(calc(-50% - 6px)); } to{ transform:translateX(0); } }
}
@media (prefers-reduced-motion: reduce){
  /* Tắt hiệu ứng thì thành dải cuộn tay: bỏ chạy, bỏ lệch hàng, và ẩn các bản lặp
     (bản lặp chỉ tồn tại để vòng chạy liền mạch, cuộn tay mà lặp thì đọc như lỗi) */
  .mlogos-track{ animation:none; }
  .mlogos-track > [aria-hidden="true"]{ display:none; }
  .mlogos-viewport + .mlogos-viewport .mlogos-track{ margin-left:0 !important; }
  .mlogos-viewport{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mlogos-viewport{ -webkit-mask-image:none; mask-image:none; }
}
.mpartners-note{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:44px;
                 padding-top:28px; border-top:1px solid #E3DED2; }
.mpartners-note img{ width:96px; height:64px; object-fit:contain; flex:none; }
.mpartners-note p{ margin:0; color:#45526B; font-size:0.9375rem; max-width:420px; }
.partner-wordmark{ font-family:Rubik,sans-serif; font-weight:600; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:#45526B; }
@media (max-width:991px){ .mpartners-grid li{ flex:0 1 calc(25% - 12px); } }
@media (max-width:767px){ .mpartners-grid li{ flex:0 1 calc(33.333% - 11px); min-width:0; height:80px; } .mpartners-grid img{ height:56px; } }
@media (max-width:520px){ .mpartners-grid li{ flex:0 1 calc(50% - 6px); height:88px; padding:10px 12px; } .mpartners-grid{ gap:12px; }
  .mpartners-grid img{ height:60px; }
  .mpartners-note{ flex-direction:column; text-align:center; gap:12px; } }

/* ---- Ảnh nền banner các trang con (thay ảnh stock template) ---- */
.contact-us-banner{ background-image:linear-gradient(rgba(0,18,54,.72), rgba(0,18,54,.72)), url('../../brand_assets/about-port.web.webp') !important; background-position:50% 45%; background-size:cover; }
.service-banner{ background-image:linear-gradient(rgba(0,18,54,.72), rgba(0,18,54,.72)), url('../../brand_assets/svc-sea.web.webp') !important; background-position:50% 50%; background-size:cover; }
.about-us-banner{ background-image:linear-gradient(rgba(0,18,54,.72), rgba(0,18,54,.72)), url('../../brand_assets/hero-port-dawn.web.webp') !important; background-position:50% 35%; background-size:cover; }
.service-single-banner{ background-image:linear-gradient(rgba(0,18,54,.74), rgba(0,18,54,.74)), url('../../brand_assets/slogan-port.web.webp') !important; background-position:50% 45%; background-size:cover; }
.error-page-banner{ background-image:linear-gradient(rgba(0,18,54,.74), rgba(0,18,54,.74)), url('../../brand_assets/p-404-quay.web.webp') !important; background-position:50% 50%; background-size:cover; }

/* ---- Form báo giá (trang liên hệ) ---- */
.mfield-label{ display:block; color:#FFFFFF; font-family:Rubik,sans-serif; font-size:0.9375rem; font-weight:500; margin:0 0 6px; }
.contact-text-field-divider .mfield-label{ flex:1; }
.mfield-label span{ color:#F5BE63; margin-left:2px; }
.contact-page-form select.mfield-select{ appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F5BE63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.contact-page-form .w-input:focus-visible, .contact-page-form select:focus-visible, .contact-page-form textarea:focus-visible{ outline:2px solid #E8A237; outline-offset:2px; }
.mform-submit{ border:0; cursor:pointer; margin-top:8px; }
.mform-note{ color:#C7D0DE; font-size:0.9375rem; margin:14px 0 0; }

/* ---- Trang giới thiệu + tại sao chọn ---- */
.mabout-section{ padding:90px 0 70px; }
.mabout-figure img{ width:100%; height:auto; border-radius:14px; display:block; }
.mvalue-section{ padding:80px 0 90px; background:#FAF6EE; }
.mvalue-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.mvalue-grid--3{ margin-top:40px; }
.mvalue-card{ background:#FFFFFF; border:1px solid #E3DED2; border-radius:14px; padding:28px 24px; }
.mvalue-card h3{ font-family:Rubik,sans-serif; font-size:1.25rem; font-weight:600; color:#001B4D; margin:16px 0 8px; }
.mvalue-card p{ color:#45526B; font-size:0.9375rem; line-height:1.6; margin:0; }
.mcapa-section{ padding:90px 0; }
.mfeat-list.mfeat-list--single{ grid-template-columns:1fr; }
@media (max-width:991px){ .mvalue-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .mvalue-grid{ grid-template-columns:1fr; } }

/* ---- Trang 404 ---- */
.utility-page-wrap{ min-height:auto; padding:100px 20px 110px; }
.error-title{ font-family:Rubik,sans-serif; font-weight:600; font-size:3.25rem; color:#001B4D; margin:0 0 8px; }
.error-title .highlight{ color:#E8A237; }
.utility-page-content .paragraph-4{ max-width:520px; margin-left:auto; margin-right:auto; }
.merror-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---- Trang dịch vụ tổng: quy trình 4 bước + CTA ---- */
.mprocess-section{ padding:90px 0; background:#FAF6EE; }
/* Quy trình luôn nằm trên MỘT hàng bất kể 3, 4, 5 hay 6 bước (Daniel yêu cầu 2026-08-13) */
.mprocess-list{ list-style:none; margin:44px 0 0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:20px; }
.mprocess-list li{ background:#FFFFFF; border:1px solid #E3DED2; border-radius:14px; padding:24px 20px; }
.mprocess-no{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:6px; background:#001B4D; color:#F5BE63; font-family:Rubik,sans-serif; font-weight:600; font-size:1rem; font-variant-numeric:tabular-nums; }
.mprocess-list h3{ font-family:Rubik,sans-serif; font-size:1.25rem; font-weight:600; color:#001B4D; margin:16px 0 8px; }
.mprocess-list p{ color:#45526B; font-size:0.9375rem; line-height:1.6; margin:0; }
.mcta-section{ padding:90px 0; }
.mcta-section .paragraph-4{ max-width:640px; margin:12px auto 0; }
@media (max-width:991px){ .mprocess-list{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .mprocess-list{ grid-template-columns:1fr; } }

/* ---- Trang dịch vụ chi tiết: breadcrumb + chip điều hướng ---- */
.mbread{ padding:16px 0; border-bottom:1px solid #E3DED2; }
.mbread ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; margin:0; padding:0; font-size:0.9375rem; }
.mbread a{ color:#45526B; text-decoration:none; }
.mbread a:hover{ color:#C9861F; }
.mbread li[aria-current="page"]{ color:#001B4D; font-weight:500; }
.mbread li + li::before{ content:"/"; color:#C7D0DE; margin-right:8px; }

.mchips{ padding:22px 0 0; }
/* template đặt ul{flex-direction:column; padding-left:40px; margin:30px 0} -> phải ghi đè */
.mchips-list{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:10px; list-style:none; margin:0; padding:0 0 8px; overflow-x:auto; }
.mchips-list a{ display:inline-block; white-space:nowrap; padding:9px 16px; border:1px solid #E3DED2; border-radius:6px; background:#FFFFFF; color:#45526B; font-family:Rubik,sans-serif; font-size:0.9375rem; text-decoration:none; transition:border-color .18s ease, color .18s ease; }
.mchips-list a:hover{ border-color:#C9861F; color:#001B4D; }
.mchips-list a:focus-visible{ outline:2px solid #E8A237; outline-offset:2px; }
.mchips-list a[aria-current="page"]{ background:#001B4D; border-color:#001B4D; color:#FFFFFF; font-weight:500; }

/* ---- Khối mở đầu: ảnh chồng ảnh (tái dùng .service-work-* của template) ---- */
.service-work-image img, .service-work-small-image img{ width:100%; height:100%; object-fit:cover; border-radius:14px; display:block; }
.service-work-white-bg{ border-radius:14px; }
.mintro-actions{ margin-top:28px; }
/* .service-work-white-bg ẩn từ 991px trở xuống: xem khối cuối file */

/* ---- Bảng thông số kỹ thuật ---- */
.mspec-section{ padding:80px 0; background:#FAF6EE; }
.mspec-wrap{ margin-top:32px; overflow-x:auto; border:1px solid #E3DED2; border-radius:14px; background:#FFFFFF; }
.mspec{ width:100%; min-width:560px; border-collapse:collapse; }
.mspec th, .mspec td{ text-align:left; padding:16px 20px; border-bottom:1px solid #E3DED2; font-size:0.9375rem; line-height:1.5; }
.mspec thead th{ background:#001B4D; color:#FFFFFF; font-family:Rubik,sans-serif; font-weight:600; border-bottom:0; }
.mspec tbody tr:nth-child(even){ background:#FAF6EE; }
.mspec tbody tr:last-child td{ border-bottom:0; }
.mspec td:first-child{ font-weight:600; color:#001B4D; }
.mspec-note{ margin-top:14px; font-size:0.9375rem; color:#45526B; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.mspec-second{ margin-top:56px; }
.mspec-h3{ font-family:Rubik,sans-serif; font-size:1.25rem; font-weight:600; color:#001B4D; margin:0; }
.mspec-second .mspec-wrap{ margin-top:20px; }

/* ---- Chip nhóm hàng thường vận chuyển ---- */
.mtags-wrap{ margin-top:36px; }
.mtags-label{ font-family:Rubik,sans-serif; font-size:0.9375rem; font-weight:600; color:#001B4D; margin:0 0 12px; }
.mtags{ display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.mtags li{ padding:8px 14px; border:1px solid #E3DED2; border-radius:6px; background:#FFFFFF; color:#45526B; font-size:0.9375rem; }

/* ---- Dịch vụ liên quan ---- */
.mrelated-section{ padding:80px 0 90px; }

/* ---- Trang dịch vụ chi tiết ---- */
.service-single-banner-image{ width:100%; height:auto; max-height:460px; object-fit:cover; border-radius:14px; }
.service-single-title-wrap{ display:flex; align-items:center; gap:14px; }
.service-single-content > div > img, .service-video-block > img{ width:100%; height:100%; max-height:460px; object-fit:cover; border-radius:14px; }
.service-list-wrap .list-item strong{ color:#001B4D; }

/* Mini-form báo giá cuối mỗi trang dịch vụ */
.mquote{ margin-top:64px; background:#001B4D; border-radius:14px; padding:40px; }
.mquote-intro .service-single-subtitle{ color:#FFFFFF !important; }
.mquote-intro .service-single-text{ color:#C7D0DE !important; margin-bottom:0; }
.mquote-link{ color:#F5BE63; text-decoration:underline; }
.mquote-form{ display:grid; grid-template-columns:repeat(3,1fr) auto; gap:16px; align-items:end; margin-top:28px; }
.mquote-field{ display:block; }
.mquote-field span{ display:block; color:#FFFFFF; font-family:Rubik,sans-serif; font-size:0.9375rem; font-weight:500; margin-bottom:6px; }
.mquote-field input{ width:100%; height:52px; padding:0 16px; border:1px solid #123B7A; border-radius:10px; background:#FFFFFF; color:#0B1B36; font-size:1rem; }
.mquote-field input:focus-visible{ outline:2px solid #E8A237; outline-offset:2px; }
.mquote-form .mform-submit{ height:52px; margin-top:0; }
@media (max-width:991px){ .mquote-form{ grid-template-columns:1fr 1fr; } .mquote-form .mform-submit{ grid-column:1 / -1; } }
@media (max-width:600px){ .mquote{ padding:28px 20px; } .mquote-form{ grid-template-columns:1fr; } }

/* Section liên hệ + bản đồ */
.mcontact-section{ padding:90px 0 100px; }
.mcontact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center; }
.mcontact-list{ list-style:none; padding:0; margin:20px 0 28px; display:flex; flex-direction:column; gap:14px; }
.mcontact-list li{ display:flex; align-items:flex-start; gap:12px; color:#45526B; font-size:1rem; line-height:1.55; }
.mcontact-list li svg{ width:20px; height:20px; color:#C9861F; flex:none; margin-top:3px; }
.mcontact-map iframe{ display:block; width:100%; height:400px; border:0; border-radius:14px; }
@media (max-width:991px){ .mcontact-grid{ grid-template-columns:1fr; } .mcontact-map iframe{ height:300px; } }

/* Nhãn card "Năng lực": gradient đáy cố định cho chữ trắng đọc được trên ảnh sáng */
.work-card .work-image-shade{ background:linear-gradient(180deg, rgba(0,18,54,0) 35%, rgba(0,18,54,.85) 100%) !important; }

/* List điểm mạnh tự chủ (features section) */
.mfeat-list{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.mfeat-list li{ display:flex; align-items:center; gap:12px; font-size:0.9375rem; color:#0B1B36; font-weight:500; }
.mfeat-list li svg{ width:20px; height:20px; color:#C9861F; flex:none; }
@media (max-width:600px){ .mfeat-list{ grid-template-columns:1fr; } }

/* Chữ vàng hover của TBLog -> gold-soft cho đủ contrast trên navy */
.hover-yellow:hover{ color: #F5BE63 !important; }

/* Band ảnh "CUBA Market" của TBLog có chữ nướng trong file -> thay bằng ảnh cảng Morning */
.service-image-wrap{
  background-image: url('../../brand_assets/band-project.web.webp') !important;
  background-position: 50% 45% !important;
  background-size: cover !important;
}

/* Tiếng Việt không Title Case Từng Từ - bỏ capitalize của template */
.page-title, .section-title, .heading-slogan, .about-point, .features-point, .work-card-title, .service-title, .footer-title,
.service-single-subtitle, .faq-question, .faq-contact-title, .error-title{ text-transform: none !important; }

/* Danh sách hạng mục dịch vụ: gạch tròn, không đánh số (template set decimal, thứ tự không mang nghĩa) */
.service-list-wrap .list, .service-video-wrap .list{ padding-left:20px; }
.service-list-wrap .list-item, .service-video-wrap .list-item{ list-style-type:disc !important; margin-bottom:10px; }
.list-item, .list-item strong{ text-transform:none !important; }

/* ============================================================
   TỐI ƯU MOBILE (Daniel yêu cầu 2026-08-13)
   Đặt ở cuối file để thắng cả template lẫn các quy tắc phía trên.
   Quyết định UX đã chốt: header điện thoại = logo + nút gọi + hamburger.
   ============================================================ */

.nav-call{ display:none; }

/* Hero bị kéo lên dưới header bằng margin âm, mà nút trong hero lại có z-index 1
   -> khi menu mobile bung ra, nút gold nổi đè lên mục Liên hệ. Nâng cả khối header lên trên. */
.header-section{ position:relative; z-index:40; }

/* Hamburger: template đặt nền navy (--secondary-color) còn dự án đặt icon navy
   -> navy trên navy, người dùng chỉ thấy một ô vuông trống. Lật lại thành ô trắng icon navy. */
@media (max-width:991px){
  .nav-menu-button{ width:44px; height:44px; padding:0 !important; display:flex !important; align-items:center; justify-content:center;
                    background-color:#FFFFFF !important; border:1px solid #E3DED2 !important; border-radius:10px !important; }
  .nav-menu-button .w-icon-nav-menu{ color:#001B4D !important; font-size:1.25rem; }
  .nav-menu-button.w--open{ background-color:#001B4D !important; border-color:#001B4D !important; }
  .nav-menu-button.w--open .w-icon-nav-menu{ color:#FFFFFF !important; }
  .nav-menu-button:focus-visible{ outline:2px solid #E8A237; outline-offset:2px; }

  /* Menu bung ra: nền trắng đặc, tách khỏi ảnh hero bằng bóng, mỗi mục cao 48px cho dễ bấm.
     Overlay của Webflow chỉ cao bằng menu nên chữ hero lòi lên ngay dưới mép, nhìn như lỗi.
     Kéo overlay xuống hết màn hình và phủ navy mờ để ranh giới rõ ràng. */
  .w-nav-overlay{ height:100vh !important; background:rgba(0,18,54,.55); box-shadow:0 18px 40px rgba(0,27,77,.18); }
  .navigation-menu{ background:#FFFFFF !important; padding:6px 20px 18px !important; border-bottom:1px solid #E3DED2; }
  .navigation-menu .navigation-link{ display:block; padding:14px 0 !important; border-bottom:1px solid #F0EBE1; font-size:1rem; }
  .navigation-link.dropdown{ display:block !important; padding:14px 26px 14px 0 !important; border-bottom:1px solid #F0EBE1; }
  .nav-dropdown, .nav-dropdown .w-dropdown-toggle{ width:100%; }
  .nav-dropdown-list.w--open{ position:static !important; box-shadow:none !important; padding:4px 0 8px 14px !important; }
  .nav-dropdown-link{ padding:12px 0 !important; font-size:0.9375rem; border-bottom:1px solid #F6F2EA; }
  .nav-dropdown-link:last-child{ border-bottom:0; }
}

@media (max-width:991px){
  /* Trên khổ hẹp chữ hero chiếm hết bề ngang nên phủ đều theo chiều dọc thay vì chéo */
  .banner-section{
    background-image:linear-gradient(180deg, rgba(0,18,54,.58) 0%, rgba(0,18,54,.52) 40%, rgba(0,18,54,.74) 100%), url('../../brand_assets/hero-port-dawn.web.webp') !important;
    background-position:64% 50%;
  }
}

@media (max-width:767px){
  /* Strip trên cùng bỏ hẳn trên điện thoại (Daniel yêu cầu 2026-08-13): câu quảng cáo,
     dropdown ngôn ngữ và hotline đều đã có chỗ khác. Gọi nhanh dùng nút .nav-call trong nav. */
  .div-block-2{ display:none !important; }

  /* Nút chữ dài trong nav đè lên chữ MORNING LOGISTICS -> đổi sang nút gọi vuông 44px */
  .nav-cta{ display:none !important; }
  .nav-call{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
             border-radius:10px; background:#E8A237; color:#001B4D; text-decoration:none;
             transition:background-color .18s ease; }
  .nav-call:hover{ background:#C9861F; }
  .nav-call svg{ width:20px; height:20px; }
  .nav-call:focus-visible{ outline:2px solid #001B4D; outline-offset:2px; }
  .navigation-button-wrap{ gap:10px !important; margin-right:10px; flex-wrap:nowrap !important; }
  .nav-logo img{ height:42px; }
  .nav-logo-text b{ font-size:1.0625rem; }
  .nav-logo-text span{ font-size:0.75rem; letter-spacing:.18em; }

  /* Các section tự chế đang giữ nguyên padding 80-100px của desktop nên trên điện thoại
     phải cuộn rất lâu mới hết trang. Template đã hạ xuống 80px, hạ tiếp cho khớp nhịp. */
  .mabout-section, .mvalue-section, .mcapa-section, .mprocess-section, .mspec-section,
  .mrelated-section, .mcontact-section, .mcta-section, .mpartners-section{
    padding-top:56px !important; padding-bottom:56px !important;
  }
  .mvalue-grid, .mprocess-list, .mpartners-grid, .mchips-list{ margin-top:28px; }
  .mstat-row{ margin:36px 0 8px; }
  .mquote{ margin-top:44px; }
  .mtags-wrap{ margin-top:28px; }

  /* Vùng chạm: breadcrumb và chip đang cao 19px, dưới ngưỡng ngón tay */
  .mbread{ padding:10px 0; }
  .mbread ol{ font-size:0.875rem; gap:6px; }
  .mbread a, .mbread li[aria-current="page"]{ display:inline-block; padding:10px 0; }
  .mchips-list a{ padding:12px 16px; }
  .strip-contact{ padding:6px 10px; }
}

/* IX2 của Webflow ẩn nội dung chờ scroll; bản comp phải nhìn thấy mọi thứ ngay */
/* IX2 của template ẩn nội dung chờ scroll. Ngoài các phần tử có data-w-id, nó còn
   nhắm THEO CLASS (.footer-link-wrap có action fadeIn) nên phải liệt kê riêng. */
.service-card, .about-image-wrap img, .about-image img, .features-content-wrap, .work-card, .counter-wrap, [data-w-id],
.footer-link-wrap, .footer-content-wrap, .footer-form-wrapper{ opacity: 1 !important; }

/* ============================================================
   ĐỢT TỐI ƯU RESPONSIVE (2026-08-13) - kết quả rà 13 trang x 9 bề rộng.
   MỌI thứ dưới đây phải nằm CUỐI FILE: template và các khối phía trên
   cùng dùng mốc 991px, chèn vào giữa file thì quy tắc cũ thắng.
   ============================================================ */

/* --- Nút: khối trắng trượt của template nằm đè 30% bề ngang nút ngay ở trạng thái nghỉ.
   Giữ hiệu ứng trượt Daniel đã chốt (lấy từ TBLog) nhưng chỉ cho hiện khi hover. --- */
.yellow-button-hover, .dark-button-hover{ opacity:0; transition:opacity .16s ease-out; }
.yellow-overlay-button:hover .yellow-button-hover,
.primary-button:hover .yellow-button-hover,
.navigation-button:hover .yellow-button-hover,
.nav-cta:hover .yellow-button-hover,
.dark-overlay-button:hover .dark-button-hover{ opacity:1; }
@media (hover:none){ .yellow-button-hover, .dark-button-hover{ display:none; } }

/* --- Vòng focus cho điều hướng: components.css đặt outline:0 nên phải !important --- */
.navigation-link:focus-visible, .nav-dropdown-link:focus-visible, .nav-logo:focus-visible,
.navigation-link.dropdown:focus-visible, .dropdown-toggle:focus-visible,
.strip-contact:focus-visible, .w-nav-button:focus-visible{
  outline:2px solid #E8A237 !important; outline-offset:2px; border-radius:6px;
}
.div-block-2 a:focus-visible{ outline-color:#F5BE63 !important; }
.mquote .mform-submit:focus-visible, .contact-page-form .mform-submit:focus-visible{
  outline:2px solid #FFFFFF !important; outline-offset:3px;
}

/* --- Trang đang xem: !important ở trên đã vô hiệu w--current của Webflow --- */
.navigation-link.w--current{ color:#C9861F !important; border-bottom-color:#C9861F !important; }
.nav-dropdown-link.w--current{ color:#C9861F !important; font-weight:600; }

/* --- Số thống kê: 52px cứng làm "3.000+" và "50.000+" tràn ô ở khổ nhỏ --- */
.mstat strong{ font-size:clamp(1.75rem, 1.193rem + 2.286vw, 3.25rem); }
@media (max-width:1199px){ .mstat{ padding:0 16px; } }
@media (max-width:991px){
  .mstat{ flex:1 1 calc(50% - 1px); min-width:0; max-width:none; border-right:0; padding:0 16px; }
}
@media (max-width:479px){ .mstat{ padding:0 8px; } .mstat span{ font-size:0.875rem; } }

/* --- Chữ: template để body line-height 1.3 và strong capitalize, rò xuống khắp nơi --- */
h1, h2, h3, .page-title, .section-title, .heading-slogan,
.service-single-subtitle, .about-point{ text-wrap:balance; }
h1 strong, h2 strong, h3 strong, .page-title strong, .section-title strong,
.heading-slogan strong, .service-single-subtitle strong{ text-transform:none; }
/* .page-title / .section-title / .heading-slogan: cỡ chữ khai ở khối
   "VÒNG RESPONSIVE + TYPO" cuối file, để một chỗ duy nhất. */
.error-title{ font-size:clamp(2.5rem, 2.221rem + 1.143vw, 3.25rem); line-height:1.05; }
.footer-title, .about-point{ font-size:clamp(1.125rem, 0.963rem + 0.667vw, 1.5625rem); }
.paragraph-4, .text-white, .footer-text, .service-single-text, .mcontact-list li{ line-height:1.7; }
.mfeat-list{ gap:26px 24px; }
.mfeat-list li{ line-height:1.55; align-items:flex-start; }
.mfeat-list li svg{ margin-top:3px; }

/* --- Card dịch vụ trên máy cảm ứng: không có hover thì cả phần mô tả biến mất --- */
@media (hover:none){
  .svc8-card{ background:#FFFFFF; border:1px solid #E3DED2; }
  .svc8-card > img{ border-radius:14px 14px 0 0; }
  .svc8-plate{ position:static; width:100%; border-radius:0; background:transparent; padding:12px 14px 4px; }
  .svc8-desc{ position:static; inset:auto; opacity:1; background:transparent; padding:0 14px 16px; display:block; }
  .svc8-desc p{ color:#45526B; font-size:0.875rem; line-height:1.6; }
  .svc8-name{ color:#0B1B36; }
}
@media (max-width:600px){
  .svc8-card > img{ aspect-ratio:16/10; }
  .svc8-grid{ gap:18px; }
  .svc8-plate{ width:100%; border-radius:0; padding:12px 14px; }
}
@media (min-width:601px) and (max-width:991px){ .svc8-card > img{ aspect-ratio:4/3; } }

/* --- Card năng lực: template để img height auto nên 5 card 5 chiều cao khác nhau,
   dải gold .work-bg lại min-height 50% nên cắt ngang giữa card. Ràng buộc cho MỌI khổ. --- */
.work-card{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:14px; }
.work-card > img{ width:100%; height:100%; object-fit:cover; display:block; }
.work-section .work-bg{ min-height:0 !important; height:190px; }
.work-card .work-text-wrap{ padding:0 18px 14px 18px; }
.work-grid{ align-items:stretch; }

@media (max-width:991px){
  .work-card{ aspect-ratio:4/3; }
  .work-section .work-bg{ height:200px; }
  .work-card .work-text-wrap{ padding:0 15px 12px 15px; }
  /* Card thấp lại (4/3 rồi 16/10) nên vùng chữ rơi vào đoạn gradient còn nhạt,
     chữ trắng và gold nằm trên ảnh sáng. Dồn gradient lên sớm và đậm hơn ở đáy. */
  .work-card .work-image-shade{
    background:linear-gradient(180deg, rgba(0,18,54,0) 28%, rgba(0,18,54,.58) 60%, rgba(0,18,54,.93) 100%) !important;
  }
}
@media (max-width:600px){ .work-card{ aspect-ratio:16/10; } .work-section .work-bg{ height:150px; } }

/* --- Lưới lẻ ở khổ máy tính bảng: phần tử cuối đứng một mình nửa hàng --- */
@media (min-width:601px) and (max-width:991px){
  .mprocess-list > li:last-child:nth-child(odd),
  .mvalue-grid > *:last-child:nth-child(odd),
  .svc8-grid > .svc8-card:last-child:nth-child(odd){ grid-column:1 / -1; }
  .svc8-grid > .svc8-card:last-child:nth-child(odd) > img{ aspect-ratio:21/9; }
  .work-grid > .work-card:last-child:nth-child(odd){ grid-column:1 / -1; aspect-ratio:21/9; }
  .mquote-form > .mquote-field:nth-of-type(3){ grid-column:1 / -1; }
  /* Cột thương hiệu cao 604px còn cột link chỉ 266px -> mảng navy trống 340x338.
     Cho khối thương hiệu chiếm trọn hàng trên, ba cột link chia đều hàng dưới.
     Cần !important vì dòng .footer-grid > * đã khóa grid-area:auto !important. */
  .footer-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .footer-grid > *:first-child{ grid-column:1 / -1 !important; margin-bottom:8px; }
}

/* --- Form trang liên hệ: chữ gợi ý trắng trên nền navy trông như ô đã điền --- */
.contact-page-form .w-input::placeholder, .contact-page-form textarea::placeholder{ color:#9FB0C9; opacity:1; }
.contact-page-form select.mfield-select{ background-color:#001B4D; color-scheme:dark; }
.contact-page-form select.mfield-select option{ color:#0B1B36; background-color:#FFFFFF; }
.contact-us-wrap .contact-page-form{ text-align:left; align-items:stretch; }
.contact-page-form .mfield-label{ width:100%; text-align:left; }
.contact-page-form .mform-note{ text-align:left; }
.contact-page-form .mfield{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.contact-text-field-divider .mfield-label{ flex:none; }
.mquote-field span i{ color:#F5BE63; font-style:normal; margin-left:2px; }

/* --- Bản đồ nhúng: nền dự phòng khi iframe chưa vẽ + link mở app bản đồ --- */
.mcontact-map{ position:relative; background:#EEE9DF; border:1px solid #E3DED2; border-radius:14px; overflow:hidden; }
.mcontact-map iframe{ border-radius:0; }
.mmap-link{ display:inline-flex; align-items:center; min-height:44px; color:#C9861F; text-decoration:none; font-size:0.9375rem; }
.mmap-link:hover{ color:#001B4D; text-decoration:underline; }
.mmap-link:focus-visible{ outline:2px solid #E8A237; outline-offset:2px; }
.mcontact-tap{ display:inline-flex; align-items:center; min-height:44px; color:inherit; text-decoration:none; }
.mcontact-tap:hover{ color:#C9861F; }
.mcontact-tap:focus-visible{ outline:2px solid #E8A237; outline-offset:2px; }

/* --- Logo đối tác dạng chữ: hai cái vỡ 2 dòng và căn trái lệch với 6 logo ảnh --- */
.partner-wordmark{ text-align:center; line-height:1.3; }

/* --- Breadcrumb: dấu gạch chéo dính phần tử SAU nên khi xuống dòng nó mồ côi đầu dòng --- */
.mbread li + li::before{ content:none; }
.mbread li:not(:last-child)::after{ content:"/"; color:#C7D0DE; margin-left:8px; }

@media (max-width:991px){
  /* Header dính: xem khối "HEADER DÍNH" ở cuối file (gộp cả desktop lẫn mobile). */

  /* Menu mở: panel tự cuộn nếu dài hơn màn hình.
     KHÔNG khóa cuộn bằng overflow:hidden trên html/body. Làm vậy thì html thôi
     không còn là vùng cuộn, position:sticky của header mất chỗ bám và header rơi
     về vị trí tĩnh của nó, tức là bay lên trên mép màn hình ngay khi trang đã cuộn
     một đoạn. Hậu quả: bấm hamburger sau khi cuộn thì cả nút lẫn menu biến mất.
     overscroll-behavior:contain chặn cuộn lan ra nền mà không đụng tới sticky. */
  .w-nav-overlay .navigation-menu{ max-height:calc(100dvh - 96px); overflow-y:auto; -webkit-overflow-scrolling:touch;
                                   overscroll-behavior:contain; }
  .navigation-link.w--current, .nav-dropdown-link.w--current{
    border-bottom-color:#F0EBE1 !important; box-shadow:inset 3px 0 0 #E8A237; padding-left:10px !important;
  }

  /* Dải chip dịch vụ: thêm mép mờ báo còn cuộn được (JS cuộn tới chip đang xem) */
  .mchips .container{ position:relative; }
  .mchips-list{ scroll-snap-type:x proximity; scroll-padding-left:20px; padding-right:30px; }
  .mchips-list li{ scroll-snap-align:start; }
  .mchips .container::after{
    content:""; position:absolute; top:0; right:0; width:36px; height:100%;
    pointer-events:none; background:linear-gradient(90deg, rgba(255,255,255,0), #FFFFFF);
  }

  /* Thẻ trắng chồng ảnh để lại 91px trắng chết và che 44% ảnh chính ở khổ tablet */
  .service-work-white-bg{ display:none; }

  /* Band ảnh khẩu hiệu để margin-bottom 100px của template -> 160px trắng liền mạch */
  .image-section{ margin-bottom:40px; padding:44px 0; }

  /* Tiêu đề khối quy trình là khối duy nhất canh giữa, phá nhịp khi xếp dọc */
  .mprocess-section .align-center{ text-align:left; }
  .mprocess-section .align-center .paragraph-4{ margin-left:0; margin-right:0; }

  /* FAQ luôn mở sẵn nhưng vẫn có mũi tên xổ xuống: affordance giả */
  .faq-icon.w-icon-dropdown-toggle{ display:none; }
  .faq-question-wrap{ cursor:default; }
}

@media (max-width:767px){
  /* Các section còn lại của template vẫn giữ padding cỡ desktop */
  .service-section, .features-section, .about-faq-section,
  .service-work, .service-single{ padding-top:56px !important; padding-bottom:56px !important; }
  .about-section{ padding-bottom:56px !important; }
  .utility-page-wrap{ padding:56px 20px !important; }
  .mvalue-card{ padding:22px 18px; }
  .mprocess-list li{ padding:22px 18px; }

  /* Banner trang con: 416px cao cho 136px nội dung. KHÔNG áp cho hero trang chủ. */
  .service-banner, .contact-us-banner, .about-us-banner,
  .service-single-banner, .error-page-banner{ padding-top:112px !important; padding-bottom:56px !important; }
  .service-single-banner{ background-position:62% 38%; }

  /* Dải ảnh hàng dự án chỉ còn bầu trời vì section co lại còn 160px */
  .service-image-wrap{ padding-top:120px !important; padding-bottom:120px !important; background-position:50% 62% !important; }

  /* Vùng chạm còn dưới ngưỡng ngón tay */
  .contact-link-wrap a.header-link-text, .header-link-card a.header-link-text{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .footer-link{ display:flex; align-items:center; min-height:44px; padding:0; }
  .footer-link-block{ display:flex; flex-direction:column; gap:6px; }
  .mquote-link{ display:inline-block; padding:4px 0; }

  /* Nút "Nhận báo giá" xuất hiện 2 lần cách nhau 125px ở đáy footer */
  .copyright-block .div-block-9{ display:none; }
  .copyright-block .copyright-wrap{ text-align:center; padding-bottom:8px; }

  .partner-wordmark{ font-size:0.8125rem; letter-spacing:.04em; }
  .mpartners-grid img{ max-height:40px; max-width:110px; width:auto; }
}

@media (max-width:600px){
  .image-section{ margin-bottom:24px; }
  .image-section .heading-slogan{ padding-left:24px; padding-right:24px; }
  .subtitle, .subtitle-dark{ font-size:0.9375rem; line-height:1.45; }
}

@media (max-width:560px){
  .mbread ol{ gap:2px 8px; }
  .mbread li[aria-current="page"]{ flex-basis:100%; }
}

/* Máy nhỏ 320px: ô logo đối tác có min-content 152px (ảnh 110 + padding 40) nên cột
   1fr không co được và lưới tràn 24px. minmax(0,1fr) cho phép cột nhỏ hơn nội dung. */
@media (max-width:479px){
  .svc8-grid, .mvalue-grid, .mprocess-list, .footer-grid{ grid-template-columns:minmax(0,1fr) !important; }
}

/* ============================================================
   Rà soát Daniel 2026-08-13 (đợt góp ý sau khi xem localhost)
   ============================================================ */

/* Footer cột thương hiệu: template để .footer-logo-wrap padding 40px trên dưới và 45px trái,
   cộng margin-bottom của logo thành khoảng trống gần 100px giữa logo và địa chỉ. */
.footer-logo-wrap{ padding:0 !important; min-width:0 !important; }
.footer-real-logo{ height:78px; margin-bottom:14px; }
/* template: .footer-content-block{ margin-top:50px; padding-left:45px } khiến chữ tụt xa logo
   và thụt vào so với các cột khác */
.footer-content-block{ margin-top:14px !important; padding-left:0 !important; }
.footer-content-wrap .footer-text{ margin-top:0; }

/* Nhãn card dịch vụ: template chừa 24px bên phải nên lộ một dải ảnh, còn góc dưới trái vuông
   trong khi card bo tròn. Cho nhãn chạy hết bề ngang, tách khỏi ảnh bằng một đường mảnh. */
.svc8-plate{ width:100% !important; border-radius:0 !important; border-top:1px solid #E3DED2; padding:12px 14px; }
.btn-ico{ display:inline-flex; margin-left:6px; }
.btn-ico svg{ width:17px; height:17px; }

/* Dải số trang chủ: đáy quá sát khối kế tiếp */
.mstat-row{ margin:64px 0 8px; }
.about-section .mstat-row{ margin-bottom:72px; }
.about-section{ padding-bottom:24px; }

/* Dải số trang dịch vụ: chuỗi dài như "1.200-5.600" vỡ 2 dòng trông thô.
   Hạ trần cỡ chữ cho dải này và cấm ngắt dòng giữa con số. */
.mstat-row--sm .mstat strong{ font-size:clamp(1.625rem, 1.14rem + 1.71vw, 2.5rem); }
/* cấm ngắt dòng giữa con số chỉ từ 601px trở lên; máy nhỏ thì ô quá hẹp, ép nowrap sẽ tràn trang */
@media (min-width:601px){ .mstat-row--sm .mstat strong{ white-space:nowrap; } }
.mstat-row--sm .mstat{ padding:0 18px; }

/* Khối ảnh chồng ảnh ở trang dịch vụ: template khóa cứng .service-work-white-bg 220x205
   trong khi ảnh nhỏ cao tới 303px, nên tấm nền trắng không ôm được ảnh và lòi ra một mảng.
   Cho nền trắng tự co theo ảnh, chừa viền đều. */
.service-work-white-bg{ min-width:0; min-height:0; padding:12px; display:inline-flex;
                        box-shadow:0 10px 30px rgba(0,27,77,.12); }
.service-work-small-image{ max-width:230px; max-height:none; top:0; left:0; margin:0; display:block; }
.service-work-small-image img{ display:block; width:100%; height:auto; border-radius:10px; }
/* Nút "Xem thêm" của khối năng lực bị mép trên dải gold cắt ngang giữa thân nút.
   Dải gold cao 150px, nút cao 51px, nên chừa 50px dưới nút thì nút nằm đúng giữa dải. */
.work-section{ padding-bottom:50px !important; }
.work-section .work-bg{ height:150px; }
@media (max-width:600px){
  .work-section{ padding-bottom:44px !important; }
  .work-section .work-bg{ height:140px; }
}

/* ---- Rà soát vòng 2 (Daniel, 2026-08-13) ---- */

/* 1. Nhãn card dịch vụ: nhãn và ảnh trông như hai mảnh rời, mũi tên dạt hẳn ra mép.
   Gộp thành một khối: card có viền bao, nhãn liền mạch với ảnh, mũi tên nhẹ đi. */
.svc8-card{ border:1px solid #E3DED2; background:#FFFFFF; }
.svc8-plate{ border-top:0 !important; padding:14px 16px !important; gap:12px; min-height:62px; }
.svc8-icon{ width:34px; height:34px; border-radius:6px; } /* rounded.chip */
.svc8-icon svg{ width:18px; height:18px; }
.svc8-name{ font-size:1rem; line-height:1.3; }
.svc8-arrow{ color:#45526B; } /* muted, đổi sang gold khi rê chuột */
.svc8-arrow svg{ width:17px; height:17px; }
.svc8-card:hover{ border-color:#C9861F; }
.svc8-card:hover .svc8-arrow{ color:#C9861F; }

/* 2. Icon trong nút bị lệch so với chữ vì .text-block là khối, icon là inline-flex.
   Cho cả cụm chữ + icon nằm trên một trục. */
.yellow-overlay-button .text-block,
.primary-button .text-block,
.navigation-button .text-block{ display:inline-flex; align-items:center; gap:8px; }
.btn-ico{ margin-left:0; }
.btn-ico svg{ display:block; }

/* 3. Dải gold full-width chỉ để làm nền cho một cái nút, nhìn thừa và lạc nhịp.
   Bỏ dải, nút về hệ nút gold chuẩn như mọi nút khác trên site. */
.work-section .work-bg{ display:none !important; }
.work-section{ padding-bottom:90px !important; }
.work-section .dark-overlay-button{ background-color:#E8A237 !important; color:#001B4D !important; }
.work-section .dark-overlay-button div:not(.dark-button-hover){ color:#001B4D !important; }
.work-section .dark-overlay-button:hover{ background-color:#C9861F !important; }
.work-section .dark-overlay-button:focus-visible{ outline-color:#001B4D; }
.work-section .dark-button-hover{ display:none !important; }
@media (max-width:600px){ .work-section{ padding-bottom:56px !important; } }

/* Khối "Về Morning Logistics": ảnh ngang chỉ cao bằng nửa cột nên chừa một mảng trắng lớn.
   Ảnh dọc kéo cao bằng đúng cột nội dung bên trái. */
.about-grid{ align-items:stretch; }
.about-image-wrap{ height:100%; min-height:100%; }
.about-image-wrap > img{ height:100%; width:100%; object-fit:cover; object-position:50% 40%; }
@media (max-width:991px){
  /* xếp dọc thì ảnh cao bằng cột sẽ thành cột ảnh lêu nghêu, giới hạn lại */
  .about-image-wrap{ height:auto; min-height:0; }
  .about-image-wrap > img{ height:auto; aspect-ratio:4/3; }
}


/* ---- Chau chuốt nội dung theo văn phong tham chiếu (2026-08-14) ---- */

/* Câu phương châm dưới tiêu đề "Tổng quan" trang giới thiệu.
   Không dùng thanh gold bên trái: chip eyebrow "Tổng quan" ngay phía trên đã có
   thanh đó rồi, lặp lại thành hai vạch gold chồng nhau. Dùng gạch mảnh phía dưới
   để tách khỏi thân bài. One Sun Rule: chữ giữ navy, gold chỉ làm đường kẻ. */
.mabout-motto{
  font-family:Rubik,sans-serif; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#001B4D; font-size:0.8125rem;
  margin:0 0 20px; padding-bottom:14px;
  border-bottom:1px solid #E3DED2;
}

/* Khối "Nguyên tắc tuân thủ": 4 mặt nên cần biến thể 4 cột của .mvalue-grid. */
.mprinciple-section{ padding:80px 0 90px; background:#FFFFFF; }
.mvalue-grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .mvalue-grid--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .mvalue-grid--4{ grid-template-columns:1fr; } }

/* Đoạn kết + lời mời liên hệ, đặt giữa khối lợi ích và mini form báo giá
   trên mỗi trang dịch vụ. Là khối trong container, không phải section riêng. */
.mclose{
  margin:56px 0 0; padding:30px 32px;
  background:#FAF6EE; border:1px solid #E3DED2; border-radius:14px;
}
.mclose h2{
  font-family:Rubik,sans-serif; font-size:1.25rem; font-weight:600;
  color:#001B4D; margin:0 0 12px;
}
.mclose p{ color:#45526B; font-size:1rem; line-height:1.7; margin:0 0 12px; }
.mclose p:last-child{ margin-bottom:0; }
.mclose-invite{ color:#001B4D; font-weight:600; }
@media (max-width:767px){
  .mclose{ margin-top:36px; padding:24px 20px; }
}

/* Template đặt .paragraph-4{margin-bottom:0}, nên nhiều đoạn liền nhau dính
   thành một khối chữ. Chỉ tách khi có từ hai đoạn trở lên. */
.paragraph-4 + .paragraph-4,
.text-white + .text-white,
.mclose p + p{ margin-top:1em; }

/* ================================================================
   VÒNG RESPONSIVE + TYPO (Daniel duyệt 2026-08-14)
   Khối này đứng cuối file nên thắng mọi rule phía trên.
   ================================================================ */

/* 1. H1: nhẹ nét và sít dòng hơn. Bản cũ 700/1.2 và tối đa 60px, trên
      MacBook 13" thành 4 dòng chữ rất nặng. */
.page-title{
  font-size:clamp(1.625rem, 1.05rem + 2.25vw, 3rem);
  font-weight:600 !important;
  line-height:1.08;
  letter-spacing:-0.02em;
}
/* Tiêu đề section cũng hạ một bậc cho đỡ ngộp ở khổ 1280-1440 */
.section-title{ font-size:clamp(1.5rem, 1.29rem + 0.86vw, 2rem); line-height:1.15; }
.heading-slogan{ font-size:clamp(1.375rem, 1.1rem + 1.14vw, 2.125rem); line-height:1.2; }

/* Số liệu là số, không phải tên riêng: chặn capitalize của template */
.mstat strong, .mstat span{ text-transform:none !important; }

/* 4. Khổ máy tính xách tay: bóp nhịp dọc để một màn hình chứa được nhiều hơn */
@media (max-width:1439px){
  .mabout-section, .mvalue-section, .mprinciple-section, .mcapa-section,
  .mprocess-section, .mspec-section, .mpartners-section, .mcta-section,
  .mrelated-section{ padding-top:64px; padding-bottom:72px; }
  .mstat-row{ margin-top:48px; }
  .about-section .mstat-row{ margin-bottom:56px; }
}

/* 2. Khối "Về Morning Logistics": ảnh dọc kéo cao bằng cả cột đọc thành
      mảng ảnh lêu nghêu. Chặn trần chiều cao lại. */
.about-image-wrap{ max-height:560px; }
.about-image-wrap > img{ object-position:50% 50%; }
@media (max-width:1439px){ .about-image-wrap{ max-height:480px; } }

/* 3. "Năng lực khai thác": tiêu đề card dài ngắn khác nhau nên chữ trong
      5 card so le. Đặt sàn 2 dòng cho cả tiêu đề lẫn dòng phụ để thẳng hàng. */
.work-card-title{ line-height:1.25; margin-bottom:6px; }
.work-text{ font-size:0.9375rem; line-height:1.45; }
@media (min-width:601px){
  .work-card-title{ min-height:2.5em; }
  .work-text{ min-height:2.9em; }
}

/* ---------------- MOBILE (Daniel duyệt 2026-08-14) ---------------- */

/* 8. Navbar mobile: bỏ nút gọi. Hotline đã có ở strip trên và ở footer,
      hai nút cạnh nhau làm header chật. */
@media (max-width:991px){
  .nav-call{ display:none !important; }
}

/* 6. Lưới dịch vụ trang chủ trên điện thoại: card ảnh to xếp dọc làm section
      dài lê thê. Chuyển sang card ngang gọn: ảnh vuông trái, chữ phải. */
@media (max-width:600px){
  .svc8-grid{ gap:12px; margin-top:28px; }
  .svc8-card{
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    grid-template-areas:"thumb name" "thumb desc";
    align-content:start; column-gap:14px; row-gap:4px;
    padding:14px; background:#FFFFFF; border:1px solid #E3DED2;
    /* giữ nguyên radius 14px (rounded.panel) của .svc8-card */
  }
  .svc8-card > img{
    grid-area:thumb; width:76px; height:76px; aspect-ratio:1/1;
    border-radius:10px; object-fit:cover;   /* rounded.field */
  }
  .svc8-plate{ grid-area:name; padding:0; gap:6px; align-items:flex-start; }
  .svc8-icon{ display:none; }              /* có ảnh thật rồi, icon thành thừa */
  .svc8-name{ font-size:0.9375rem; line-height:1.3; }
  .svc8-arrow{ margin-top:1px; }
  /* mô tả vốn là lớp phủ tối hiện khi hover, ở dạng card ngang phải trở lại
     thành chữ thường trong luồng */
  .svc8-desc{
    grid-area:desc; position:static; inset:auto; padding:0;
    background:transparent; opacity:1;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .svc8-desc p{ font-size:0.8125rem; line-height:1.5; color:#45526B; }
  .svc8-card:hover .svc8-desc, .svc8-card:focus-visible .svc8-desc{ opacity:1; }
}

/* 7. Ảnh khối "Tại sao chọn": ảnh ngang 16/9 bị ô lưới kéo cao thành dọc,
      nhìn như bị giãn. Ép đúng tỉ lệ gốc. */
@media (max-width:991px){
  .features-image{ height:auto; }
  .features-image > img{
    width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
    border-radius:14px; display:block;
  }
}

/* 10. Trang chi tiết: dải chip chọn dịch vụ trùng với menu Dịch vụ trong
       hamburger, trên điện thoại chỉ tổ chiếm chỗ. Ẩn đi. */
@media (max-width:767px){
  .mchips{ display:none; }
}

/* 9. Bảng thông số: trong container thì mất nửa bảng mà không thấy là cuộn
      được. Cho tràn hết bề ngang màn hình, mép phải chạm cạnh máy nên nhìn
      là biết vuốt ngang. */
@media (max-width:767px){
  .mspec-wrap{
    margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    width:100vw; border-left:0; border-right:0; border-radius:0;
  }
  .mspec{ min-width:520px; }
  .mspec th, .mspec td{ padding:12px 14px; font-size:0.875rem; }
  .mspec th:first-child, .mspec td:first-child{ padding-left:20px; }
  .mspec th:last-child, .mspec td:last-child{ padding-right:20px; }
}

/* 11. Khối con số trên điện thoại: flex làm hai cột lệch bề ngang. Đổi sang
       lưới 2 cột đều nhau, giãn dòng cho thoáng. */
@media (max-width:600px){
  .mstat-row{
    display:grid; grid-template-columns:1fr 1fr;
    gap:30px 10px; margin:40px 0 8px;
  }
  .mstat{ flex:none; min-width:0; max-width:none; border-right:0; padding:0 6px; }
  .mstat strong{ font-size:1.75rem; }
  .mstat strong::after{ width:30px; height:3px; margin:8px auto 7px; }
  .mstat span{ font-size:0.8125rem; line-height:1.4; }
  .mstat-row--sm .mstat strong{ font-size:1.625rem; }
  .mstat-row--sm .mstat{ padding:0 6px; }
}

/* ================================================================
   VÒNG SỬA 2 (Daniel duyệt 2026-08-14)
   ================================================================ */

/* 2. Ảnh khối "Tại sao chọn": ảnh gốc 1400x788 nhưng ô lưới ép thành gần
      vuông 790x788 nên chiếm nguyên màn hình, đọc rất ngộp. Trả về đúng
      tỉ lệ ngang và chặn trần chiều cao. */
@media (min-width:992px){
  .features-image > img{
    width:100%; height:auto; aspect-ratio:16/9; max-height:420px;
    object-fit:cover; border-radius:14px; display:block;
  }
  .features-section{ padding-top:96px; padding-bottom:96px; }
}

/* 3. Danh sách liên hệ: dòng có link bọc .mcontact-tap cao 44px (vùng chạm)
      còn icon căn theo mép trên, thành ra icon nhô cao hơn chữ 6px. Căn giữa
      theo chiều dọc cho cả hàng. */
.mcontact-list li{ align-items:center; }
.mcontact-list li svg{ margin-top:0; }

/* 4. Footer: chữ hiệu đứng cạnh logo, cùng cách xếp với header nhưng đảo
      màu cho nền navy. */
.footer-logo-wrap{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; }
.footer-logo-text{ display:flex; flex-direction:column; line-height:1.05; }
.footer-logo-text b{
  font-family:Rubik,sans-serif; font-weight:700; font-size:1.25rem;
  color:#FFFFFF; letter-spacing:.02em;
}
.footer-logo-text span{
  font-family:Rubik,sans-serif; font-weight:600; font-size:0.8125rem;
  color:#E8A237; letter-spacing:.26em;
}
.footer-real-logo{ margin-bottom:0; }
.footer-content-wrap .footer-logo-wrap{ margin-bottom:20px; }
@media (max-width:767px){
  .footer-logo-text b{ font-size:1.0625rem; }
  .footer-logo-text span{ font-size:0.75rem; letter-spacing:.18em; }
  .footer-content-wrap .footer-logo-wrap{ margin-bottom:14px; }
}

/* 5. Card dịch vụ trên điện thoại: bỏ hẳn phần mô tả, chỉ còn ảnh và tên.
      Mọi card cùng chiều cao, tên căn giữa theo chiều dọc. */
@media (max-width:600px){
  .svc8-grid{ gap:10px; }
  .svc8-card{
    grid-template-columns:88px minmax(0,1fr);
    grid-template-areas:"thumb name";
    align-items:center; column-gap:0; row-gap:0;
    padding:0; overflow:hidden;
  }
  .svc8-card > img{
    width:88px; height:88px; border-radius:0;
    align-self:stretch; height:auto; min-height:88px;
  }
  .svc8-plate{ padding:0 14px; align-items:center; gap:10px; min-height:88px; }
  .svc8-name{ font-size:0.9375rem; line-height:1.35; }
  .svc8-desc{ display:none; }
}

/* ---- Thông báo kết quả gửi biểu mẫu (Web3Forms) ---- */
/* .mquote-form là lưới 4 cột nên thông báo phải kéo hết chiều ngang, nếu không
   nó chen vào làm một ô của lưới. */
.mform-status{ grid-column:1 / -1; margin:14px 0 0; padding:14px 16px; border-radius:10px;
  font-size:0.9375rem; line-height:1.55; border:1px solid transparent; }
.mform-status.is-sending{ background:#F6F2EA; border-color:#E3D9C6; color:#45526B; }
.mform-status.is-ok{ background:#EAF3EC; border-color:#BBD9C3; color:#1F5133; font-weight:500; }
.mform-status.is-error{ background:#FBEDEC; border-color:#EBC3C0; color:#8A2B22; }

/* ============================================================
   HEADER DÍNH (Daniel yêu cầu 2026-08-14)
   Gộp cả desktop lẫn mobile vào một chỗ. Trước đây sticky chỉ có ở
   max-width:991px nên trên máy tính thanh nav trôi mất.
   ============================================================ */

/* Chiều cao thanh navy trên cùng, đo thực tế: 38px ở mọi bề rộng >=768px
   (dưới 768px thanh này display:none). Đổi padding của .div-block-2 thì
   phải đo lại và sửa đúng biến này. */
:root{ --strip-h:38px; }

.header-section{ position:sticky; top:0; }

@media (min-width:768px){
  /* Chỉ giữ lại thanh nav trắng khi cuộn, thanh navy trôi đi cho đỡ chiếm chỗ.
     Cách làm: cho cả header dính ở mốc âm đúng bằng chiều cao thanh navy, phần
     navy nằm khuất trên mép màn hình còn thanh nav trắng dừng đúng ở top 0. */
  .header-section{ top:calc(-1 * var(--strip-h)); }
}

/* Neo trong trang phải trừ đi phần header đang che, nếu không tiêu đề bị khuất. */
[id]{ scroll-margin-top:70px; }
@media (max-width:767px){ [id]{ scroll-margin-top:64px; } }
@media (min-width:992px){ [id]{ scroll-margin-top:92px; } }

/* ---- Nút đổi ngôn ngữ trong nav (Daniel chốt 2026-08-14) ----
   Trước đây là dropdown nằm ở strip trên cùng, mà strip bị ẩn dưới 768px nên khách
   dùng điện thoại không có đường sang bản kia. Nay là nút thường trong thanh nav,
   đứng trước nút Nhận báo giá, hiện ở MỌI bề rộng.
   Cờ trên nút là cờ của ngôn ngữ SẼ CHUYỂN SANG, không phải ngôn ngữ đang xem. */
.nav-lang{
  display:inline-flex; align-items:center; gap:7px;
  height:40px; padding:0 12px; margin-right:12px;
  border:1px solid #E3DED2; border-radius:10px;
  color:#001B4D; text-decoration:none;
  font-size:0.8125rem; font-weight:600; letter-spacing:.04em;
  background:#FFFFFF; transition:background-color .18s ease, border-color .18s ease;
}
.nav-lang img{ width:20px; height:20px; border-radius:6px; display:block; }
.nav-lang:hover{ background:#F6F2EA; border-color:#C9861F; color:#001B4D; }
.nav-lang:focus-visible{ outline:2px solid #E8A237; outline-offset:2px; }
.nav-lang:active{ background:#F0EBE1; }

@media (max-width:991px){
  /* Trên điện thoại thanh nav chỉ còn logo + cờ + hamburger, cho nút cao 44px cho dễ bấm */
  .nav-lang{ height:44px; margin-right:8px; padding:0 10px; }
}
@media (max-width:360px){
  /* Máy rất hẹp: bỏ chữ EN/VI, giữ mỗi lá cờ cho khỏi chật */
  .nav-lang span{ display:none; }
  .nav-lang{ padding:0 10px; }
}