/* ============================================================================
   KIỂU DÁNG CHUNG — THẾ GIỚI "VẬN ĐƠN B/L" (Mark chọn 15/11/2026)
   Giấy biểu mẫu #fbfaf6 · kẻ ô xanh vận đơn #1d3f8f · mực #14171c · mực dấu tím #7b2a86 (CHỈ cho bằng chứng có đóng dấu).
   Chữ: Archivo (hẹp cho tiêu đề, thường cho thân bài) · Courier Prime chỉ cho giá trị "đánh máy" (size, MOQ, thời gian, số chứng từ, ô bảng).
   Ô vuông kẻ chỉ mảnh, nhãn ô chữ hoa nhỏ màu xanh. Không bo tròn, không bóng mềm, không gradient, không emoji.
   Chuyển động: chỉ MỘT — con dấu SHIPPED ON BOARD đóng xuống tờ B/L đầu trang chủ. Còn lại đứng yên.
   Bản cũ (kiểu "game") nằm trong git: git show HEAD:public/assets/style.css
   ============================================================================ */
/* PHÔNG TỰ LƯU (15/11, bỏ Google Fonts vì GDPR — khách Đức): Archivo (variable, độ rộng 75–100%, đậm 400–800) + Courier Prime 400/700,
   chỉ tập chữ latin · latin-ext · vietnamese. Cả hai giấy phép SIL Open Font License 1.1 (cho dùng, nhúng, phát hành lại). */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; src: url(fonts/archivo-400-800-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; src: url(fonts/archivo-400-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; src: url(fonts/archivo-400-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/courier-prime-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/courier-prime-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/courier-prime-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/courier-prime-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{
  /* 15/11 trưa — Mark chọn MOSAIC: giấy kem · xanh rừng · đồng thau (bản B/L cũ: git show f47b7aa:public/assets/style.css) */
  --paper:#f3eee2; --sheet:#faf7ef; --desk:#e8e1d1; --rule:#1d3a2b; --rule-2:#bdb9a3; --tint:#e6e1cf;
  --ink:#18231c; --muted:#4f5a50; --stamp:#8a6420; --stamp-tint:#f1e6cc;
  --forest:#18231c; --brass:#e0c288; --cream:#ece6d8;
  --max:1180px;
  --f-disp:"Newsreader",Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho","Songti SC",serif;
  --f-sans:"Manrope","Archivo","Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  /* Mosaic: bỏ chữ đánh máy Courier, số liệu dùng chữ thân bài + số đều cột (tabular-nums) */
  --f-type:"Manrope","Archivo","Courier New",Courier,"Hiragino Sans","PingFang SC",monospace;
  /* biểu tượng dùng trong CSS (cùng họ nét Lucide 1.75 với assets/ic.svg) */
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ic-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ic-zoom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E");
  --ic-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  --ic-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E");
  --ic-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 10 5 5-5 5'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E");
}

/* ---------- Nền tảng ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px;accent-color:var(--rule);scrollbar-color:var(--rule-2) var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--f-sans);font-stretch:100%;caret-color:var(--rule);text-rendering:optimizeLegibility}
::selection{background:#c9d5ef;color:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--rule);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ke);outline-offset:3px}
h1,h2,h3{line-height:1.08;margin:0 0 .5em;font-weight:800;font-stretch:82%;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.55rem,3vw,2.3rem);margin-top:0}
h3{font-size:1.2rem;font-stretch:88%}
p{margin:0 0 1em}
:lang(ja) :is(h1,h2,h3),:lang(zh-Hans) :is(h1,h2,h3){letter-spacing:0;font-weight:700;line-height:1.25}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--sheet);padding:8px 12px;z-index:60;border:2px solid var(--ke)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.t{font-family:var(--f-type);font-variant-numeric:tabular-nums}
svg.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
/* mũi tên "xem tiếp" và nút chạy: biểu tượng nét vẽ bằng CSS (thay ký tự → ▶) */
i.tiep,i.chay{display:inline-block;width:1em;height:1em;margin-left:.3em;vertical-align:-.14em;background:currentColor;-webkit-mask:var(--ic-arrow) center/contain no-repeat;mask:var(--ic-arrow) center/contain no-repeat}
i.chay{margin:0 .35em 0 0;-webkit-mask:var(--ic-play) center/contain no-repeat;mask:var(--ic-play) center/contain no-repeat}
:lang(ja) h1{word-break:auto-phrase}
/* nhãn ô kiểu vận đơn: chữ hoa nhỏ, giãn chữ, màu xanh */
.bl-nhan,th{font:700 .76rem/1.3 var(--f-sans);font-stretch:100%;letter-spacing:.14em;text-transform:uppercase;color:var(--rule)}
.bl-nhan{display:block;margin:0 0 6px}

/* ---------- Đầu trang ---------- */
.top{background:var(--paper);border-bottom:2px solid var(--ke);position:sticky;top:0;z-index:30}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:nowrap}
.logo{font-weight:800;font-stretch:78%;font-size:1.3rem;letter-spacing:.04em;color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1.05}
.logo small{display:block;max-width:215px;white-space:normal;font:700 .62rem/1.3 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rule)} /* khẩu hiệu dài (es/fr) xuống 2 dòng để menu đủ chỗ ở ≥1181px */
.nav{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;font-size:.9rem}
.ds-menu{display:flex;gap:12px;align-items:center}
.ds-menu a{white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:600}
.ds-menu a:hover{color:var(--rule);text-decoration:underline}
.nav a.btn{color:#fff;white-space:nowrap}
.nut-menu{display:none;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:.9rem;padding:8px 12px;border:1px solid var(--ke);border-radius:0;background:var(--paper);color:var(--ink);cursor:pointer}
.nut-menu .gach{display:grid;gap:3px}.nut-menu .gach i{display:block;width:16px;height:2px;background:currentColor}
.nut-menu[aria-expanded="true"]{background:var(--tint)}
.nut-menu[aria-expanded="true"] .gach i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nut-menu[aria-expanded="true"] .gach i:nth-child(2){opacity:0}
.nut-menu[aria-expanded="true"] .gach i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.ic{flex:none;vertical-align:-3px}
/* nút đổi tiếng */
.chon-tieng{position:relative}
.chon-tieng summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid var(--ke);font:700 .85rem var(--f-type);color:var(--ink);background:var(--paper);white-space:nowrap}
.chon-tieng summary::-webkit-details-marker{display:none}
.chon-tieng[open] summary{background:var(--tint)}
.chon-tieng ul{position:absolute;right:0;top:calc(100% + 4px);z-index:40;margin:0;padding:0;list-style:none;background:var(--sheet);border:1px solid var(--ke);min-width:160px}
.chon-tieng li+li{border-top:1px solid var(--tint)}
.chon-tieng li a{display:block;padding:9px 12px;text-decoration:none;color:var(--ink)}
.chon-tieng li a:hover{background:var(--tint)}
.chon-tieng li a[aria-current]{font-weight:800;color:var(--rule);background:var(--tint)}
.ds-menu .menu-bao-gia{display:none}
/* màn hẹp (hoặc JS đo thấy không vừa) → 5 link gom vào nút Menu */
@media (max-width:1180px){
  html.js .nut-menu{display:inline-flex}
  html.js .ds-menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:2px solid var(--ke);padding:4px 16px 14px;z-index:20}
  html.js .ds-menu.mo{display:flex}
  html.js .ds-menu a{padding:12px 2px;border-bottom:1px solid var(--rule-2);font-size:1rem}
  html.js .ds-menu a:last-child{border-bottom:0}
  .top .wrap{position:relative}
  html:not(.js) .top .wrap,html:not(.js) .nav,html:not(.js) .ds-menu{flex-wrap:wrap}
}
html.js .top.hep .nut-menu{display:inline-flex}
html.js .top.hep .ds-menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:2px solid var(--ke);padding:4px 16px 14px;z-index:20}
html.js .top.hep .ds-menu.mo{display:flex}
html.js .top.hep .ds-menu a{padding:12px 2px;border-bottom:1px solid var(--rule-2);font-size:1rem}
html.js .top.hep .ds-menu a:last-child{border-bottom:0}
.top.hep .wrap{position:relative}
@media (max-width:700px){.logo small{display:none}}
@media (max-width:560px){
  .top .wrap{gap:8px;min-height:56px}
  .nav{gap:6px}
  .nav a.btn{padding:8px 12px;font-size:.85rem}
  .nut-menu{padding:8px 10px;font-size:0;gap:0}
  .chon-tieng summary{padding:7px 8px}
  .chon-tieng ul{right:auto;left:auto;right:0}
}
@media (max-width:480px){
  .nav > a.btn{display:none}
  .ds-menu .menu-bao-gia{display:block;margin-top:10px;text-align:center;background:var(--rule);color:#fff!important;font-weight:700;border-bottom:0!important;padding:12px!important}
}
@media (max-width:380px){.logo{font-size:1.12rem}}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--rule);color:#fff;padding:12px 18px;border:1.5px solid var(--ke);border-radius:0;text-decoration:none;font:700 1rem/1.2 var(--f-sans);font-stretch:92%;letter-spacing:.01em;cursor:pointer}
.btn:hover{background:var(--ink);border-color:var(--ink);text-decoration:none}
.btn.alt,.btn.wa{background:transparent;color:var(--rule)}
.btn.alt:hover,.btn.wa:hover{background:var(--tint);color:var(--rule);border-color:var(--ke)}
.btn.da-chep::before{content:"";width:1em;height:1em;background:currentColor;-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
button:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* ---------- Khối nội dung = các "tờ" của bộ chứng từ ---------- */
main > section{padding:56px 0;border-top:1px solid var(--ke)}
main > section:first-child{border-top:0}
section.soft{background:var(--paper)}
section{scroll-margin-top:76px}
.lead{font-size:1.12rem;line-height:1.55;color:var(--muted);max-width:62ch}
.hero{display:grid;gap:32px;align-items:center;grid-template-columns:1.1fr .9fr}
.hero > img,.hero > figure img{border:1px solid var(--ke)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid > img{border:1px solid var(--ke)}
/* thẻ = ô kẻ của biểu mẫu: cạnh nhau thì chung đường kẻ */
.grid:has(> .card){gap:0}
.card{background:var(--sheet);border:1px solid var(--ke);margin:0 -1px -1px 0;padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card > img:first-child{margin:-18px -18px 6px;width:calc(100% + 36px);max-width:none;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--ke)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card h3,.card h2.h2-the{font-size:1.25rem;font-stretch:85%;margin:0}
.card .moq{font:700 .95rem var(--f-type);color:var(--rule)}
.card a.more{margin-top:auto;font-weight:700}
.the-dau{display:flex;align-items:center;gap:10px}
/* nhãn đặc điểm: dãy ô đánh máy có dấu tick nét */
.chips{display:flex;flex-wrap:wrap;margin:14px 0 20px;padding:0;list-style:none;border-left:1px solid var(--ke);border-top:1px solid var(--ke)}
.chips li{position:relative;border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:7px 12px 7px 32px;font:400 .95rem/1.35 var(--f-sans);background:var(--sheet);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.chips li::before{content:"";position:absolute;left:11px;top:.62em;width:14px;height:14px;background:var(--rule);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
ul.tick{list-style:none;padding:0;margin:0;display:grid;gap:6px}
ul.tick li{padding-left:26px;position:relative;font-size:.97rem}
ul.tick li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;background:var(--rule);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
/* các bước có thứ tự (thứ tự là thông tin) */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;border-top:1px solid var(--ke)}
.steps li{position:relative;padding:14px 4px 14px 64px;border-bottom:1px solid var(--rule-2);min-height:54px}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:4px;top:12px;width:42px;height:30px;border:1px solid var(--ke);display:grid;place-items:center;font:700 .95rem var(--f-type);color:var(--rule);background:var(--sheet)}
.steps li.bam-duoc{cursor:pointer}
.steps li.bam-duoc:hover{background:var(--tint)}
.steps li.xong{background:var(--tint)}
.steps li.xong::before{content:"";background:var(--rule);-webkit-mask:var(--ic-check) center/18px no-repeat;mask:var(--ic-check) center/18px no-repeat}
.note{background:var(--tint);border:1px solid var(--ke);padding:12px 14px;font-size:.96rem}
.chi-em{font-size:.93rem;color:var(--muted);margin:-4px 0 14px}
.bai-meta{font:400 .9rem var(--f-type);color:var(--muted);margin:-.2rem 0 1rem}
.trang-404{text-align:center;padding:40px 0}
.muc-ai{font-size:.92rem;color:var(--muted);margin:4px 0 0}

/* ---------- Bảng ---------- */
.table-wrap{overflow-x:auto;background:var(--sheet);border:1px solid var(--ke)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
th,td{padding:10px 12px;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:top}
thead th{background:var(--tint);border-bottom:1px solid var(--ke)}
tbody th{font:600 .97rem/1.4 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--ink)}
td{font-family:var(--f-type);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
tr:last-child > *{border-bottom:0}
tr.cap-sang td,tr.cap-sang th{background:var(--tint);font-weight:700}
#terms th[scope=row]{text-align:left;white-space:nowrap;padding-right:18px}
/* nút chọn size (trang sản phẩm) */
.cap-chon{display:flex;flex-wrap:wrap;margin:0 0 -1px;padding:0}
.cap-chon button{font:700 .95rem var(--f-type);min-width:52px;padding:8px 14px;border:1px solid var(--ke);margin:0 -1px 0 0;border-radius:0;background:var(--sheet);color:var(--rule);cursor:pointer}
.cap-chon button:hover{background:var(--tint)}
.cap-chon button[aria-pressed=true]{background:var(--rule);color:#fff}

/* ---------- Biểu mẫu ---------- */
form.quote{background:var(--sheet);border:1px solid var(--ke);padding:20px;display:grid;gap:14px}
form.quote label,.form-nhanh label{font:700 .76rem/1.3 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rule);display:grid;gap:5px}
input,select,textarea{font:400 1rem/1.4 var(--f-sans);color:var(--ink);padding:10px 11px;border:1px solid var(--ke);border-radius:0;background:var(--sheet);width:100%;min-width:0;letter-spacing:0;text-transform:none}
input::placeholder,textarea::placeholder{color:#5d667a;font-family:var(--f-sans)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ke);outline-offset:1px}
select{appearance:none;-webkit-appearance:none;padding-right:34px;background:var(--sheet) right 10px center/16px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3f8f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
fieldset{border:1px solid var(--ke);padding:10px 12px;margin:0;min-width:0}
legend{font:700 .76rem var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rule);padding:0 6px}
fieldset label{font:400 .97rem/1.4 var(--f-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;display:flex!important;align-items:center;gap:9px;padding:3px 0}
fieldset input{width:18px!important;height:18px;flex:none}
.row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.quote details.them-y,details.dieu-kien{border-top:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:0}
.quote details.them-y summary,details.dieu-kien summary{list-style:none;cursor:pointer;font-weight:700;color:var(--ink);padding:12px 36px 12px 2px;position:relative}
.quote details.them-y summary::-webkit-details-marker,details.dieu-kien summary::-webkit-details-marker{display:none}
.quote details.them-y summary::after,details.dieu-kien summary::after{content:"";position:absolute;right:6px;top:13px;width:20px;height:20px;background:var(--rule);-webkit-mask:var(--ic-chevron) center/contain no-repeat;mask:var(--ic-chevron) center/contain no-repeat}
.quote details.them-y[open] summary::after,details.dieu-kien[open] summary::after{transform:rotate(180deg)}
details.dieu-kien{margin:0 0 16px}
details.dieu-kien p{margin:0 0 12px}
.quote details.them-y>:not(summary){margin-left:2px;margin-right:2px}
.quote details.them-y[open]{padding-bottom:12px}
.quote details.them-y>*+*{margin-top:10px}
.gui-xong[hidden]{display:none}
.gui-xong{background:var(--tint);border:1px solid var(--ke);padding:14px;display:grid;gap:8px}
.gui-xong textarea{font:13px/1.5 var(--f-type)}

/* ---------- Hỏi đáp (hộp xổ ra) ---------- */
.hoi-dap{display:grid;gap:0;border-top:1px solid var(--ke)}
.hoi-dap details{border-bottom:1px solid var(--rule-2);padding:0}
.hoi-dap summary{list-style:none;cursor:pointer;font-weight:700;padding:14px 40px 14px 2px;position:relative}
.hoi-dap summary::-webkit-details-marker{display:none}
.hoi-dap summary::after{content:"";position:absolute;right:6px;top:15px;width:20px;height:20px;background:var(--rule);-webkit-mask:var(--ic-chevron) center/contain no-repeat;mask:var(--ic-chevron) center/contain no-repeat}
.hoi-dap details[open] summary::after{transform:rotate(180deg)}
.hoi-dap summary:hover{color:var(--rule)}
.hoi-dap details p{margin:0 0 14px;padding:0 2px;max-width:72ch}

/* ---------- Chân trang ---------- */
footer{background:var(--rule);color:#e8edf8;padding:40px 0 44px;font-size:.93rem;line-height:1.65}
footer strong{font-stretch:85%;font-size:1.02rem;color:#fff}
footer a{color:#fff}
footer .grid{grid-template-columns:2fr 1fr 1fr;gap:28px}

/* ---------- Nút liên hệ nổi ---------- */
.noi-lh{position:fixed;right:14px;bottom:14px;z-index:50;display:flex;gap:0}
.noi-lh a{display:inline-block;padding:10px 14px;font-weight:700;font-size:.85rem;white-space:nowrap;text-decoration:none;border:1.5px solid var(--ke);margin-left:-1.5px}
.noi-mau{background:var(--rule);color:#fff}
.noi-wa{background:var(--paper);color:var(--rule)}
.noi-lh a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:600px){
  .noi-lh{left:0;right:0;bottom:0;padding:8px;background:var(--paper);border-top:1px solid var(--ke)}
  .noi-lh a{flex:1;text-align:center;padding:10px 8px}
  body{padding-bottom:var(--day-noi,64px)}
}
@media print{.noi-lh{display:none}}

/* ---------- Hộp xem ảnh phóng to ---------- */
.hop-anh{position:fixed;inset:0;z-index:1000;background:rgba(20,23,28,.9);display:flex;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.hop-anh img{max-width:min(92vw,900px);max-height:86vh;width:auto;background:#fff;border:6px solid var(--paper)}
.hop-anh button{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:6px;background:var(--paper);color:var(--ink);border:1.5px solid var(--paper);border-radius:0;font:700 .95rem var(--f-sans);padding:8px 14px;cursor:pointer}
.hop-anh button:hover{background:var(--tint)}

/* =========================================================================
   TRANG CHỦ — ĐẦU TRANG LÀ MỘT TỜ VẬN ĐƠN (bố cục theo bản phác Mark chọn)
   ========================================================================= */
main > section.bl-dau{background:var(--desk);padding:20px 0 36px;border-top:0}
.bl-to{position:relative;background:var(--paper);border:2px solid var(--ke);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,340px);
  grid-template-areas:"tieu tieu notify" "ship port notify" "hang hang notify" "anh anh notify"}
.bl-o{border:1px solid var(--ke);margin:0 -1px -1px 0;padding:12px 18px;min-width:0}
.bl-tieu{grid-area:tieu;padding:20px 22px 16px}
.bl-ship{grid-area:ship}.bl-port{grid-area:port}.bl-hang{grid-area:hang;padding-bottom:4px}
.bl-notify{grid-area:notify;border-left:2px solid var(--ke);padding:18px 20px;display:flex;flex-direction:column;gap:9px;background:var(--sheet)}
.bl-anh{grid-area:anh}
.bl-khau{margin:0 0 10px;font-size:clamp(2.2rem,4.6vw,4.1rem);font-weight:800;font-stretch:75%;line-height:.95;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.bl-khau > span{display:block}
:lang(ja) .bl-khau,:lang(zh-Hans) .bl-khau{font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.15;letter-spacing:0;font-weight:700}
.bl-dau h1.bl-phu{margin:0 0 8px;font-size:1.28rem;font-stretch:90%;font-weight:700;line-height:1.25;letter-spacing:0;color:var(--rule);max-width:46ch;hyphens:manual}
.bl-dau .lead{margin:0;font-size:1.02rem;max-width:62ch}
.bl-o p.t{margin:0;font-size:.98rem;line-height:1.45;overflow-wrap:anywhere}
.bl-port .ic{width:1em;height:1em;vertical-align:-.12em;color:var(--rule)}
/* bảng mô tả hàng */
.bl-hang .table-wrap{border:0;background:none;overflow:visible}
.bl-hang table{min-width:0;font-size:.97rem}
.bl-hang thead th{background:none;border-bottom:1px solid var(--ke);padding:3px 8px 5px;font-size:.76rem;white-space:nowrap}
.bl-hang td,.bl-hang tbody th{padding:5px 8px;border-bottom:1px dashed var(--rule-2);vertical-align:baseline}
.bl-hang tr:last-child > *{border-bottom:0}
.bl-hang td.t{color:var(--muted)}
.bl-hang td.so{color:var(--ink);font-weight:700}
.bl-hang tbody th a{color:var(--ink);text-decoration:none;font-weight:700;font-stretch:90%}
.bl-hang tbody th a:hover{color:var(--rule);text-decoration:underline}
.bl-hang thead th:first-child,.bl-hang td:first-child{width:3.2em}
.bl-sgs{display:inline-block;border:1.5px solid var(--stamp);color:var(--stamp);font:700 .76rem/1.25 var(--f-sans);padding:2px 6px;letter-spacing:.02em}
/* ô Notify party: form + đặc điểm người gửi bên dưới */
.bl-notify-h{font-size:1.7rem;font-stretch:80%;margin:0 0 2px}
.form-nhanh{display:grid;gap:9px}
.form-nhanh .btn{width:100%;margin-top:4px;padding:14px 16px;font-size:1.04rem}
.bl-ghi{margin-top:10px;padding-top:12px;border-top:1px solid var(--ke)}
.bl-ghi .chips{margin:4px 0 12px;flex-direction:column}
.bl-ghi .chips li{background:var(--paper);font-size:.9rem}
.bl-nut{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.bl-nut .btn{padding:9px 12px;font-size:.92rem}
.bl-anh-hang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bl-anh figure{margin:0}
.bl-anh img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--ke)}
.bl-anh figcaption{font-size:.86rem;line-height:1.35;color:var(--muted);margin-top:5px}
/* CON DẤU — chuyển động duy nhất của cả web: đóng xuống một lần khi mở trang */
.bl-tem{grid-area:tieu;justify-self:end;align-self:start;margin:20px 24px 0 0;position:relative;z-index:2;display:block;text-decoration:none;color:var(--stamp);transform:rotate(-8deg)}
.bl-tem span[aria-hidden]{display:block;border:4px double var(--stamp);padding:8px 16px;font:800 1.3rem/1 var(--f-sans);font-stretch:80%;letter-spacing:.12em;text-transform:uppercase;text-align:center;background:rgba(251,250,246,.72);mix-blend-mode:multiply}
.bl-tem:hover span[aria-hidden]{background:var(--stamp-tint)}
.bl-tem:focus-visible{outline-offset:6px}
@media (prefers-reduced-motion:no-preference){
  .js .bl-tem span[aria-hidden]{animation:dong-dau .55s cubic-bezier(.16,1,.3,1) .45s both}
  @keyframes dong-dau{from{opacity:.25;transform:rotate(-6deg) scale(1.45)}to{opacity:1;transform:none}}
}
@media (max-width:1100px){.bl-tem span[aria-hidden]{font-size:1.05rem;padding:6px 12px}}
@media (max-width:860px){
  .bl-to{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tieu tieu" "ship port" "hang hang" "notify notify" "anh anh"}
  .bl-notify{border-left:1px solid var(--ke);border-top:2px solid var(--ke)}
}
@media (max-width:700px){
  main > section.bl-dau{padding:10px 0 28px}
  .bl-to{grid-template-columns:minmax(0,1fr);grid-template-areas:"tieu" "ship" "port" "hang" "notify" "anh"}
  .bl-tieu{padding:18px 14px 16px}
  .bl-o{padding:12px 14px}
  .bl-tem{grid-area:port;align-self:end;margin:0 10px -14px 0;transform:rotate(-6deg)}
  .bl-tem span[aria-hidden]{font-size:1rem;padding:6px 12px}
  .bl-anh-hang{grid-template-columns:1fr 1fr}
  .bl-anh figure:first-child{grid-column:1/-1}
  .bl-hang table{font-size:.92rem}
  .bl-hang thead th:nth-child(4),.bl-hang td:nth-child(4){display:none}
}

/* dải 4 loại khách → hàng ô biểu mẫu */
.dai-khach{background:var(--paper);border-top:1px solid var(--ke)}
main > section.dai-khach{padding:0}
.dai-khach .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;border-left:1px solid var(--ke)}
.o-khach{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:18px;color:var(--ink);text-decoration:none;border-right:1px solid var(--ke);min-width:0}
.o-khach:hover{background:var(--tint)}
.o-khach strong{font-size:1.05rem;font-stretch:88%;grid-column:1;overflow-wrap:anywhere;hyphens:auto}
.o-khach span{font-size:.9rem;color:var(--muted);grid-column:1;overflow-wrap:anywhere;hyphens:auto}
.o-khach i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;color:var(--rule)}
/* hai lối rẽ FBA / thương hiệu riêng */
.loi-re{position:relative}
.loi-re-ic{position:absolute;top:18px;right:18px;color:var(--rule)}
.loi-re-ic .ic{width:30px;height:30px}
.loi-re h2{padding-right:44px}

/* =========================================================================
   ĐẦU CÁC TRANG TRONG = MỘT TỜ CHỨNG TỪ (giấy trên nền bàn, kẻ viền xanh) + hàng ô trường
   ========================================================================= */
main > section:first-child:not(.bl-dau){background:var(--desk);padding:20px 0 34px;border-top:0}
main > section:first-child:not(.bl-dau) > .wrap{background:var(--paper);border:2px solid var(--ke);padding:26px 24px;width:calc(100% - 32px);max-width:calc(var(--max) - 32px)}
main > section:first-child:not(.bl-dau) > .wrap.hero{align-items:start}
.to-truong{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:18px 0 6px;border-left:1px solid var(--ke);border-top:1px solid var(--ke)}
.to-o{border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:10px 14px;min-width:0;background:var(--sheet)}
.to-o p.t{margin:0;font-size:.95rem;line-height:1.4;overflow-wrap:anywhere}
.to-bl{grid-row:1/span 3;grid-column:-2/-1;align-self:stretch;margin:0;padding:10px;border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);background:var(--sheet)}
.to-truong:has(.to-bl){grid-template-columns:repeat(2,minmax(0,1fr)) minmax(150px,220px)}
.to-truong:has(.to-bl) .to-o{grid-column:span 2}
.to-bl a{position:relative;display:block;overflow:hidden}
.to-bl img{width:100%;height:170px;object-fit:cover;object-position:top;border:1px solid var(--rule-2)}
.to-bl figcaption{font-size:.84rem;color:var(--muted);margin-top:6px}
.to-dau > .to-tieu{border:0;padding:0;background:none;margin-bottom:4px}
@media (max-width:600px){
  main > section:first-child:not(.bl-dau) > .wrap{padding:18px 14px;width:calc(100% - 20px)}
  .to-truong:has(.to-bl){grid-template-columns:minmax(0,1fr)}
  .to-truong:has(.to-bl) .to-o,.to-bl{grid-column:auto;grid-row:auto}
  .to-bl img{max-height:260px}
}
/* bảng "Order facts" ở trang sản phẩm: nhãn | giá trị */
.bang-truong table{min-width:0}
.bang-truong tbody th{width:30%;background:var(--tint);font:700 .8rem/1.35 var(--f-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--rule);overflow-wrap:anywhere;hyphens:auto}
#lead-time table,#moq table{min-width:0}
#lead-time :is(th,td),#moq :is(th,td){overflow-wrap:anywhere;hyphens:auto}
@media (max-width:480px){#lead-time :is(th,td),#moq :is(th,td){padding:8px}}
.bang-truong td{line-height:1.55;font-family:var(--f-sans)}
.bai-h{margin:26px 0 8px}
.bai-ds{margin:0;padding:0;list-style:none;border-top:1px solid var(--ke)}
.bai-ds li{border-bottom:1px solid var(--rule-2);padding:10px 2px}
@media (max-width:600px){.bang-truong tbody th{width:38%}}
@media (max-width:480px){.bang-truong table,.bang-truong tbody,.bang-truong tr,.bang-truong th,.bang-truong td{display:block;width:auto}.bang-truong tr{border-bottom:1px solid var(--ke)}.bang-truong tbody th,.bang-truong td{border-bottom:0}}
/* tiêu đề "Request a quote" trên mẫu: chỉ hiện ở điện thoại (mẫu lên trước phần chữ) */
.form-h{display:none;margin:0 0 4px}
@media (max-width:820px){.form-h{display:block}}

/* ---------- Ảnh thật: lưới, hàng ảnh có chú thích ---------- */
.luoi-that{margin-top:14px}
.luoi-that .luoi-h,.luoi-that h3{font:700 .76rem var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--rule);margin:0 0 8px}
.luoi-that ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.luoi-that img,.luoi-that .o-clip video{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--ke);background:var(--sheet)}
.luoi-that .o-clip video{background:var(--ink)}
.luoi-that.luoi-doc ul{grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px}
.luoi-that.luoi-doc .o-clip video{aspect-ratio:9/16}
.luoi-that.luoi-3 ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.luoi-that + .luoi-that{margin-top:24px}
@media (max-width:700px){.luoi-that ul{grid-template-columns:repeat(2,minmax(0,1fr))}.luoi-that.luoi-doc ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
.canh-sp-boc{padding:8px 0 28px}
main > section.canh-sp-boc{border-top:0}
/* ảnh có chú thích (trước là "polaroid" xoay lệch) → ảnh đính kèm kẻ khung thẳng */
.pola{margin:0;background:var(--sheet);border:1px solid var(--ke);padding:8px}
.pola img{aspect-ratio:4/3;object-fit:cover;width:100%}
.pola figcaption{margin-top:8px;font-size:.88rem;line-height:1.35;color:var(--muted)}
.luoi-pola .pola-hang{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ab-3 .pola-hang{grid-template-columns:repeat(3,minmax(0,1fr))}
img.anh-that,.album .pola img,.luoi-pola .pola img,.pf-anh .pola img{cursor:zoom-in}
img.anh-that:focus-visible,.album .pola img:focus-visible,.pf-anh .pola img:focus-visible{outline:2px solid var(--ke);outline-offset:3px}
.anh-that figure{margin:0}
.anh-that img{aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--ke)}
.anh-that figcaption{font-size:.9rem;color:var(--muted);margin-top:6px}
@media (max-width:820px){.luoi-pola .pola-hang{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.ab-3 .pola-hang{grid-template-columns:1fr}#terms th[scope=row]{white-space:normal}}
/* trang sản phẩm: tiêu đề */
.tieu-de-sp{display:block}
.bt{display:none}

/* =========================================================================
   TRANG ĐƠN GHÉP — sơ đồ gom hàng, chặng FOB/CIF/DAP, cỡ đơn: kẻ ô như biểu mẫu, không còn hình vẽ hoạt hình
   ========================================================================= */
/* sơ đồ: 6 thùng có tên → 1 container → 1 vận đơn */
.so-do{list-style:none;margin:8px 0 22px;padding:0;display:grid;grid-template-columns:1.25fr 1fr .8fr;border-left:1px solid var(--ke);border-top:1px solid var(--ke);counter-reset:hang}
.so-do > li{position:relative;border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:14px 16px 16px;background:var(--sheet);min-width:0}
.so-do > li + li::before{content:"";position:absolute;left:-12px;top:50%;width:22px;height:22px;margin-top:-11px;background:var(--rule);-webkit-mask:var(--ic-arrow) center/contain no-repeat;mask:var(--ic-arrow) center/contain no-repeat;z-index:1}
.so-do-buoc{display:block;font:700 .8rem/1.3 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--rule);margin-bottom:12px}
.so-do-hang{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.so-do-hang li{counter-increment:hang;border:1px solid var(--ke);padding:6px 8px 6px 34px;position:relative;font-size:.9rem;line-height:1.25;min-height:40px;display:flex;align-items:center;overflow-wrap:anywhere;hyphens:auto}
.so-do-hang li::before{content:counter(hang,decimal-leading-zero);position:absolute;left:6px;top:6px;font:700 .8rem var(--f-type);color:var(--rule)}
.so-do-cont{counter-reset:o;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;border:2px solid var(--ink);padding:6px;background:var(--tint)}
.so-do-cont i{counter-increment:o;aspect-ratio:3/4;border:1px solid var(--ke);background:var(--sheet);display:grid;place-items:center;font:700 .7rem var(--f-type);color:var(--rule);font-style:normal}
.so-do-cont i::before{content:counter(o,decimal-leading-zero)}
.so-do-cont span{grid-column:1/-1;text-align:center;font-size:.85rem;margin-top:4px}
.so-do-bl{border:1px solid var(--ke);padding:10px;text-align:center;background:var(--paper)}
.so-do-bl .t{display:block;font-size:1.4rem;font-weight:700;color:var(--ink)}
.so-do-bl b{display:inline-block;margin-top:8px;border:3px double var(--stamp);color:var(--stamp);font:800 .78rem/1.1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;transform:rotate(-5deg)}
@media (max-width:820px){.so-do{grid-template-columns:minmax(0,1fr)}.so-do > li + li::before{left:50%;top:-12px;margin:0 0 0 -11px;transform:rotate(90deg)}}
/* nút chọn điều kiện: hàng ô liền nhau */
.nut-dk{display:flex;flex-wrap:wrap;margin:0 0 12px}
.nut-dk button{font:700 1rem var(--f-type);padding:9px 20px;border:1px solid var(--ke);margin-right:-1px;border-radius:0;background:var(--sheet);color:var(--rule);cursor:pointer}
.nut-dk button:hover{background:var(--tint)}
.nut-dk button[aria-pressed="true"]{background:var(--rule);color:#fff}
.canh-giao{background:var(--sheet);border:1px solid var(--ke);padding:18px}
/* 5 chặng đường hàng: ngang trên máy tính, dọc trên điện thoại; chặng bên mình lo thì nền xanh nhạt + chữ xanh */
.ig-doc{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-left:1px solid var(--ke);border-top:1px solid var(--ke)}
.ig-doc li{display:flex;flex-direction:column;gap:6px;padding:12px;border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);min-width:0;position:relative}
.ig-doc li .ic svg{width:26px;height:26px;display:block;color:var(--muted)}
.ig-doc li b{display:block;font-size:1rem;overflow-wrap:anywhere;hyphens:auto}
.ig-doc li small{display:block;color:var(--muted);font-size:.88rem;line-height:1.3}
.canh-giao[data-chon="fob"] .ig-doc .d-xuong,.canh-giao[data-chon="cif"] .ig-doc .d-xuong,.canh-giao[data-chon="cif"] .ig-doc .d-bien,
.canh-giao[data-chon="dap"] .ig-doc li:not(.d-thue){background:var(--tint)}
.canh-giao[data-chon="fob"] .ig-doc .d-xuong .ic svg,.canh-giao[data-chon="cif"] .ig-doc .d-xuong .ic svg,.canh-giao[data-chon="cif"] .ig-doc .d-bien .ic svg,
.canh-giao[data-chon="dap"] .ig-doc li:not(.d-thue) .ic svg{color:var(--rule)}
.co-risk{display:none;align-self:flex-start;font:700 .76rem var(--f-type);letter-spacing:.08em;color:#fff;background:var(--ink);padding:3px 8px}
.canh-giao[data-chon="fob"] .moc-fob .co-risk,.canh-giao[data-chon="cif"] .moc-fob .co-risk,.canh-giao[data-chon="dap"] .moc-dap .co-risk{display:inline-block}
.ig-chu{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:.88rem;color:var(--muted);margin:10px 0 0}
.ig-chu span{display:inline-flex;align-items:center;gap:6px}
.ig-chu .o{display:inline-block;width:14px;height:14px;flex:none;border:1px solid var(--ke)}
.ig-chu .o.ta{background:var(--tint)}.ig-chu .o.ban{background:var(--sheet)}.ig-chu .o.rui{background:var(--ink);border-color:var(--ink)}
.loi-dk{display:none;gap:0;grid-template-columns:1fr 1fr;margin-top:12px;border-left:1px solid var(--ke);border-top:1px solid var(--ke)}
.canh-giao[data-chon="fob"] .loi-fob,.canh-giao[data-chon="cif"] .loi-cif,.canh-giao[data-chon="dap"] .loi-dap{display:grid}
.loi-dk > div{border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:10px 12px;font-size:.97rem;background:var(--sheet)}
.loi-dk .ta{background:var(--tint)}
.loi-dk .rui-ro{grid-column:1/-1}
@media (max-width:900px){.ig-doc{grid-template-columns:minmax(0,1fr)}.ig-doc li{flex-direction:row;align-items:center;gap:12px}.co-risk{margin-left:auto;align-self:center}}
/* cỡ đơn: 3 ô cạnh nhau */
.co-don{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--ke);border-top:1px solid var(--ke)}
.co-don .cd-o{display:block;border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:16px;background:var(--sheet);min-width:0}
.co-don .cd-o h3{margin-bottom:.4em;overflow-wrap:anywhere;hyphens:auto}
.co-don .cd-o p{margin:0}
.co-don > .note{grid-column:1/-1;margin:0;border:0;border-right:1px solid var(--ke);border-bottom:1px solid var(--ke)}
@media (max-width:820px){.co-don{grid-template-columns:minmax(0,1fr)}.loi-dk{grid-template-columns:1fr}}

/* =========================================================================
   TRANG ĐÓNG GÓI — ảnh thật thay hình vẽ; xưởng đóng gói: bấm bước nào hiện ảnh bước đó
   ========================================================================= */
.muc-dg .card > img,.card > .nl-anh{order:-1}
.card > .nl-anh{position:relative;margin:-18px -18px 6px;border-bottom:1px solid var(--ke)}
.card > .nl-anh img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.nl-nhan{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:var(--paper);border:1.5px solid var(--ke);padding:4px 10px;font:700 .82rem var(--f-type);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ten-hieu-o{display:grid;gap:5px;font:700 .76rem var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--rule);max-width:340px;margin:0 0 16px}
.ten-hieu-o input{font:700 1.05rem var(--f-type);text-transform:uppercase;letter-spacing:.06em;border-width:1.5px}
.dg-xuong{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.dg-anh{position:relative;margin:0;border:1px solid var(--ke);background:var(--sheet);padding:8px}
.dg-anh img{display:none;width:100%;aspect-ratio:4/3;object-fit:cover}
.dg-xuong[data-buoc="1"] .dg-anh img[data-b="1"],.dg-xuong[data-buoc="2"] .dg-anh img[data-b="2"],.dg-xuong[data-buoc="3"] .dg-anh img[data-b="3"],
.dg-xuong[data-buoc="4"] .dg-anh img[data-b="4"],.dg-xuong[data-buoc="5"] .dg-anh img[data-b="5"],.dg-xuong[data-buoc="6"] .dg-anh img[data-b="6"]{display:block}
.dg-anh .nl-nhan{left:20px;bottom:20px}
.dg-xuong:is([data-buoc="1"],[data-buoc="5"],[data-buoc="6"]) .dg-anh .nl-nhan{display:none}
@media (min-width:861px){.dg-anh{position:sticky;top:84px}}
.dg-nut{display:flex;flex-wrap:wrap;margin-bottom:12px}
.dg-nut button{font:700 1rem var(--f-type);min-width:42px;height:40px;border:1px solid var(--ke);margin-right:-1px;border-radius:0;background:var(--sheet);color:var(--rule);cursor:pointer}
.dg-nut button:hover{background:var(--tint)}
.dg-nut button[aria-pressed="true"]{background:var(--rule);color:#fff}
.dg-nut .dg-chay{padding:0 14px;font-family:var(--f-sans)}
.dg-loi{list-style:none;padding:0;margin:0;border-top:1px solid var(--ke)}
.dg-loi li{border-bottom:1px solid var(--rule-2);padding:10px 8px;font-size:.96rem;color:var(--muted);cursor:pointer}
.dg-loi li .ai{display:block;font-size:.88rem;margin-top:4px}
.dg-ghi{font-size:.86rem;color:var(--muted);margin:10px 0}
.dg-xuong[data-buoc="1"] .dg-loi li[data-b="1"],.dg-xuong[data-buoc="2"] .dg-loi li[data-b="2"],.dg-xuong[data-buoc="3"] .dg-loi li[data-b="3"],
.dg-xuong[data-buoc="4"] .dg-loi li[data-b="4"],.dg-xuong[data-buoc="5"] .dg-loi li[data-b="5"],.dg-xuong[data-buoc="6"] .dg-loi li[data-b="6"]{color:var(--ink);background:var(--tint);outline:1px solid var(--ke);outline-offset:-1px}
@media (max-width:860px){.dg-xuong{grid-template-columns:1fr}}

/* =========================================================================
   TRANG BÁO GIÁ — bảng "hàng lên container" thành danh sách xếp hàng
   ========================================================================= */
.tro-cont{background:var(--sheet);border:1px solid var(--ke);margin-top:8px}
.tro-anh .tro-khung{position:relative}
.tro-anh .tro-khung img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--ke)}
.tro-thanh{display:none}
.qx-o{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}
.tro-anh .qx{display:flex;flex-direction:column;gap:4px;padding:8px;border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);font-size:.84rem;font-weight:600;line-height:1.2;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.tro-anh .qx img{opacity:.45;filter:grayscale(1)}
.tro-anh .qx.co img{opacity:1;filter:none}
.tro-anh .qx:nth-child(3n){border-right:0}
.tro-anh .qx.co{background:var(--tint)}
.tro-anh .qx img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.qx-trong{margin:10px 12px;font-size:.88rem;color:var(--muted)}
.tro-cont.co-hang .qx-trong{display:none}
.qx-dem{padding:10px 14px;border-top:1px solid var(--ke);font:400 .95rem var(--f-type)}
.qx-mini{display:none}
@media (max-width:820px){
  .qx-mini{display:flex;position:fixed;left:8px;right:8px;bottom:8px;z-index:20;align-items:center;gap:6px;padding:9px 12px;background:var(--paper);border:1.5px solid var(--ke);color:var(--ink);font:400 .85rem var(--f-type);transform:translateY(160%)}
  .qx-mini.hien{transform:none}
  .qx-mini.hien.nhuong{transform:translateY(160%)}
  .qx-mini i{width:14px;height:14px;border:1px solid var(--ke);flex:none}
  .qx-mini i.co{background:var(--rule)}
  .qx-mini strong{margin-left:auto;white-space:nowrap}
  body.co-mini{padding-bottom:72px}
}

/* =========================================================================
   TRANG CHỨNG TỪ — danh mục bộ chứng từ · lưới B/L đã che · SGS
   ========================================================================= */
.tui-do{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--ke);border-top:1px solid var(--ke)}
.tui-o{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 12px;align-items:start;padding:14px;border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);background:var(--sheet);color:var(--ink);text-decoration:none;min-width:0}
a.tui-o{cursor:zoom-in}
a.tui-o:hover{background:var(--tint)}
a.tui-o::after{content:"";position:absolute;top:12px;right:12px;width:16px;height:16px;background:var(--rule);-webkit-mask:var(--ic-zoom) center/contain no-repeat;mask:var(--ic-zoom) center/contain no-repeat}
.tui-icon{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ke);color:var(--rule)}
.tui-icon .ic{width:22px;height:22px}
.tui-o strong{font-size:.95rem;font-stretch:90%;line-height:1.25;padding-right:18px;overflow-wrap:anywhere;hyphens:auto}
.tui-o em{font:700 .76rem/1.3 var(--f-sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tui-o em.luon{color:var(--rule)}
@media (max-width:820px){.tui-do{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.tui-do{grid-template-columns:minmax(0,1fr)}}
.ct-luoi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ct-luoi.ct-2{grid-template-columns:repeat(2,minmax(0,300px))}
.ct-the{margin:0;background:var(--sheet);border:1px solid var(--ke);padding:8px;min-width:0}
.ct-the a{display:block}
.ct-the img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;border:1px solid var(--rule-2)}
.ct-the figcaption{font-size:.84rem;line-height:1.35;margin-top:8px;overflow-wrap:anywhere;hyphens:auto}
.ct-the figcaption .co{display:inline-block;width:22px;height:15px;box-shadow:0 0 0 1px var(--rule-2);vertical-align:-2px;margin-right:4px}
/* dấu trên mỗi B/L: mực tím, đứng yên */
.dau-the a{position:relative;overflow:hidden}
.con-dau{position:absolute;right:8%;bottom:12%;min-width:74px;padding:6px 8px;border:3px double var(--stamp);color:var(--stamp);background:rgba(251,250,246,.78);display:flex;flex-direction:column;align-items:center;font:700 .74rem/1.1 var(--f-type);transform:rotate(var(--xoay))}
.con-dau b{font:800 1.3rem/1 var(--f-sans);letter-spacing:.08em}
.ct-them{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:200px;border:1px dashed var(--ke);background:var(--sheet);color:var(--rule);font:700 1rem var(--f-sans);cursor:pointer;border-radius:0}
.ct-them b .ic{width:34px;height:34px}
.ct-them:hover{background:var(--tint)}
html.js .an-them{display:none}
html.js .ct-luoi.mo-them .an-them{display:block}
html:not(.js) .ct-them{display:none}
.ct-ghi{display:flex;align-items:center;justify-content:center;text-align:center;min-height:200px;margin:0;padding:18px;border:1px dashed var(--rule-2);color:var(--ink);font-weight:700}
html.js .ct-luoi.mo-them .ct-ghi.an-them{display:flex}
@media (max-width:900px){.ct-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}.ct-luoi.ct-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================================
   TRANG ABOUT — hồ sơ công ty kiểu chứng từ
   ========================================================================= */
/* "company on record" → bảng trường 2 cột: nhãn | giá trị */
.huy-hieu{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--ke);max-width:900px}
.hh{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:4px 24px;align-items:baseline;border-bottom:1px solid var(--rule-2);padding:12px 2px;min-width:0}
.hh-vong{display:none}
.hh h3{font-size:1.12rem;margin:0;overflow-wrap:anywhere;hyphens:auto}
.hh p{margin:0;color:var(--muted);font-size:.96rem}
@media (max-width:600px){.hh{grid-template-columns:minmax(0,1fr)}}
.vuot-goi{margin:-6px 0 6px;text-align:right;color:var(--muted);font:400 .85rem var(--f-type)}
.album{display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,330px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin}
.album .pola{scroll-snap-align:start}
/* Petfair 3 năm: dấu triển lãm + 3 ô năm */
.pf-tem{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;border:3px double var(--stamp);color:var(--stamp);padding:6px 14px;margin:0 0 22px;transform:rotate(-1.5deg);font:800 1rem var(--f-sans);letter-spacing:.1em;text-transform:uppercase}
.pf-tem b{font:700 1rem var(--f-type);letter-spacing:.04em}
.pf-nam{list-style:none;margin:0;padding:0;display:grid;align-items:start;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--ke);border-top:1px solid var(--ke)}
.pf-nam>li{background:var(--sheet);border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:16px;min-width:0;align-self:stretch}
.pf-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pf-dau b{font:700 2rem/1 var(--f-type);color:var(--ink)}
.pf-dau em{display:inline-flex;align-items:center;gap:5px;font:700 .76rem var(--f-sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);border:1.5px solid var(--stamp);padding:3px 8px}
.pf-noi{color:var(--muted);font:400 .88rem var(--f-type);margin:8px 0 14px}
.pf-anh{display:grid;gap:10px}
.pf-anh .pola img{aspect-ratio:3/2;object-position:center 35%}
@media (max-width:820px){.pf-nam{grid-template-columns:minmax(0,1fr)}}
/* 3 lô thật: mỗi lô một ô, dòng tuyến đường đánh máy */
.nhiem-vu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-left:1px solid var(--ke);border-top:1px solid var(--ke)}
.nvu-the{background:var(--sheet);border-right:1px solid var(--ke);border-bottom:1px solid var(--ke);padding:0 18px 16px;min-width:0}
.nvu-tuyen{display:flex;align-items:center;gap:10px;margin:0 -18px 14px;padding:10px 18px;border-bottom:1px solid var(--ke);font:700 1rem var(--f-type);color:var(--rule)}
.nvu-duong{flex:1;position:relative;height:0;border-top:1px dashed var(--rule-2);font-style:normal}
.nvu-duong b{position:absolute;left:50%;top:-11px;transform:translateX(-50%);background:var(--sheet);padding:0 6px;line-height:1;color:var(--rule)}
.nvu-xong{font:800 .76rem/1 var(--f-sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);border:2px double var(--stamp);padding:4px 7px;transform:rotate(-4deg);white-space:nowrap}
.nvu-the h3{margin-bottom:.3em;overflow-wrap:anywhere;hyphens:auto}
.nvu-the p{font-size:.96rem}
.nvu-len{position:relative;background:var(--tint);border:1px solid var(--ke);padding:8px 10px 8px 34px}
.nvu-len::before{content:"";position:absolute;left:10px;top:11px;width:16px;height:16px;background:var(--rule);-webkit-mask:var(--ic-corner) center/contain no-repeat;mask:var(--ic-corner) center/contain no-repeat}
@media (max-width:900px){.nhiem-vu{grid-template-columns:minmax(0,1fr)}}
/* điều kiện mua bán: các ô điều khoản */
/* điều kiện mua bán: bảng trường 2 cột (nhãn | nội dung), như "Order facts" */
.luat{display:grid;grid-template-columns:minmax(0,1fr);margin:0;border-top:1px solid var(--ke);background:var(--sheet);border-left:1px solid var(--ke);border-right:1px solid var(--ke)}
.luat > div{display:grid;grid-template-columns:minmax(0,30%) minmax(0,1fr);border-bottom:1px solid var(--ke);min-width:0}
.luat span{display:none}
.luat dt{background:var(--tint);padding:10px 12px;font:700 .8rem/1.35 var(--f-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--rule);overflow-wrap:anywhere;hyphens:auto}
.luat dd{margin:0;padding:10px 12px;color:var(--ink);font-size:.96rem}
@media (max-width:480px){.luat > div{grid-template-columns:minmax(0,1fr)}}

/* trang báo giá ≤820px: mẫu điền nằm trên cùng */
@media (max-width:820px){.hero > form.quote{order:-1}}

/* ---------- Khổ hẹp chung ---------- */
@media (max-width:820px){
  .hero,.grid,.grid.two,footer .grid,.row{grid-template-columns:minmax(0,1fr)}
  main > section{padding:40px 0}
  .dai-khach .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o-khach{border-bottom:1px solid var(--ke)}
}
@media (max-width:420px){.dai-khach .wrap{grid-template-columns:minmax(0,1fr)}}
/* chữ Đức/Pháp dài liền: cho tự ngắt, không tràn ngang */
.card,.hh,.luat > div,.nvu-the,.tui-o,.ct-the,.o-khach,.bl-o{overflow-wrap:break-word}

/* ---------- Giảm chuyển động: tắt hẳn ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* =========================================================================
   LỚP MOSAIC (Mark chọn 15/11/2026 trưa — mẫu .impeccable/mocks/decision/v5-mosaic.html)
   Tiêu đề chữ có chân mảnh (Newsreader) · thân chữ Manrope · đầu trang chủ nền xanh rừng + lưới 12 ảnh thật.
   Lớp này nằm CUỐI file để đè kiểu B/L cũ; các quy tắc B/L phía trên giữ cho trang con (ô trường, bảng).
   ========================================================================= */
h1,h2,h3{font-family:var(--f-disp);font-weight:400;font-stretch:normal;letter-spacing:-.012em;line-height:1.08}
h1{font-weight:300}
h3{font-weight:500;letter-spacing:0}
:lang(ja) :is(h1,h2,h3),:lang(zh-Hans) :is(h1,h2,h3){font-weight:600}
.t{font-family:var(--f-sans)}
.logo{font-family:var(--f-disp);font-weight:500;letter-spacing:.06em}
.btn{border-radius:2px}
/* ---- đầu trang chủ ---- */
main > section.bl-dau{background:var(--forest);color:var(--cream);padding:30px 0 44px}
.bl-to{background:none;border:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"tieu anh" "notify anh";gap:0 30px;align-items:start}
.bl-dau .bl-o{border:0;margin:0;padding:0}
.bl-tieu{padding:10px 0 22px}
.bl-khau{font-family:var(--f-disp);font-weight:300;font-stretch:normal;font-size:clamp(2.3rem,4.2vw,4.1rem);line-height:1.02;letter-spacing:-.018em;color:var(--cream);margin:0 0 18px}
.bl-khau > span:last-child{color:var(--brass)}
:lang(ja) .bl-khau,:lang(zh-Hans) .bl-khau{font-weight:500;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.2}
.bl-dau h1.bl-phu{font-family:var(--f-sans);color:var(--cream);font-size:1.12rem;font-weight:700;line-height:1.35;margin:0 0 8px;max-width:44ch}
.bl-dau .lead{color:#cfd3c8;max-width:48ch}
.bl-notify{background:var(--cream);color:var(--ink);padding:22px 22px 20px!important;border:0!important;border-radius:2px;gap:10px}
.bl-notify .bl-nhan{color:var(--stamp)}
.bl-notify-h{font-family:var(--f-disp);font-weight:400;font-size:1.75rem}
.bl-ghi{border-top:1px solid var(--rule-2)}
.bl-ghi .chips li{background:var(--sheet)}
.bl-anh.mosaic{grid-area:anh;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(86px,8.4vw,122px);gap:6px}
.o-m{margin:0;position:relative;overflow:hidden;background:#24332a}
.o-m img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.o-m:hover img{transform:scale(1.04)}
.o-m figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:.78rem;line-height:1.3;color:#f5f0e3;
  background:linear-gradient(transparent,rgba(16,24,19,.82))}
@media (prefers-reduced-motion:reduce){.o-m img{transition:none}.o-m:hover img{transform:none}}
@media (max-width:900px){
  .bl-to{grid-template-columns:minmax(0,1fr);grid-template-areas:"tieu" "anh" "notify";gap:0}
  .bl-anh.mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:4px;margin:0 0 22px}
  .bl-anh.mosaic .o-m{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .bl-anh.mosaic .a1{grid-column:1/-1;aspect-ratio:16/10}
  .bl-anh.mosaic .o-m:nth-child(n+8){display:none} /* điện thoại: 7 ô (1 to + 6 nhỏ) */
}
@media (max-width:700px){main > section.bl-dau{padding:14px 0 30px}.bl-tieu{padding:6px 0 16px}}
/* nhãn kiểu vận đơn ("Notify party", "Particulars") không hợp thế giới Mosaic → ẩn ở đầu trang chủ */
.bl-notify > .bl-nhan:first-child,.bl-ghi > .bl-nhan{display:none}
body{font-variant-numeric:tabular-nums}

/* ---- vòng sửa 1 theo người soi (15/11) ---- */
/* đầu trang xanh rừng liền một khối với màn đầu (cả web, cho đồng bộ) */
.top{background:var(--forest);border-bottom:1px solid #ece6d81f}
.top .logo{color:var(--cream)}.top .logo small{color:var(--brass)}
.top .ds-menu a{color:#e4dfd2}.top .ds-menu a:hover{color:var(--brass)}
.top .nut-menu,.top .chon-tieng summary{background:transparent;color:var(--cream);border-color:#ece6d855}
.top .chon-tieng[open] summary,.top .nut-menu[aria-expanded="true"]{background:#ece6d81a}
.top .nav a.btn{background:var(--brass);border-color:var(--brass);color:var(--forest)}
.top .nav a.btn:hover{background:var(--cream);border-color:var(--cream)}
html.js .top.hep .ds-menu{background:var(--forest);border-bottom:1px solid #ece6d833}
html.js .top.hep .ds-menu a{border-bottom-color:#ece6d81f}
/* lưới 12 ô: không ô nào hẹp hơn 2/6 cột; ảnh 6 size nằm ngang cho thấy đủ XS→XXL */
@media (min-width:901px){.bl-anh.mosaic{grid-auto-rows:clamp(64px,6.4vw,96px)}}  /* soi vòng 2: thiếu giới hạn màn hình làm chồng ô trên điện thoại */
.mosaic .a1{grid-column:1/5;grid-row:1/4}.mosaic .a2{grid-column:5/7;grid-row:1/3}.mosaic .a3{grid-column:5/7;grid-row:3/4}
.mosaic .a4{grid-column:1/3;grid-row:4/6}.mosaic .a5{grid-column:3/5;grid-row:4/6}.mosaic .a6{grid-column:5/7;grid-row:4/6}
.mosaic .a7{grid-column:1/4;grid-row:6/7}.mosaic .a12{grid-column:1/4;grid-row:7/8}.mosaic .a8{grid-column:4/7;grid-row:6/8}
.mosaic .a9{grid-column:1/3;grid-row:8/10}.mosaic .a10{grid-column:3/5;grid-row:8/10}.mosaic .a11{grid-column:5/7;grid-row:8/10}
.mosaic .a7 img{object-position:center 60%}
/* khung báo giá gọn: 2 cột × 2 hàng + nút; dấu tick thành dòng chữ nhỏ không viền */
.bl-notify{padding:20px!important}
.form-nhanh{grid-template-columns:1fr 1fr;gap:10px 12px}
.form-nhanh .btn{grid-column:1/-1}
.form-nhanh label{min-width:0}
.bl-ghi{margin-top:4px;padding-top:12px}
.bl-ghi .chips{flex-direction:row;flex-wrap:wrap;gap:4px 16px;margin:0 0 12px}
.bl-ghi .chips li{background:none;border:0;padding:0;font-size:.86rem;color:var(--muted)}
@media (max-width:900px){.bl-anh.mosaic .o-m{grid-column:auto;grid-row:auto}.bl-anh.mosaic .a1{grid-column:1/-1}}
@media (max-width:420px){.form-nhanh{grid-template-columns:1fr}}
::selection{background:var(--stamp-tint)}
.bl-to{grid-template-rows:auto 1fr}
.bl-notify{align-self:start}
/* máy tính: ô 6 size cao 2 hàng cho thấy đủ XS→XXL; ô vườn mướp vào chỗ ô đo ẩm (đo ẩm vẫn hiện trên điện thoại) */
@media (min-width:901px){
  .mosaic .a3{display:none}
  .mosaic .a12{grid-column:5/7;grid-row:3/4}
  .mosaic .a7{grid-column:1/5;grid-row:6/8}.mosaic .a8{grid-column:5/7;grid-row:6/8}
}
.bl-dau .bl-tieu{padding:8px 0 26px}
.form-nhanh{align-items:end}
.bl-ghi .chips li{padding-left:20px}.bl-ghi .chips li::before{left:0;top:.3em;width:12px;height:12px;background:var(--stamp)}
.mosaic .a7{background:#fff}.mosaic .a7 img{object-fit:contain}
.bl-ghi .chips{border:0}
/* ---- khối BẰNG CHỨNG trang chủ (4 thẻ + dải 8 vận đơn) ---- */
main > section.bang-chung{background:var(--forest);color:var(--cream);padding:72px 0 64px}
.bang-chung h2{color:var(--cream);font-size:clamp(2rem,3.6vw,3.2rem);font-weight:300;margin-bottom:28px}
.pr-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pr-the{margin:0;background:#1f2e25;display:flex;flex-direction:column}
.pr-the img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pr-the a img{object-fit:contain;background:#f5f0e3;padding:8px}
.pr-the figcaption{padding:14px 16px 18px;display:grid;gap:4px}
.pr-the b{font:400 1.35rem/1.15 var(--f-disp);color:var(--brass)}
.pr-the span{font-size:.92rem;line-height:1.45;color:#cfd3c8}
.pr-bl{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.pr-bl img{width:100%;aspect-ratio:440/622;object-fit:cover;background:#fff;transition:transform .3s}
.pr-bl a:hover img{transform:translateY(-3px)}
.pr-bl span{display:block;margin-top:6px;font-size:.8rem;color:#b5bcae}.pr-bl b{color:var(--cream);font-weight:700}
.pr-xem{margin:22px 0 0}.pr-xem a{color:var(--brass);font-weight:700}
@media (max-width:1000px){.pr-luoi{grid-template-columns:1fr 1fr}.pr-bl{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){main > section.bang-chung{padding:48px 0 44px}.pr-luoi{gap:10px}.pr-the figcaption{padding:10px 10px 12px}.pr-the b{font-size:1.1rem}.pr-the span{font-size:.84rem}}

/* =========================================================================
   VÒNG SỬA 1 (15/11, 2 người soi) — GỠ "Ô KẺ" KIỂU VẬN ĐƠN Ở MỌI TRANG
   Ô vuông viền đậm → thẻ sạch, đường chỉ nhạt; con dấu xoay → nhãn phẳng; đầu trang con → dải xanh rừng như trang chủ.
   ========================================================================= */
/* chú thích ảnh lưới đầu trang dễ đọc hơn trên ảnh sáng */
.o-m figcaption{background:linear-gradient(transparent,rgba(16,24,19,.62) 38%,rgba(16,24,19,.9));text-shadow:0 1px 2px rgba(0,0,0,.6)}
/* thẻ sản phẩm & thẻ thường */
.grid:has(> .card){gap:18px}
.card{border:0;margin:0;background:var(--sheet);box-shadow:0 1px 0 var(--rule-2)}
.card > img:first-child,.card > .nl-anh{border-bottom:0}
.card .moq{color:var(--stamp)}
.grid > img{border:0}
/* dấu tick: chữ thường, không ô */
.chips{border:0;gap:6px 20px}
.chips li{border:0;background:none;padding:2px 0 2px 22px}
.chips li::before{left:0;top:.42em;width:13px;height:13px;background:var(--stamp)}
ul.tick li::before{background:var(--stamp)}
/* lưới ảnh thật: ảnh tràn khung, không viền đôi */
.luoi-that img,.luoi-that .o-clip video{border:0}
.luoi-that .luoi-h,.luoi-that h3{color:var(--stamp)}
/* dải 4 loại khách */
.dai-khach{border-top:0;background:var(--sheet)}
.dai-khach .wrap{border-left:0;gap:0}
.o-khach{border-right:1px solid var(--rule-2)}
.o-khach:last-child{border-right:0}
.o-khach i{color:var(--stamp)}
/* ĐẦU TRANG CON: dải xanh rừng, chữ kem (đồng bộ màn đầu trang chủ) */
main > section:first-child:not(.bl-dau){background:var(--forest);color:var(--cream);padding:44px 0 48px}
main > section:first-child:not(.bl-dau) > .wrap{background:none;border:0;padding:0 16px}
main > section:first-child:not(.bl-dau) :is(h1,h2,h3){color:var(--cream)}
main > section:first-child:not(.bl-dau) p{color:#d6d9cf}
main > section:first-child:not(.bl-dau) a:not(.btn){color:var(--brass)}
main > section:first-child:not(.bl-dau) .btn{background:var(--brass);border-color:var(--brass);color:var(--forest)}
main > section:first-child:not(.bl-dau) .btn.alt,main > section:first-child:not(.bl-dau) .btn.wa{background:transparent;color:var(--cream);border-color:#ece6d866}
main > section:first-child:not(.bl-dau) .chips li{color:#d6d9cf}
main > section:first-child:not(.bl-dau) .chips li::before{background:var(--brass)}
main > section:first-child:not(.bl-dau) img{border:0}
/* ô trường (MOQ / Incoterms / Documents…) trên dải xanh: lưới chỉ mảnh màu kem */
.to-truong{border-left:0;border-top:1px solid #ece6d82e;gap:0}
.to-o{background:none;border-right:0;border-bottom:1px solid #ece6d82e;padding:12px 18px 12px 0}
main > section:first-child:not(.bl-dau) .bl-nhan{color:var(--brass)}
main > section:first-child:not(.bl-dau) .to-o p.t{color:var(--cream)}
.to-bl{border:0;background:none;padding:0}
/* con dấu xoay → nhãn phẳng dưới góc ảnh */
.con-dau{transform:none!important;border:0;background:rgba(24,35,28,.86);color:var(--cream);right:0;bottom:0;padding:5px 9px;min-width:0;flex-direction:row;gap:6px;font-weight:700;animation:none!important}
.con-dau b{font-size:.9rem}
.pf-tem{transform:none;border:0;padding:0;color:var(--stamp)}
.pf-dau em{color:var(--stamp)}
input::placeholder,textarea::placeholder{color:#7a8075}
/* soi vòng 2: trang Báo giá — khung form màu kem nằm trong dải xanh → trả chữ/nút về màu tối */
main > section:first-child:not(.bl-dau) :is(form,.gui-xong,#gui-xong) :is(h1,h2,h3){color:var(--ink)}
main > section:first-child:not(.bl-dau) :is(form,.gui-xong,#gui-xong) p{color:var(--ink)}
main > section:first-child:not(.bl-dau) :is(form,.gui-xong,#gui-xong) :is(.btn.wa,.btn.alt){color:var(--forest);border-color:var(--forest);background:transparent}
main > section:first-child:not(.bl-dau) :is(form,.gui-xong,#gui-xong) .btn:not(.wa):not(.alt){background:var(--rule);border-color:var(--ke);color:#fff}
main > section:first-child:not(.bl-dau) details.dieu-kien{border-color:#ece6d833}
main > section:first-child:not(.bl-dau) details.dieu-kien :is(summary,p,li,strong){color:var(--cream)}
main > section:first-child:not(.bl-dau) details.dieu-kien summary::after{background:var(--brass)}

/* ============================================================================
   LỚP SÁNG (15/11 chiều — Mark chê Mosaic "thô, tối, không chiều sâu"; muốn đẹp, thoáng, hiện đại, có chiều sâu)
   Nền kem sáng · xanh lá · thẻ trắng bo tròn có bóng mềm nhiều lớp · khung rộng 1240px · chữ Archivo (đã tự lưu, không tải ngoài).
   Phần A: chuyển động các cảnh vẽ bản 14/11 (chép nguyên từ git show 252b98d / 5066098:public/assets/style.css).
   Phần B: áo mới. Lớp này nằm CUỐI file nên đè lên lớp B/L + Mosaic phía trên.
   ============================================================================ */
:root{--bg:#FFFBF6;--surface:#fff;--soft:#F6F1EA;--brand:#03326A;--brand-ink:#fff;--accent:#E08A00;--line:#e9e2d5;--radius:20px;--muted:#5A5A5A}
/* --- A1. cảnh cảng · FOB/CIF/DAP · cỡ đơn (252b98d) --- */
/* --- Cảnh cảng ở trang chủ --- */
.hero.co-canh{grid-template-columns:1fr 1.15fr}
.canh-cang{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.canh-cang svg{display:block;width:100%;height:auto}
.canh-cang svg *{transform-box:fill-box}
.buoc-canh{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;margin:0;list-style:none;font-size:.85rem;border-top:1px solid var(--line)}
.buoc-canh li{padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--muted)}
.buoc-canh .b1{animation:cg-b1 14s infinite}.buoc-canh .b2{animation:cg-b2 14s infinite}.buoc-canh .b3{animation:cg-b3 14s infinite}
@keyframes cg-b1{0%,45%{background:var(--brand);color:#fff}46%,100%{background:var(--soft);color:var(--muted)}}
@keyframes cg-b2{0%,46%{background:var(--soft);color:var(--muted)}47%,86%{background:var(--brand);color:#fff}87%,100%{background:var(--soft);color:var(--muted)}}
@keyframes cg-b3{0%,86%{background:var(--soft);color:var(--muted)}87%,100%{background:var(--brand);color:#fff}}

.cg-san{animation:cg-san 14s linear infinite}
@keyframes cg-san{0%{opacity:0}2%,97%{opacity:1}99.5%,100%{opacity:0}}
.cg-cua{transform-origin:left center;transform:scaleX(0);animation:cg-cua 14s linear infinite}
@keyframes cg-cua{0%,38.6%{transform:scaleX(0)}45.7%,100%{transform:scaleX(1)}}
.cg-cua-chu{opacity:0;animation:cg-cua-chu 14s linear infinite}
@keyframes cg-cua-chu{0%,44%{opacity:0}47%,100%{opacity:1}}
.cg-xe{animation:cg-xe 14s ease-in-out infinite}
@keyframes cg-xe{0%,47.1%{transform:translateX(0)}64.3%,100%{transform:translateX(150px)}}
.cg-banh{transform-origin:center;animation:cg-banh 14s ease-in-out infinite}
@keyframes cg-banh{0%,47.1%{transform:rotate(0)}64.3%,100%{transform:rotate(720deg)}}
.cg-cont{animation:cg-cont 14s ease-in-out infinite}
@keyframes cg-cont{0%,47.1%{transform:translate(0,0)}64.3%,65.7%{transform:translate(150px,0)}72.9%{transform:translate(150px,-110px)}
  81.4%{transform:translate(400px,-110px)}85.7%,87.1%{transform:translate(400px,-8px)}97.1%,100%{transform:translate(660px,-8px)}}
.cg-cap{transform-origin:top center;opacity:0;animation:cg-cap 14s ease-in-out infinite}
@keyframes cg-cap{0%,65%{opacity:0;transform:translateX(255px) scaleY(1)}65.7%{opacity:1;transform:translateX(255px) scaleY(1)}
  72.9%{transform:translateX(255px) scaleY(.353)}81.4%{transform:translateX(505px) scaleY(.353)}
  85.7%{opacity:1;transform:translateX(505px) scaleY(.953)}86.6%,100%{opacity:0;transform:translateX(505px) scaleY(.953)}}
.cg-tau{animation:cg-tau 14s ease-in infinite}
@keyframes cg-tau{0%,87.1%{transform:translateX(0)}97.1%,100%{transform:translateX(260px)}}
.cg-tau-lac{transform-origin:center bottom;animation:cg-lac 3s ease-in-out infinite alternate}
@keyframes cg-lac{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}
.cg-song{animation:cg-song 3s linear infinite}
@keyframes cg-song{to{transform:translateX(-40px)}}
.cg-mat-troi{animation:cg-troi 5s ease-in-out infinite alternate}
/* --- Cảnh FOB / CIF / DAP --- */
.canh-giao{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.nut-dk{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.nut-dk button{font:inherit;font-weight:700;padding:8px 18px;border-radius:999px;border:2px solid var(--brand);background:#fff;color:var(--brand);cursor:pointer}
.nut-dk button[aria-pressed="true"]{background:var(--brand);color:#fff}
.canh-giao svg{display:block;width:100%;height:auto}
.cg-co{transition:transform .6s ease}
.cg-hang{animation:cg-hang 9s linear infinite}
@keyframes cg-hang{0%{transform:translateX(0);opacity:0}4%{opacity:1}94%{opacity:1}100%{transform:translateX(540px);opacity:0}}
.loi-dk{display:none}
.canh-giao[data-chon="fob"] .loi-fob,.canh-giao[data-chon="cif"] .loi-cif,.canh-giao[data-chon="dap"] .loi-dap{display:grid}
.loi-dk{gap:10px;grid-template-columns:1fr 1fr;margin-top:10px}
.loi-dk > div{background:var(--soft);border-radius:10px;padding:10px 12px;font-size:.95rem}
.loi-dk .ta{border-left:4px solid var(--brand)}
.loi-dk .ban{border-left:4px solid #b9ad9b}
.loi-dk .rui-ro{grid-column:1/-1;background:#fff8e8;border-left:4px solid var(--accent)}

/* Máy bật "giảm chuyển động": đứng yên hết, nội dung vẫn đủ */
@media (prefers-reduced-motion: reduce){
  .canh-cang *,.canh-giao *,.buoc-canh li,.card:hover .bt{animation:none !important;transition:none !important}
  .card:hover{transform:none}
}
@media (max-width:820px){
  .hero.co-canh{grid-template-columns:1fr}
  .loi-dk{grid-template-columns:1fr}
}
/* ================= CẢNH ĐƯỜNG HÀNG FOB/CIF/DAP (vẽ lại 04/11) — vòng 16 giây ================= */
.canh-giao .ig{border-radius:10px}
.dg{fill:#cfc6b8;stroke:none;transition:fill .5s ease}
.canh-giao[data-chon="fob"] .d-xuong,.canh-giao[data-chon="cif"] .d-xuong,.canh-giao[data-chon="cif"] .d-bien,
.canh-giao[data-chon="dap"] .d-xuong,.canh-giao[data-chon="dap"] .d-bien,.canh-giao[data-chon="dap"] .d-giao{fill:var(--brand)}
.canh-giao[data-chon="dap"] .cg-co{transform:translateX(462px)}
.ig-san{animation:cg-san 16s linear infinite}
.ig-cont{animation:ig-cont 16s ease-in-out infinite}
@keyframes ig-cont{0%,2%{transform:translate(140px,165px)}18%,21%{transform:translate(240px,165px)}25%{transform:translate(240px,90px)}
  29%{transform:translate(370px,90px)}32%,34%{transform:translate(370px,140px)}54%,56%{transform:translate(520px,140px)}
  60%{transform:translate(520px,90px)}64%{transform:translate(660px,90px)}68%,70%{transform:translate(660px,165px)}88%,100%{transform:translate(800px,165px)}}
.ig-xe1{animation:ig-xe1 16s ease-in-out infinite}
@keyframes ig-xe1{0%,2%{transform:translateX(0)}18%,100%{transform:translateX(100px)}}
.ig-tau{animation:ig-tau 16s ease-in-out infinite}
@keyframes ig-tau{0%,34%{transform:translateX(0)}54%,100%{transform:translateX(150px)}}
.ig-xe2{animation:ig-xe2 16s ease-in-out infinite}
@keyframes ig-xe2{0%,70%{transform:translateX(0)}88%,100%{transform:translateX(140px)}}
.ig-cap1,.ig-cap2{transform-origin:top center;opacity:0}
.ig-cap1{animation:ig-cap1 16s ease-in-out infinite}
@keyframes ig-cap1{0%,20.5%{opacity:0;transform:translateX(275px) scaleY(1)}21%{opacity:1;transform:translateX(275px) scaleY(1)}
  25%{transform:translateX(275px) scaleY(.286)}29%{transform:translateX(405px) scaleY(.286)}32%{opacity:1;transform:translateX(405px) scaleY(.762)}33%,100%{opacity:0;transform:translateX(405px) scaleY(.762)}}
.ig-cap2{animation:ig-cap2 16s ease-in-out infinite}
@keyframes ig-cap2{0%,55.5%{opacity:0;transform:translateX(555px) scaleY(.762)}56%{opacity:1;transform:translateX(555px) scaleY(.762)}
  60%{transform:translateX(555px) scaleY(.286)}64%{transform:translateX(695px) scaleY(.286)}68%{opacity:1;transform:translateX(695px) scaleY(1)}69%,100%{opacity:0;transform:translateX(695px) scaleY(1)}}
.canh-giao svg *{transform-box:view-box}
.canh-giao .cg-tau-lac{transform-box:fill-box}
.ig-chang{display:grid;grid-template-columns:331fr 304fr 321fr;gap:4px;margin-top:6px;font-size:.85rem;color:var(--muted);text-align:center;line-height:1.3}
.ig-chu{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.88rem;color:var(--muted);margin:8px 0 0}
.ig-chu span{display:inline-flex;align-items:center;gap:6px}
.ig-chu .o{display:inline-block;width:14px;height:14px;border-radius:3px;flex:none}
.ig-chu .o.ta{background:var(--brand)}.ig-chu .o.ban{background:#cfc6b8}.ig-chu .o.rui{background:#b4793a}

/* ================= KHÚC "ĐƠN CỠ NÀO": vài carton · pallet · nguyên container ================= */
.co-don{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.co-don .nut-dk button{font:inherit;font-weight:700;padding:8px 18px;border-radius:999px;border:2px solid var(--brand);background:#fff;color:var(--brand);cursor:pointer}
.co-don .nut-dk button[aria-pressed="true"]{background:var(--brand);color:#fff}
.cd-o{display:none;grid-template-columns:1.3fr 1fr;gap:18px;align-items:center}
.co-don[data-chon="carton"] .cd-carton,.co-don[data-chon="pallet"] .cd-pallet,.co-don[data-chon="cont"] .cd-cont{display:grid}
.cd-o svg{display:block;width:100%;height:auto;border-radius:10px}
.cd-o svg *{transform-box:fill-box}
.cd-o h3{margin-bottom:.4em}
/* vài carton: thùng nhảy lên lần lượt, máy bay bay ngang, dấu tick hiện ở nhà khách */
.th{animation:cd-nhay .5s cubic-bezier(.3,1.5,.6,1) both}
.th1{animation-delay:.1s}.th2{animation-delay:.3s}.th3{animation-delay:.5s}
@keyframes cd-nhay{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}
.cd-bay{animation:cd-bay 5s ease-in-out infinite}
@keyframes cd-bay{0%{transform:translate(-200px,30px)}50%{transform:translate(0,0)}100%{transform:translate(260px,-20px)}}
.cd-tick{animation:cd-tick 5s ease-in-out infinite;transform-origin:center}
@keyframes cd-tick{0%,70%{transform:scale(0)}78%{transform:scale(1.2)}84%,100%{transform:scale(1)}}
/* pallet: xe nâng chạy vô container dùng chung rồi lui ra */
.cd-nang{animation:cd-nang 6s ease-in-out infinite}
@keyframes cd-nang{0%,10%{transform:translateX(0)}45%,60%{transform:translateX(150px)}95%,100%{transform:translateX(0)}}
/* nguyên container: thùng xếp đầy dần rồi đóng cửa */
.cd-day .t{animation:cd-xep .3s ease-out both;animation-delay:calc(var(--i) * .12s)}
@keyframes cd-xep{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
.cd-cua{transform-origin:left center;animation:cd-cua .8s ease-in-out 3s both}
@keyframes cd-cua{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:820px){ .cd-o{grid-template-columns:1fr} .ig-chang{font-size:.72rem} }
@media (prefers-reduced-motion: reduce){ .canh-giao *,.co-don *{animation:none !important} .cd-cua{transform:scaleX(1)} }

/* ================= ĐIỆN THOẠI (04/11): FOB/CIF/DAP xếp dọc · thanh container dính đáy ở trang báo giá ================= */
.ig-doc{display:none;list-style:none;margin:4px 0 0;padding:0 0 0 14px;position:relative}
.ig-doc li{display:flex;align-items:center;gap:12px;padding:10px 8px 10px 14px;border-left:7px solid #cfc6b8;transition:border-color .5s;position:relative}
.ig-doc li .ic svg{width:40px;height:40px;display:block}
.ig-doc li b{display:block;font-size:1rem}
.ig-doc li small{display:block;color:var(--muted);font-size:.88rem;line-height:1.3}
.canh-giao[data-chon="fob"] .ig-doc .d-xuong,.canh-giao[data-chon="cif"] .ig-doc .d-xuong,.canh-giao[data-chon="cif"] .ig-doc .d-bien,
.canh-giao[data-chon="dap"] .ig-doc li:not(.d-thue){border-left-color:var(--brand)}
.co-risk{display:none;margin-left:auto;font-style:normal;font-weight:800;font-size:.78rem;color:#fff;background:#b4793a;padding:4px 10px 4px 8px;clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%)}
.canh-giao[data-chon="fob"] .moc-fob .co-risk,.canh-giao[data-chon="cif"] .moc-fob .co-risk,.canh-giao[data-chon="dap"] .moc-dap .co-risk{display:inline-block}
.ig-hop{position:absolute;left:5px;top:0;width:18px;height:13px;border-radius:2px;background:#b4532a;z-index:1;animation:ig-hop 8s ease-in-out infinite}
@keyframes ig-hop{0%{top:4%;opacity:0}6%{opacity:1}92%{opacity:1}100%{top:90%;opacity:0}}
@media (max-width:640px){
  .canh-giao .ig,.ig-chang{display:none}
  .ig-doc{display:block}
}

@keyframes qx-nay{0%{transform:translateY(-14px) scale(.6)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){ .ig-hop{animation:none;display:none} .qx-mini svg.co{animation:none} }
/* --- A2. đồi cà phê + chó lớn bấm sủa (5066098) --- */
.cl-mat-troi{animation:cl-tho 6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes cl-tho{to{transform:scale(1.08)}}
.cay-bong{animation:cl-dua 5s ease-in-out infinite alternate;animation-delay:var(--tre)}
@keyframes cl-dua{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
.cho-lon{cursor:pointer;outline:none}
.cho-lon .duoi-lon{animation:cl-duoi .5s ease-in-out infinite alternate}
@keyframes cl-duoi{from{transform:rotate(-8deg)}to{transform:rotate(14deg)}}
.cho-lon .dau-lon{animation:cl-nhai .7s ease-in-out infinite alternate}
@keyframes cl-nhai{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg) translateY(2px)}}
.cho-lon .mat-lon{animation:cl-chop 4.5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes cl-chop{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.vun-go{animation:cl-vun 1.4s ease-in infinite;animation-delay:calc(var(--i)*.25s);opacity:0}
@keyframes cl-vun{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(-14px,30px)}}
.cho-lon .bong-sua{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:bottom right;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.6,1)}
.cho-lon .tai-lon{transition:transform .2s}
.cho-lon.sua .bong-sua{opacity:1;transform:none}
.cho-lon.sua .dau-lon{animation:cl-sua .35s ease-out 2}
.cho-lon.sua .tai-lon{transform:rotate(-18deg)}
.cho-lon.sua .duoi-lon{animation-duration:.18s}
@keyframes cl-sua{50%{transform:rotate(-7deg) translateY(-10px)}}
.cho-lon:focus-visible .bong-sua{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cho-lon *, .cay-bong, .vun-go{animation:none!important}}

/* --- B1. màu + chữ + nền tảng --- */
:root{
  --paper:#FFFBF6; --sheet:#fff; --desk:#F6F1EA; --tint:#EEF2F9; --rule:#03326A; --rule-2:#e6dfd1;
  --ink:#1B1B1B; --muted:#5A5A5A; --stamp:#C46F00; --stamp-tint:#FFF1DC;
  --forest:#011735; --cream:#FFF6EF; --brass:#FFA411; --max:1240px;
  --f-disp:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --f-sans:var(--f-disp); --f-type:var(--f-disp);
  --sh-1:0 1px 2px rgba(1,23,53,.05),0 6px 16px -8px rgba(1,23,53,.14);
  --sh-2:0 2px 6px rgba(1,23,53,.05),0 26px 50px -22px rgba(1,23,53,.32);
  --sh-3:0 4px 10px rgba(1,23,53,.06),0 40px 80px -30px rgba(1,23,53,.42);
  --mem:cubic-bezier(.2,.7,.2,1);
}
body{background:var(--paper);color:var(--ink);font-family:var(--f-sans)}
h1,h2,h3{font-family:var(--f-disp);font-weight:750;font-stretch:94%;letter-spacing:-.022em;color:var(--ink)}
h1{font-weight:800}
h2{font-size:clamp(1.85rem,3.4vw,2.85rem);line-height:1.06;margin-bottom:.45em}
h3{font-weight:700;letter-spacing:-.01em}
:lang(ja) :is(h1,h2,h3),:lang(zh-Hans) :is(h1,h2,h3){letter-spacing:0;font-weight:700}
.logo{font-family:var(--f-disp);font-weight:800;letter-spacing:.02em}
.lead{color:var(--muted);font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.6;max-width:62ch}
a{color:var(--brand)}
main > section{padding:clamp(56px,7vw,104px) 0}
main > section.soft,section.soft{background:linear-gradient(180deg,var(--desk),#f8f4ec)}
.wrap{padding:0 clamp(16px,3vw,32px)}
::selection{background:#FFE2B0}

/* nút: viên thuốc, xanh có độ nổi */
.btn{border-radius:999px;padding:12px 22px;font-weight:700;letter-spacing:0;background:linear-gradient(180deg,#0A4486,#03326A);border:0;color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 18px -8px rgba(3,50,106,.65);transition:transform .2s var(--mem),box-shadow .2s var(--mem)}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 12px 24px -10px rgba(3,50,106,.75);color:#fff}
.btn.alt{background:#fff;color:var(--brand);border:1.5px solid #C9D5E8;box-shadow:var(--sh-1)}
.btn.alt:hover{color:var(--brand);border-color:var(--brand)}
.btn.wa{background:linear-gradient(180deg,#25a35b,#1d8a4b);color:#fff}

/* đầu trang: trắng mờ kính, dính trên cùng */
.top{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(229,221,206,.75)}
.top .logo{color:var(--ink)}.top .logo small{color:var(--stamp)}
.top .ds-menu a{color:var(--ink)}.top .ds-menu a:hover{color:var(--brand)}
.top .nut-menu,.top .chon-tieng summary{background:#fff;color:var(--ink);border-color:var(--line)}
.top .chon-tieng[open] summary,.top .nut-menu[aria-expanded="true"]{background:var(--tint)}
.top .nav a.btn{background:linear-gradient(180deg,#0A4486,#03326A);color:#fff;border:0}
.top .nav a.btn:hover{background:linear-gradient(180deg,#0A4486,#03326A);color:#fff}
html.js .top.hep .ds-menu{background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-2)}
html.js .top.hep .ds-menu a{border-bottom-color:var(--line)}

/* thẻ: trắng, bo tròn, bóng mềm; rê chuột thì nổi lên */
.card{background:#fff;border:0;border-radius:var(--radius);box-shadow:var(--sh-1);padding:14px 14px 18px;transition:transform .35s var(--mem),box-shadow .35s var(--mem)}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.card > img:first-child{border-radius:14px;border:0}
.card h3{margin-top:6px}
.card .moq{color:var(--stamp)}
.grid:has(> .card){gap:clamp(16px,2vw,26px)}
.table-wrap{border:0;border-radius:16px;box-shadow:var(--sh-1);background:#fff}
th{background:var(--desk)}
.note{background:#fff8ec;border:0;border-left:4px solid var(--accent);border-radius:12px}
.steps li{background:#fff;border:0;border-radius:16px;box-shadow:var(--sh-1)}
.steps li::before{background:linear-gradient(180deg,#0A4486,#03326A);color:#fff;border-radius:50%;box-shadow:0 6px 12px -6px rgba(3,50,106,.7)}
.grid.two > img{border-radius:var(--radius);box-shadow:var(--sh-2);border:0}

/* chân trang */
footer{background:linear-gradient(180deg,#03326A,#011735);color:#dfe6dc}
footer a{color:#FFC266}

/* --- B2. MÀN ĐẦU TRANG CHỦ --- */
main > section.dau-sang{position:relative;overflow:hidden;padding:clamp(28px,4.5vw,64px) 0 0;
  background:radial-gradient(1100px 520px at 88% -8%,#FFEBCC 0%,rgba(255,235,204,0) 60%),
             radial-gradient(900px 520px at -6% 8%,#E3EBF7 0%,rgba(227,235,247,0) 58%),
             linear-gradient(180deg,#F2F5FB 0%,#FFFBF6 100%)}
.dau-luoi{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center;position:relative;z-index:2}
.dau-sang .bl-khau{font-family:var(--f-disp);font-weight:800;font-stretch:90%;font-size:clamp(2.7rem,5.6vw,4.9rem);line-height:.98;letter-spacing:-.035em;color:var(--ink);margin:0 0 18px}
.dau-sang .bl-khau > span{display:block}
.dau-sang .bl-khau > span:last-child{background:linear-gradient(90deg,#03326A,#0B4F9C 50%,#FFA411);-webkit-background-clip:text;background-clip:text;color:transparent}
:lang(ja) .dau-sang .bl-khau,:lang(zh-Hans) .dau-sang .bl-khau{font-size:clamp(2rem,3.8vw,3.3rem);line-height:1.18;letter-spacing:0}
.dau-sang h1.bl-phu{font-size:clamp(1.12rem,1.5vw,1.32rem);font-weight:700;font-stretch:100%;letter-spacing:-.005em;line-height:1.35;margin:0 0 6px;color:var(--ink);max-width:40ch}
.dau-sang .lead{margin:0 0 16px}
.dau-sang .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px;padding:0;border:0}
.dau-sang .chips li{flex:0 1 auto;background:rgba(255,255,255,.72);border:1px solid rgba(220,212,196,.9);border-radius:999px;padding:6px 13px 6px 31px;font-size:.88rem;color:var(--ink);box-shadow:0 1px 2px rgba(1,23,53,.04)}
.dau-sang .chips li::before{left:12px;top:50%;transform:translateY(-50%);width:13px;height:13px;background:var(--brand)}
.the-form{margin:22px 0 16px;max-width:580px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.95);border-radius:22px;box-shadow:var(--sh-3);padding:20px 22px 22px}
.the-form > .bl-nhan{display:none}
.the-form .bl-notify-h{font-family:var(--f-disp);font-size:1.25rem;font-weight:750;margin:0 0 12px;color:var(--ink)}
.the-form .form-nhanh{grid-template-columns:1fr 1fr;gap:12px 14px;align-items:end}
.the-form .form-nhanh label{font:600 .8rem/1.3 var(--f-sans);letter-spacing:0;text-transform:none;color:var(--muted);gap:6px}
.the-form .form-nhanh :is(select,input){font:inherit;font-size:.98rem;color:var(--ink);padding:11px 12px;border:1px solid #ddd5c6;border-radius:12px;background:#fff;min-width:0;width:100%;transition:border-color .2s,box-shadow .2s}
.the-form .form-nhanh :is(select,input):focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(3,50,106,.14)}
.the-form .form-nhanh .btn{grid-column:1/-1;padding:15px 18px;font-size:1.04rem;margin-top:2px}
.dau-sang .bl-nut{display:flex;flex-wrap:wrap;gap:10px;margin:0}

/* 4 ảnh thật xếp lớp như ảnh dán, trôi nhẹ */
.anh-xep{position:relative;width:100%;max-width:620px;justify-self:end;aspect-ratio:1/1.04}
.xep{position:absolute;margin:0;background:#fff;padding:8px 8px 34px;border-radius:8px;box-shadow:var(--sh-3);
  transform:rotate(var(--r));transition:transform .5s var(--mem),box-shadow .5s var(--mem);animation:troi 8s ease-in-out infinite}
.xep img{display:block;width:100%;height:auto;object-fit:cover;border-radius:4px}
.xep figcaption{position:absolute;left:12px;right:12px;bottom:9px;font-size:.78rem;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x1{--r:-3deg;left:0;top:5%;width:64%;z-index:1}.x1 img{aspect-ratio:4/3}
.x2{--r:4deg;right:0;top:0;width:39%;z-index:2;animation-delay:-2s}.x2 img{aspect-ratio:3/4}
.x3{--r:2.5deg;left:7%;bottom:3%;width:41%;z-index:3;animation-delay:-4s}.x3 img{aspect-ratio:1/1;object-fit:contain;background:#fff}
.x4{--r:-4.5deg;right:3%;bottom:0;width:37%;z-index:4;animation-delay:-6s}.x4 img{aspect-ratio:3/4;object-position:center 80%}
.xep:hover{transform:rotate(0) scale(1.04);z-index:6;box-shadow:0 50px 90px -30px rgba(1,23,53,.5)}
@keyframes troi{50%{translate:0 -7px}}
.anh-xep::before{content:"";position:absolute;inset:8% 4% -2% 10%;background:radial-gradient(closest-side,rgba(3,50,106,.18),transparent);filter:blur(30px);z-index:0}

/* đồi cà phê + chó vẽ: tràn ngang dưới màn đầu, nhô lên che mép ảnh cho có chiều sâu */
.doi-cho{position:relative;z-index:3;margin-top:clamp(-110px,-7vw,-36px);pointer-events:none}
.doi-cho svg{display:block;width:100%;height:clamp(170px,19vw,300px)}
.doi-cho .cho-lon{pointer-events:auto}
.doi-cho .goi-y-cho{position:absolute;left:50%;top:clamp(40px,5vw,84px);transform:translateX(-80%);background:#fff;border-radius:999px;padding:5px 14px;
  font-size:.82rem;font-weight:700;color:var(--brand);box-shadow:var(--sh-1);animation:goi 2.6s ease-in-out infinite}
@keyframes goi{50%{translate:0 -4px}}

/* dải 4 loại khách: thẻ trắng nổi, chồng lên mép đất */
main > section.dai-khach{background:linear-gradient(180deg,#b8673f 0,#b8673f 34px,var(--paper) 34px);padding:0 0 8px;border:0}
.dai-khach .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border:0;padding-top:0}
.o-khach{background:#fff;border:0!important;border-radius:18px;box-shadow:var(--sh-2);padding:18px 18px 18px 20px;transition:transform .3s var(--mem),box-shadow .3s var(--mem)}
.o-khach:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--sh-3)}
.o-khach strong{font-stretch:96%;color:var(--ink)}
.o-khach i{color:var(--brand);transition:translate .2s}.o-khach:hover i{translate:4px 0}

/* dải phim 12 ảnh thật trôi ngang */
main > section.dai-phim{padding:clamp(36px,5vw,64px) 0 8px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.phim{list-style:none;margin:0;padding:10px 0 26px;display:flex;gap:18px;width:max-content;animation:phim 70s linear infinite}
.dai-phim:hover .phim{animation-play-state:paused}
.phim li{width:clamp(220px,21vw,300px);flex:none;background:#fff;border-radius:16px;padding:8px 8px 12px;box-shadow:var(--sh-1);transition:transform .35s var(--mem),box-shadow .35s var(--mem)}
.phim li:nth-child(odd){transform:rotate(-1.2deg)}.phim li:nth-child(even){transform:rotate(1.2deg) translateY(8px)}
.phim li:hover{transform:none;box-shadow:var(--sh-2)}
.phim img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.phim span{display:block;margin:9px 4px 0;font-size:.84rem;font-weight:600;color:var(--muted)}
@keyframes phim{to{transform:translateX(calc(-50% - 9px))}}

/* --- B3. các khối dưới --- */
/* bằng chứng: nền xanh rất nhạt, thẻ trắng nổi, vận đơn như tờ giấy dựng đứng */
main > section.bang-chung{background:radial-gradient(900px 400px at 100% 0,#FFEBCC,rgba(255,235,204,0) 60%),linear-gradient(180deg,#EAF0F9,#F7F9FD);color:var(--ink)}
.bang-chung h2{color:var(--ink);font-weight:800;font-size:clamp(2rem,3.8vw,3.1rem)}
.pr-luoi{gap:clamp(16px,2vw,24px)}
.pr-the{background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sh-1);transition:transform .35s var(--mem),box-shadow .35s var(--mem)}
.pr-the:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.pr-the a img{background:#f6f2ea}
.pr-the b{font:800 1.3rem/1.15 var(--f-disp);letter-spacing:-.015em;color:var(--brand)}
.pr-the span{color:var(--muted)}
.pr-bl{gap:16px}
.pr-bl img{border-radius:6px;box-shadow:var(--sh-1);transition:transform .35s var(--mem),box-shadow .35s var(--mem)}
.pr-bl li:nth-child(odd) img{rotate:-1.5deg}.pr-bl li:nth-child(even) img{rotate:1.5deg}
.pr-bl a:hover img{transform:translateY(-8px);rotate:0deg;box-shadow:var(--sh-2)}
.pr-bl span{color:var(--muted)}.pr-bl b{color:var(--ink)}
.pr-xem a{color:var(--brand)}

/* ảnh thật (chó gặm, đóng cont, clip): ảnh dán nghiêng nhẹ có bóng */
.luoi-that .luoi-h,.luoi-that h3{font:800 .78rem var(--f-sans);letter-spacing:.14em;color:var(--stamp);margin:0 0 14px}
.luoi-pola .pola-hang{gap:clamp(14px,2vw,24px);padding:6px 4px 12px}
.pola{background:#fff;border:0;border-radius:10px;padding:9px 9px 12px;box-shadow:var(--sh-2);transform:rotate(var(--xoay,0deg));transition:transform .35s var(--mem)}
.pola:hover{transform:rotate(0) scale(1.03);z-index:1}
.pola img{border-radius:5px}
.pola figcaption{font-weight:600;text-align:center}
.luoi-that img,.luoi-that .o-clip video{border:0;border-radius:14px;box-shadow:var(--sh-1)}
.luoi-that + .luoi-that{margin-top:clamp(28px,4vw,48px)}

/* 3 khối hình động: khung trắng bo lớn, bóng sâu */
.canh-cang,.canh-giao,.co-don{background:#fff;border:0;border-radius:26px;box-shadow:var(--sh-2);overflow:hidden}
.canh-cang{max-width:1040px;margin:26px 0 22px}
.canh-giao,.co-don{padding:clamp(16px,2.2vw,28px);margin-top:22px}
.canh-giao svg,.cd-o svg,.canh-cang svg{border-radius:16px}
.buoc-canh{border-top:0;padding:14px 16px 16px;gap:8px}
.buoc-canh li{padding:6px 14px;font-weight:600}
.nut-dk{gap:6px;padding:5px;background:var(--desk);border-radius:999px;display:inline-flex;margin-bottom:16px;border:0}
.nut-dk button,.canh-giao .nut-dk button,.co-don .nut-dk button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:9px 20px;font-weight:700;font-size:.98rem;box-shadow:none;transition:background .25s,color .25s,box-shadow .25s}
.nut-dk button[aria-pressed="true"],.canh-giao .nut-dk button[aria-pressed="true"],.co-don .nut-dk button[aria-pressed="true"]{background:#fff;color:var(--brand);box-shadow:var(--sh-1)}
.loi-dk > div{border-radius:14px;background:var(--desk);border-left-width:4px}
.loi-dk .rui-ro{background:#fff6e8}
.canh-giao .ig-chang{margin-top:8px}
@media (min-width:641px){.canh-giao:has(svg.ig) .ig-doc{display:none}}
@media (max-width:640px){.canh-giao:has(svg.ig) .ig-doc{display:block}}
.canh-giao:has(svg.ig) .ig-doc li{border-left-width:7px}
#mixed .btn.alt{margin-top:4px}

/* lời mời cuối trang */
main > section.cuoi{background:radial-gradient(800px 360px at 15% 0,#0B4F9C,rgba(11,79,156,0) 70%),linear-gradient(135deg,#03326A,#011735);color:#EEF2F9;text-align:center}
.cuoi h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem)}
.cuoi .lead{color:#C9D5E8;margin:0 auto 22px}
.cuoi .btn{background:#fff;color:var(--brand);box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.cuoi .btn.wa{background:linear-gradient(180deg,#25a35b,#1d8a4b);color:#fff}

/* ĐẦU TRANG CON: bỏ dải xanh rừng tối → nền sáng chuyển màu nhẹ (trang con sẽ chỉnh kỹ ở bước 2) */
main > section:first-child:not(.bl-dau):not(.dau-sang){background:radial-gradient(1000px 420px at 90% -10%,#FFEBCC,rgba(255,235,204,0) 60%),linear-gradient(180deg,#EAF0F9,#fbf8f2);color:var(--ink)}
main > section:first-child:not(.bl-dau):not(.dau-sang) :is(h1,h2,h3){color:var(--ink)}
main > section:first-child:not(.bl-dau):not(.dau-sang) p{color:var(--muted)}
main > section:first-child:not(.bl-dau):not(.dau-sang) a:not(.btn){color:var(--brand)}
main > section:first-child:not(.bl-dau):not(.dau-sang) .btn{background:linear-gradient(180deg,#0A4486,#03326A);color:#fff}
main > section:first-child:not(.bl-dau):not(.dau-sang) :is(.btn.alt,.btn.wa){background:#fff;color:var(--brand);border:1.5px solid #C9D5E8}
main > section:first-child:not(.bl-dau):not(.dau-sang) .chips li{color:var(--ink)}
main > section:first-child:not(.bl-dau):not(.dau-sang) .chips li::before{background:var(--brand)}
main > section:first-child:not(.bl-dau):not(.dau-sang) .bl-nhan{color:var(--stamp)}
main > section:first-child:not(.bl-dau):not(.dau-sang) .to-o p.t{color:var(--ink)}
.to-truong{border-top-color:var(--line)}.to-o{border-bottom-color:var(--line)}
main > section:first-child:not(.bl-dau):not(.dau-sang) details.dieu-kien :is(summary,p,li,strong){color:var(--ink)}

/* hiện dần khi cuộn tới (dong.js gắn lớp .lo / .hien) */
.js .lo{opacity:0;translate:0 26px;transition:opacity .8s var(--mem),translate .8s var(--mem)}
.js .lo.hien{opacity:1;translate:0 0}

/* --- B4. máy tính bảng / điện thoại --- */
@media (max-width:1000px){.dai-khach .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .dau-luoi{grid-template-columns:minmax(0,1fr)}
  .anh-xep{justify-self:center;max-width:520px;margin-top:6px}
  .the-form{max-width:none}
}
@media (max-width:640px){
  .the-form{padding:16px 16px 18px;border-radius:18px}
  .the-form .form-nhanh{grid-template-columns:1fr 1fr;gap:10px}
  .anh-xep{aspect-ratio:1/1.08}
  .xep{padding:5px 5px 24px}.xep figcaption{font-size:.68rem;bottom:5px;left:8px;right:8px}
  .doi-cho svg{height:190px}
  .doi-cho .goi-y-cho{font-size:.72rem;top:30px;transform:translateX(-50%)}
  .dai-khach .wrap{gap:10px}
  .o-khach{padding:14px}
  .nut-dk{display:flex;width:100%}.nut-dk button{flex:1;padding:9px 8px}
  .phim li{width:200px}
}
@media (max-width:420px){.the-form .form-nhanh{grid-template-columns:1fr}.dai-khach .wrap{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .xep,.phim,.goi-y-cho{animation:none!important}
  main > section.dai-phim{overflow-x:auto;-webkit-mask:none;mask:none}
  .js .lo{opacity:1;translate:none;transition:none}
  .card,.pr-the,.o-khach,.pola,.xep{transition:none}
}

/* 15/11: màu theo web winvnint.com — nút hành động chính màu cam (như nút báo giá bên winvnint), chữ navy đậm */
.top .nav a.btn,.the-form .form-nhanh .btn,.cuoi .btn:not(.wa){background:linear-gradient(180deg,#FFB534,#FFA411);color:#011735;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 22px -10px rgba(224,138,0,.8)}
.top .nav a.btn:hover,.the-form .form-nhanh .btn:hover,.cuoi .btn:not(.wa):hover{background:linear-gradient(180deg,#FFB534,#E08A00);color:#011735}
/* 15/11 chỉnh màn đầu sau khi chụp: chữ dẫn đủ đậm, tiêu đề gọn 2 dòng để chó + đồi lọt màn đầu, chú thích ảnh thành nhãn trên góc ảnh (không bị ảnh khác che) */
.dau-sang.bl-dau .lead{color:var(--muted)}
.dau-sang .bl-khau{font-size:clamp(2.4rem,4.3vw,3.75rem);margin-bottom:14px}
main > section.dau-sang{padding-top:clamp(24px,3.4vw,48px)}
.the-form{margin:18px 0 14px;padding:18px 20px 20px}
.the-form .bl-notify-h{font-stretch:100%;font-size:1.15rem;margin-bottom:10px}
.the-form .form-nhanh :is(select,input){padding:10px 12px}
.the-form .form-nhanh .btn{padding:13px 18px}
.xep{padding:8px}
.xep figcaption{top:16px;left:16px;right:auto;bottom:auto;max-width:calc(100% - 32px);background:rgba(255,255,255,.92);color:var(--ink);
  padding:4px 10px;border-radius:999px;font-size:.74rem;box-shadow:0 2px 8px rgba(1,23,53,.15)}
.anh-xep{aspect-ratio:1/.98}
.x3{bottom:4%}.x4{bottom:0}
@media (max-width:640px){.xep{padding:5px}.xep figcaption{top:10px;left:10px;font-size:.64rem;padding:3px 7px}}
/* 15/11 sửa sau ảnh chụp toàn trang */
main > section{border-top:0}
.chips{border:0}.steps{border-top:0;gap:14px;display:grid}
.dau-luoi{z-index:4}                      /* form + ảnh nằm trên đồi (cây không che nút) */
/* khối cỡ đơn CÓ nút chọn (trang chủ): mỗi lần hiện 1 hình, hình bên trái, chữ bên phải */
.co-don:has(.nut-dk){display:block;border:0}
.co-don:has(.nut-dk) .cd-o{display:none;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;border:0;padding:0;background:none}
.co-don:has(.nut-dk)[data-chon="carton"] .cd-carton,.co-don:has(.nut-dk)[data-chon="pallet"] .cd-pallet,.co-don:has(.nut-dk)[data-chon="cont"] .cd-cont{display:grid}
.co-don:has(.nut-dk) .cd-o h3{font-size:clamp(1.2rem,2vw,1.5rem)}
.co-don:has(.nut-dk) > .note{border:0;border-left:4px solid var(--accent);margin-top:18px}
.loi-dk > div{border:0;border-left:4px solid var(--rule-2)}
.loi-dk .ta{border-left-color:var(--brand)}.loi-dk .rui-ro{border-left-color:var(--accent)}
.canh-giao .note{border:0;border-left:4px solid var(--accent)}
@media (max-width:820px){.co-don:has(.nut-dk) .cd-o{grid-template-columns:minmax(0,1fr)}}
.canh-cang{max-width:none}
@media (max-width:640px){
  main > section.dai-khach .wrap{padding:0 16px}
  .doi-cho{margin-top:-14px}
  .anh-xep{max-width:400px}
}

/* 15/11 — GỠ "MÙI AI" trong trình bày (Mark dặn: đừng để nhìn ra kiểu AI làm):
   bỏ chữ tô màu chuyển sắc, khung kính mờ, vệt màu loang trên nền, ảnh trôi lơ lửng; nền màu phẳng như web winvnint; bóng đổ vừa phải */
:root{--sh-2:0 1px 3px rgba(1,23,53,.06),0 14px 30px -18px rgba(1,23,53,.30);--sh-3:0 2px 6px rgba(1,23,53,.07),0 22px 44px -22px rgba(1,23,53,.38)}
.dau-sang .bl-khau > span:last-child{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--brand)}
main > section.dau-sang{background:#F2F5FA}
.the-form{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid #E3E8F0}
.top{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid #E6E6EF}
.anh-xep::before{display:none}
.xep{animation:none}
.doi-cho .goi-y-cho{animation:none}
main > section.bang-chung{background:#F2F5FA}
main > section.cuoi{background:#03326A}
main > section:first-child:not(.bl-dau):not(.dau-sang){background:#F2F5FA}
section.soft,main > section.soft{background:#F6F1EA}
.btn,.top .nav a.btn,.the-form .form-nhanh .btn,.cuoi .btn:not(.wa){background-image:none}
.btn{background-color:#03326A}
.btn.alt{background-color:#fff}
.btn.wa{background-color:#1d8a4b}
.top .nav a.btn,.the-form .form-nhanh .btn,.cuoi .btn:not(.wa){background-color:#FFA411;color:#011735}
.top .nav a.btn:hover,.the-form .form-nhanh .btn:hover,.cuoi .btn:not(.wa):hover{background-color:#E08A00;color:#011735}
.steps li::before{background:#03326A}
footer{background:#011735}

/* 15/11 trang con: đường kẻ ô kiểu vận đơn (navy đậm) → chỉ mảnh xám xanh nhạt, nhìn thoáng; chữ nhãn giữ navy */
:root{--ke:#DFE5EE}

/* ===== 15/11 SỬA THEO NGƯỜI SOI VÒNG 1 (giao diện) ===== */
/* viền báo đang chọn (bấm Tab) phải thấy rõ; ô nhập có viền đủ đậm */
:focus-visible{outline:2px solid #03326A;outline-offset:3px}
input,select,textarea{border-color:#8A9AB3}
.the-form .form-nhanh :is(select,input),form.quote :is(input,select,textarea){border-color:#8A9AB3}
.cho-lon:focus-visible{outline:3px solid #03326A;outline-offset:4px}
/* chữ cam nhỏ (MOQ, nhãn chữ hoa) đậm hơn cho đủ tương phản */
:root{--stamp:#9A5600}
/* chú thích ảnh màn đầu: cho xuống 2 dòng, không cắt "…" */
.xep figcaption{white-space:normal;overflow:visible;text-overflow:clip;border-radius:10px;line-height:1.3;max-width:calc(100% - 28px)}
/* máy tính bảng: ảnh không đè đầu chó; 4 thẻ khách có lề hai bên */
@media (min-width:641px) and (max-width:900px){.anh-xep{margin-bottom:40px}.doi-cho{margin-top:0}}
@media (max-width:900px){main > section.dai-khach .wrap{padding:0 clamp(16px,3vw,32px)}}
/* dải phim: nút tạm dừng + dừng khi có phím Tab vào trong */
.dai-phim{position:relative}
.phim-nut{position:absolute;right:clamp(16px,3vw,32px);top:6px;z-index:2;font:600 .82rem var(--f-sans);color:var(--brand);background:#fff;border:1px solid #C9D3E1;border-radius:999px;padding:5px 14px;cursor:pointer}
.dai-phim.dung .phim,.dai-phim:focus-within .phim{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.phim-nut{display:none}}
/* trang Chứng từ + Báo giá: khối ô vuông kiểu cũ → thẻ bo tròn, bóng mềm như trang chủ */
.tui-do{gap:12px;border:0}
.tui-o{background:#fff;border:0!important;border-radius:14px;box-shadow:var(--sh-1)}
form.quote{background:#fff;border:0;border-radius:22px;box-shadow:var(--sh-2);padding:clamp(16px,2.4vw,26px)}
.tro-khung,.qx-thanh,.qx{border-radius:16px}
.tro-khung{box-shadow:var(--sh-1);border:0}
.ct-the,.ct-luoi > *{border-radius:12px}
/* nút nổi góc dưới: viên thuốc tròn như các nút khác */
.noi-lh{gap:8px}
.noi-lh a{border-radius:999px!important;box-shadow:var(--sh-2)}
.noi-mau{background:#03326A;color:#fff}
/* 15/11 Mark: 3 clip "Export night" + 2 tờ SGS nằm lệch trái → canh giữa (cả tiêu đề nhỏ) */
.luoi-that.luoi-doc{text-align:center}
.luoi-that.luoi-doc ul{margin:0 auto;text-align:left}
.ct-luoi.ct-2{justify-content:center;gap:clamp(16px,3vw,32px)}
#sgs h2,#sgs .lead{text-align:center;margin-left:auto;margin-right:auto}

/* ===== 15/11 tối: HÌNH ĐƠN GHÉP + DÂY CHUYỀN FBA ===== */
.canh-ghep,.canh-fba{margin:24px 0 22px;background:#fff;border-radius:26px;box-shadow:var(--sh-2);padding:clamp(14px,2.2vw,26px)}
.canh-ghep svg,.canh-fba svg{display:block;width:100%;height:auto;border-radius:16px}
/* 2 cảnh chồng lên nhau, đổi bằng mờ dần */
.gh-rieng,.gh-winvn{transition:opacity .6s ease}
.canh-ghep[data-chon="winvn"] .gh-rieng,.canh-ghep[data-chon="rieng"] .gh-winvn{opacity:0;pointer-events:none}
.gh-chip{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.gh-chip li{padding:7px 14px;border-radius:999px;font-weight:700;font-size:.92rem}
.gh-chip-r li{background:#fdecea;color:#9b2c1f}
.gh-chip-w li{background:#EAF0F9;color:#03326A}
.gh-chip-w li:first-child{background:#FFA411;color:#011735}
.canh-ghep[data-chon="winvn"] .gh-chip-r,.canh-ghep[data-chon="rieng"] .gh-chip-w{display:none}
/* người mua cảnh rối: đổ mồ hôi, dấu "?!" rung; cảnh WINVN: dấu tick nảy */
.gh-moi{animation:gh-moi 1.6s ease-in infinite}
@keyframes gh-moi{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.gh-hoi{animation:gh-rung 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes gh-rung{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.gh-vui,.gh-kiem,.gh-bia{animation:gh-nay 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.gh-kiem{animation-delay:-.8s}.gh-bia{animation-delay:-1.6s}
@keyframes gh-nay{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
/* danh sách bước FBA: sáng dần theo hình (cùng nhịp 12 giây) */
.fba-buoc{list-style:none;counter-reset:fb;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.fba-buoc li{counter-increment:fb;position:relative;padding:12px 12px 12px 44px;border-radius:14px;background:#F2F5FA;color:var(--muted);font-size:.9rem;line-height:1.4;animation:12s linear infinite}
.fba-buoc li::before{content:counter(fb);position:absolute;left:12px;top:11px;width:24px;height:24px;border-radius:50%;background:#C9D3E1;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem}
.fba-buoc .f1{animation-name:fb1}.fba-buoc .f2{animation-name:fb2}.fba-buoc .f3{animation-name:fb3}.fba-buoc .f4{animation-name:fb4}.fba-buoc .f5{animation-name:fb5}
@keyframes fb1{0%,15%{background:#03326A;color:#fff}16%,100%{background:#F2F5FA;color:#5A5A5A}}
@keyframes fb2{0%,14%{background:#F2F5FA;color:#5A5A5A}15%,29%{background:#03326A;color:#fff}30%,100%{background:#F2F5FA;color:#5A5A5A}}
@keyframes fb3{0%,28%{background:#F2F5FA;color:#5A5A5A}29%,43%{background:#03326A;color:#fff}44%,100%{background:#F2F5FA;color:#5A5A5A}}
@keyframes fb4{0%,42%{background:#F2F5FA;color:#5A5A5A}43%,59%{background:#03326A;color:#fff}60%,100%{background:#F2F5FA;color:#5A5A5A}}
@keyframes fb5{0%,58%{background:#F2F5FA;color:#5A5A5A}59%,100%{background:#FFA411;color:#011735}}
main > section.khoi-fba{background:#fff}
@media (max-width:900px){.fba-buoc{grid-template-columns:1fr 1fr}.fba-buoc .f5{grid-column:1/-1}}
@media (max-width:480px){.fba-buoc{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gh-moi,.gh-hoi,.gh-vui,.gh-kiem,.gh-bia,.fba-buoc li{animation:none!important}}
/* 15/11: tên nước dài (Großbritannien) dưới tấm vận đơn làm tràn khổ 360 → cho ngắt chữ + khe hẹp hơn trên điện thoại */
.pr-bl span{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:520px){.pr-bl{gap:10px}}
/* điện thoại: 2 hình kể chuyện to lên, vuốt ngang trong khung (trang không tràn) */
.ve-cuon{border-radius:16px}
@media (max-width:640px){
  .ve-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .ve-cuon .gh-ve{min-width:600px}
  .ve-cuon .fba-ve{min-width:680px}
}
/* soi 15/11: điện thoại thấy TRỌN câu chuyện (bỏ vuốt ngang) + nút Tạm dừng cho hình động */
@media (max-width:640px){.ve-cuon{overflow:visible}.ve-cuon .gh-ve,.ve-cuon .fba-ve{min-width:0}}
.canh-ghep,.canh-fba{position:relative}
.ve-dung{display:block;margin:12px auto 0;font:600 .82rem var(--f-sans);color:var(--brand);background:#fff;border:1px solid #C9D3E1;border-radius:999px;padding:5px 14px;cursor:pointer}
.canh-fba.dung .fba-buoc li,.canh-ghep.dung *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.ve-dung{display:none}}

/* ===== 15/11 khuya: TRANG GUIDES kiểu tạp chí — ảnh thật làm bìa, cả thẻ bấm được, số phút đọc ===== */
.bai-the{position:relative;padding:0 0 18px;overflow:hidden}
.bai-the .bai-bia{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0;margin:0 0 4px;transition:transform .6s var(--mem)}
.bai-the .bai-giay{object-position:top;background:#f6f2ea;padding:14px 22% 0}
.bai-the:hover .bai-bia{transform:scale(1.04)}
.bai-the > :not(img){padding:0 18px}
.bai-the h3{font-size:1.12rem;line-height:1.3;margin:10px 0 2px}
.bai-the h3 a{color:var(--ink);text-decoration:none}
.bai-the h3 a::after{content:"";position:absolute;inset:0}
.bai-the:hover h3 a{color:var(--brand)}
.bai-the p{color:var(--muted);font-size:.94rem;margin:0}
.bai-phut{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;font-size:.82rem;font-weight:700;color:var(--stamp)}
.bai-phut::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
.bai-the:focus-within{outline:2px solid #03326A;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.bai-the .bai-bia{transition:none}.bai-the:hover .bai-bia{transform:none}}
/* nhóm có đúng 4 bài: 4 cột trên máy tính (khỏi dư 1 thẻ lẻ loi), 2 cột máy tính bảng */
@media (min-width:1001px){.grid:has(> .bai-the:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:701px) and (max-width:1000px){.grid:has(> .bai-the){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* đầu trang Guides: chữ trái, 3 ảnh dán nghiêng phải */
.bai-dau{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:center}
.bai-xep{position:relative;height:230px}
.bx{position:absolute;width:46%;aspect-ratio:4/3;object-fit:cover;background:#fff;padding:6px;border-radius:8px;box-shadow:var(--sh-2)}
.bx1{left:0;top:18px;rotate:-5deg}.bx2{left:28%;top:0;rotate:3deg;z-index:1}.bx3{right:0;top:30px;rotate:6deg;object-position:top;width:34%;aspect-ratio:3/4}
@media (max-width:820px){.bai-dau{grid-template-columns:1fr}.bai-xep{height:170px;max-width:420px}}
/* 15/11 khuya: thêm bước 6 "giao tới kho Amazon FBA" (Mark chốt) — 6 bước: 3 cột × 2 hàng trên máy tính; bước 5 sáng tới khi hàng rời trạm 5, bước 6 sáng khi hàng chạy vô kho */
.fba-buoc{grid-template-columns:repeat(3,minmax(0,1fr))}
.fba-buoc .f5{grid-column:auto}
.fba-buoc .f6{animation-name:fb6}
@keyframes fb5{0%,58%{background:#F2F5FA;color:#5A5A5A}59%,72%{background:#03326A;color:#fff}73%,100%{background:#F2F5FA;color:#5A5A5A}}
@keyframes fb6{0%,72%{background:#F2F5FA;color:#5A5A5A}73%,100%{background:#FFA411;color:#011735}}
@media (max-width:900px){.fba-buoc{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fba-buoc{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fba-buoc .f6{animation:none!important}}

/* ===== 15/11 SỬA THEO SOI VÒNG 1 (giao diện, 7 tiếng) ===== */
/* nhãn con chó: giờ vẽ trong hình (.goi-cho), nhún nhẹ */
/* dải ảnh: nút Chạy phải chạy lại thật (bỏ dừng khi nút đang được chọn) */
.dai-phim:focus-within .phim{animation-play-state:running}
.dai-phim.dung .phim{animation-play-state:paused}
/* viền Tab: thấy rõ ở mọi nền */
.skip:focus{border-color:#03326A}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #03326A;outline-offset:1px}
img.anh-that:focus-visible,.album .pola img:focus-visible,.pf-anh .pola img:focus-visible{outline:2px solid #03326A}
footer :focus-visible,main > section.cuoi :focus-visible{outline-color:#FFA411}
/* số bước FBA đọc được */
.fba-buoc li::before{background:#5A6B85}
.fba-buoc .f6::before{background:#03326A}
/* điện thoại: 2 hình kể chuyện to lại, vuốt ngang trong khung, có gợi ý vuốt; bàn phím cuộn được */
@media (max-width:640px){
  .ve-cuon{overflow-x:auto;position:relative}
  .ve-cuon .gh-ve{min-width:560px}.ve-cuon .fba-ve{min-width:640px}
  .vuot{display:flex;justify-content:center;align-items:center;gap:6px;margin:8px 0 0;font-size:.8rem;font-weight:700;color:#5A6B85}
  .vuot::before,.vuot::after{content:"";width:18px;height:2px;background:currentColor}
}
@media (min-width:641px){.vuot{display:none}}
/* chú thích ảnh màn đầu: tối đa 2 dòng trên điện thoại */
@media (max-width:640px){.xep figcaption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
@media (prefers-reduced-motion:reduce){.goi-cho{animation:none}}
/* soi vòng 2: điện thoại cắt mất nhãn "bấm để chơi" bên phải hình → ẩn trên màn hẹp (con chó vẫn bấm được) */
@media (max-width:640px){.goi-cho{display:none}}
/* soi vòng 2: nhãn chó dời xuống nền đất dưới bụng chó (vị trí trong hình), bỏ lệnh dời bằng CSS cũ; điện thoại hiện lại nếu lọt khung */
@media (max-width:640px){.goi-cho{display:inline}}
/* nút CTA xuống dòng trên điện thoại: có khe hở */
main p:has(> .btn + .btn),main p:has(> .btn + a.btn){display:flex;flex-wrap:wrap;gap:10px}
/* form nhanh màn đầu: thấy viền khi bấm Tab vào ô */
.the-form .form-nhanh :is(select,input):focus-visible{outline:2px solid #03326A;outline-offset:1px}