@font-face{font-family:'Be Vietnam Pro';src:url('fonts/be-vietnam-pro-300-latin-ext.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('fonts/be-vietnam-pro-300-latin.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('fonts/be-vietnam-pro-300-vietnamese.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('fonts/be-vietnam-pro-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('fonts/be-vietnam-pro-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* MELAMIN trial-v3 — local TEST only, noindex */
:root{
  --bg:#f6f3ee; --surface:#fffcf7; --ink:#1c1a17; --muted:#6b6560;
  --line:#ddd5c8; --accent:#8b5e3c; --accent2:#2f5d50; --focus:#0b57d0;
  --radius:14px; --shadow:0 10px 30px rgba(40,30,20,.08);
  --font:"Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px;
}
.skip{position:absolute;left:-999px;top:auto}
.skip:focus{left:12px;top:12px;background:#fff;padding:.5rem 1rem;z-index:99}
.wrap{width:min(1120px,calc(100% - 2rem));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:rgba(246,243,238,.92);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.brand{font-weight:700;letter-spacing:.04em;text-decoration:none;color:var(--ink);font-size:1.05rem}
.nav{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:center}
.nav a{text-decoration:none;color:var(--ink);font-size:.95rem}
.nav a:hover{color:var(--accent)}
.btn{appearance:none;border:0;border-radius:999px;padding:.7rem 1.15rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{background:var(--accent2);color:#fff}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn-call{background:#1a7f4b;color:#fff}
.btn-email{background:transparent;border:1.5px solid var(--accent2);color:var(--accent2)}
.btn-email.btn-on-dark{border-color:rgba(255,255,255,.7);color:#fff}
.nav a[href^="mailto:"]{overflow-wrap:anywhere}
.hero{display:grid;gap:1.25rem;padding:1.5rem 0 2rem}
@media(min-width:860px){.hero{grid-template-columns:1.1fr .9fr;align-items:center;padding:2.25rem 0 2.75rem}}
.hero-copy h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.2;margin:0 0 .75rem}
.hero-copy p{margin:0 0 1.1rem;color:var(--muted);max-width:36rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.hero-visual{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#fff}
.hero-visual img{width:100%;aspect-ratio:1024/215;object-fit:cover}
.section{padding:1.75rem 0}
.section h2{margin:0 0 1rem;font-size:1.35rem}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
@media(min-width:720px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.tile img{width:100%;aspect-ratio:1024/215;object-fit:cover;background:#eee}
.tile .meta{padding:.7rem .8rem}
.tile strong{display:block}
.tile span{color:var(--muted);font-size:.9rem}
.search-box{display:flex;flex-wrap:wrap;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem;box-shadow:var(--shadow)}
.search-box input{flex:1 1 220px;min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:.55rem .75rem;font:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card a.media{display:block;background:#efeae2}
.card img{width:100%;aspect-ratio:1024/215;object-fit:cover}
.card .body{padding:.8rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card .code{font-weight:700}
.card .raw{color:var(--muted);font-size:.86rem}
.badge{display:inline-block;font-size:.75rem;padding:.15rem .45rem;border-radius:999px;background:#efe7dc;color:#5a4633}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-bottom:1rem}
.filters label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted)}
.filters select,.filters input{min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:.45rem .65rem;font:inherit;background:#fff;color:var(--ink)}
.notice{background:#fff7e8;border:1px dashed #d2b48c;border-radius:12px;padding:.85rem 1rem;color:#6a4b16;margin:1rem 0}
.form-demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.form-demo .row{display:grid;gap:.6rem;margin-bottom:.75rem}
@media(min-width:700px){.form-demo .row.two{grid-template-columns:1fr 1fr}}
.form-demo input,.form-demo textarea,.form-demo select{width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:.55rem .7rem;font:inherit}
.form-demo textarea{min-height:110px;resize:vertical}
.site-footer{border-top:1px solid var(--line);margin-top:2rem;padding:1.5rem 0 2.5rem;background:#efeae3}
.site-footer .cols{display:grid;gap:1rem}
@media(min-width:720px){.site-footer .cols{grid-template-columns:2fr 1fr 1fr}}
.site-footer h3{margin:0 0 .5rem;font-size:1rem}
.site-footer p,.site-footer li{color:var(--muted);font-size:.92rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer a{color:var(--ink)}
.contact-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.detail{display:grid;gap:1rem}
@media(min-width:860px){.detail{grid-template-columns:1.4fr .8fr}}
.detail-visual{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.detail-visual img{width:100%;aspect-ratio:1024/215;object-fit:cover}
.detail dl{display:grid;grid-template-columns:7.5rem 1fr;gap:.4rem .7rem}
.detail dt{color:var(--muted)}
.modal[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:40;background:rgba(20,16,12,.55);padding:1rem;overflow:auto}
.modal-card{width:min(920px,100%);margin:4vh auto;background:var(--surface);border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);padding:1rem}
.modal-card .close{float:right}
#trial-grid{scroll-margin-top:72px}
.is-loading{background:linear-gradient(90deg,#eee,#f7f7f7,#eee);background-size:200% 100%;animation:shimmer 1.1s linear infinite;min-height:80px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hidden-slot{display:none!important}
.test-banner{font-size:.85rem;background:#1c1a17;color:#fff;padding:.35rem .75rem;text-align:center}


/* trial-v4 hero + richer home */
.hero-bleed{position:relative; margin:0; color:#fff; background:#161412; overflow:hidden}
.hero-bleed .hero-media{position:relative; min-height:clamp(320px, 52vw, 560px)}
.hero-bleed picture,.hero-bleed img.hero-img{width:100%; display:block}
.hero-bleed img.hero-img{height:clamp(280px,52vw,560px); object-fit:cover}
@media(max-width:700px){.hero-bleed .hero-media{min-height:min(72vh,900px)}.hero-bleed img.hero-img{height:min(72vh,900px); object-fit:cover}.hero-bleed .hero-inner{padding:1.5rem 0 1.25rem}.hero-bleed h1{font-size:1.55rem}}
.hero-bleed .hero-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(12,10,8,.15) 0%, rgba(12,10,8,.25) 40%, rgba(12,10,8,.82) 78%, rgba(12,10,8,.94) 100%);
  pointer-events:none; z-index:2;
}
.hero-bleed .hero-overlay > *{pointer-events:auto}
.hero-bleed .hero-inner{width:min(1120px, calc(100% - 2rem)); margin:0 auto; padding:2.5rem 0 2rem}
.hero-bleed h1{font-size:clamp(1.85rem, 5vw, 3rem); line-height:1.12; margin:0 0 .75rem; letter-spacing:-.02em; text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-bleed .lede{font-size:clamp(1rem, 2.2vw, 1.15rem); max-width:38rem; color:rgba(255,255,255,.9); margin:0 0 1.25rem}
.hero-kicker{display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#f0d7b4; margin-bottom:.6rem}
.tiles-v4{display:grid; grid-template-columns:1fr; gap:.9rem}
@media(min-width:560px){.tiles-v4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.tiles-v4{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tile-v4{position:relative; display:block; border-radius:16px; overflow:hidden; text-decoration:none; color:#fff; box-shadow:0 12px 28px rgba(40,30,20,.14); border:1px solid rgba(0,0,0,.06); min-height:180px; background:#2a2622}
.tile-v4 img{width:100%; height:180px; object-fit:cover; display:block; transition:transform .35s ease}
.tile-v4:hover img{transform:scale(1.04)}
.tile-v4 .cap{position:absolute; left:0; right:0; bottom:0; padding:.85rem .9rem; background:linear-gradient(transparent, rgba(0,0,0,.78))}
.tile-v4 strong{display:block; font-size:1.05rem}
.tile-v4 span{opacity:.9; font-size:.9rem}
.feat-v4 .card img{height:auto; aspect-ratio:1024/215; object-fit:cover}
.feat-v4 .card{transition:transform .2s ease, box-shadow .2s ease}
.feat-v4 .card:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(40,30,20,.14)}
.clip-slot{border:1.5px dashed #c4b8a4; border-radius:16px; padding:1.25rem; background:rgba(255,252,247,.7); color:var(--muted); text-align:center; margin:1.5rem 0}
.clip-slot strong{color:var(--ink)}
.section-tight{padding:1.25rem 0 1.75rem}
.stat-row{display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin:0 0 1rem; color:rgba(255,255,255,.85); font-size:.95rem}
.stat-row b{color:#fff}

/* trial-v5: homepage SEO article + clip player */
.seo-article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.35rem 1.15rem 1.5rem}
@media(min-width:720px){.seo-article{padding:1.85rem 2.1rem 2rem}}
.seo-article h2{margin:0 0 .9rem;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.02em;line-height:1.25}
.seo-article h3{margin:1.35rem 0 .5rem;font-size:1.08rem;color:var(--accent);font-weight:650;line-height:1.35}
.seo-article p{margin:0 0 .85rem;color:var(--ink);line-height:1.7}
.seo-article p:last-of-type{margin-bottom:0}
.seo-article .seo-note{color:var(--muted);font-size:.97rem}
.seo-article .seo-cta{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.15rem}
#home-clip-title{margin:0 0 .85rem;font-size:1.35rem}
.home-clip{margin:0 0 1.25rem;border-radius:16px;overflow:hidden;background:#161412;box-shadow:var(--shadow);border:1px solid var(--line)}
.home-clip video{width:100%;height:auto;aspect-ratio:180/101;display:block;background:#161412;vertical-align:middle}

/* ---- trial-v6: tìm mã thật + form báo giá ---- */
.sx-home{position:relative;align-items:flex-start}
.sx-field{position:relative;flex:1 1 260px;min-width:0}
.sx-field input{width:100%;min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:.55rem .75rem;font:inherit}
.sx-group-select{min-height:44px;border:1.5px solid var(--line);border-radius:10px;padding:.45rem .6rem;font:inherit;background:#fff}
.sx-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;padding:.3rem;list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);max-height:min(60vh,420px);overflow:auto}
.sx-list [role=option]{display:grid;grid-template-columns:96px 1fr auto;gap:.6rem;align-items:center;padding:.55rem .5rem;border-radius:8px;cursor:pointer;min-height:44px}
.sx-list [role=option] img{width:96px;height:20px;object-fit:cover;border-radius:3px;background:#eee}
.sx-list [role=option][aria-selected=true],.sx-list [role=option]:hover{background:#f1ece3;outline:2px solid var(--accent);outline-offset:-2px}
.sx-code{font-weight:650;word-break:break-word}
.sx-group{font-size:.82rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.05rem .5rem;white-space:nowrap}
.sx-empty{padding:.75rem .6rem;color:#6a4b16;line-height:1.5}
.sx-more{padding:.5rem .6rem;border-top:1px solid var(--line);margin-top:.2rem}
.sx-status{flex-basis:100%;margin:.1rem 0 0;font-size:.9rem;color:var(--muted);min-height:1.2em}
.sx-help{flex-basis:100%;margin:.3rem 0 0;font-size:.88rem;color:var(--muted)}
.sx-empty-box{background:#fff7e8;border:1px dashed #d2b48c;border-radius:12px;padding:.9rem 1rem;color:#6a4b16;margin:1rem 0;line-height:1.6}
.sx-empty-box .btn{margin:.35rem .3rem .35rem 0}
kbd{font:inherit;font-size:.82em;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 .3rem;background:#fff}
#trial-grid{display:grid}
@media(max-width:560px){.sx-list [role=option]{grid-template-columns:72px 1fr auto}.sx-list [role=option] img{width:72px;height:15px}.sx-home .btn,.sx-group-select{flex:1 1 100%}}
.form-quote label{display:block}
.form-intro,.form-privacy{margin:0 0 .85rem;color:var(--muted);font-size:.95rem;line-height:1.55}
.field-err{display:block;color:#a11d1d;font-size:.88rem;min-height:0;margin-top:.2rem}
.field-err:empty{display:none}
.form-quote [aria-invalid=true]{border-color:#c0392b;background:#fff6f5}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status{margin:.75rem 0;padding:0;border-radius:10px;line-height:1.5}
.form-status:empty{display:none}
.form-status.is-sending{padding:.7rem .9rem;background:#eef3fb;color:#1d3b6a}
.form-status.is-success{padding:.7rem .9rem;background:#eaf7ee;color:#165a2c;border:1px solid #9fd3ad}
.form-status.is-error{padding:.7rem .9rem;background:#fff1f0;color:#8a1c1c;border:1px solid #f0b4ad}
.form-quote button[disabled]{opacity:.7;cursor:not-allowed}
.visually-hidden{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn-on-dark{border-color:rgba(255,255,255,.45);color:#fff}
.detail-actions{margin-top:1rem}
[id]{scroll-margin-top:84px}