/* Be Vietnam Pro, self hosted. Licensed under the SIL Open Font License.
   Only the latin and vietnamese subsets are shipped: nothing on the page needs latin-ext.
   Paths are relative to this stylesheet, so they resolve under the same asset route. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-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:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-400-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:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-500-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:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-500-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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-600-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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-600-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:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-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}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-700-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:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/be-vietnam-pro-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:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/be-vietnam-pro-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}
/* myCRM landing page styles. Generated from the design package. */
:root{
  --bg:#FFFFFF; --band:#EFEDFA; --onBand:#1D1A2E;
  /* 🔴 Mực phụ trên mảng tô đầy: #DDD6FA chỉ đạt 4,10 với nền #6558BC, dưới ngưỡng 4,5 của luật
     thương hiệu, và nó là mực của 178 dòng chữ trên trang chủ. Nâng lên #EDE9FB được 4,80 mà vẫn
     mềm hơn hẳn chữ trắng (5,71), nên vẫn đọc ra hai bậc chữ như bản vẽ. Nền KHÔNG đổi: #6558BC
     là màu thương hiệu. Nền tối đã đạt sẵn 5,99 nên để nguyên. */
  --solid:#6558BC; --onSolid:#FFFFFF; --onSolidMuted:#EDE9FB;
  --line:#DDD9EC; --text:#1D1A2E; --muted:#56526B;
  --brand:#6558BC; --brandPressed:#4F4596; --onBrand:#FFFFFF;
  /* Đỏ cảnh báo khai thành THẺ, đừng gõ cứng: nền tối phải đổi mực, gõ cứng là không đổi được. */
  --danger:#B3241C;
  --pbg:#FFFFFF; --pband:#F0EEF8;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#141225; --band:#1D1A2E; --onBand:#EDEAF7;
  --solid:#443A85; --onSolid:#F3F0FF; --onSolidMuted:#D0C5FF;
  /* Chữ phụ cũ #9A93B5 chỉ đạt 4,30 trên dải #342D5D; #A8A1C4 được 5,10, và 7,49 trên nền trang. */
  --line:#35304F; --text:#EDEAF7; --muted:#A8A1C4;
  /* 🔴 Nút tô đầy nền tối phải ĐỔI MỰC: nền thương hiệu nền tối là sắc nhạt #B6A7FD, chữ trắng
     trên nó chỉ còn 2,11. Mực navy #1D1A2E được 8,02. Cùng lối `--danger-on` của hrm-landing. */
  --brand:#B6A7FD; --brandPressed:#9D90EC; --onBrand:#141225;
  /* Đỏ nền sáng #B3241C đặt trên thẻ tối chỉ còn 2,57. Lấy đúng bậc của vỏ: 7,49 trên #1D1A2E. */
  --danger:#F1938A;
  --pbg:#1D1A2E; --pband:#342D5D;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brandPressed)}
button{font-family:inherit}
.m-tabbar{display:none}
section[id]{scroll-margin-top:60px}
.fab{position:fixed;right:18px;bottom:22px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab a,.fab button{display:flex;flex-direction:row-reverse;align-items:center;gap:0;height:48px;width:48px;padding:0;border:none;border-radius:4px;overflow:hidden;white-space:nowrap;cursor:pointer;box-shadow:0 6px 18px rgba(29,26,46,.22);transition:width .18s ease,gap .18s ease,padding .18s ease}
.fab a > span:first-child,.fab button > span:first-child{flex:0 0 auto}
.fab span.lb{font-size:13.5px;font-weight:700;max-width:0;opacity:0;overflow:hidden;transition:max-width .18s ease,opacity .15s ease}
@media (hover:hover){
  .fab a:hover,.fab button:hover{width:auto;padding:0 14px 0 18px;gap:9px}
  .fab a:hover span.lb,.fab button:hover span.lb{max-width:220px;opacity:1}
}
/* Hàng mảng nghiệp vụ: rê chuột thì nền dải, đúng bản vẽ tờ 09. Lề âm để nền ăn ra ngoài chữ. */
@media (hover:hover){
  .module-row:hover{background:var(--band);color:var(--onBand)}
  .index-link:hover{background:var(--band);color:var(--onBand);border-color:var(--band)}
}
.module-row{margin:0 -12px 0 -12px;padding-left:12px;border-radius:3px;transition:background .12s ease}
@media (prefers-reduced-motion:reduce){.module-row{transition:none}}
@media (max-width:760px){.fab{bottom:84px;right:14px}.fab a,.fab button{height:46px;width:46px}}
@media (max-width:760px){.hdr-nav{display:none!important}}
.band3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(22px,4vw,44px)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(26px,4.5vw,52px);align-items:center}
.splitTop{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(26px,4.5vw,52px);align-items:start}
.ft-cols{display:grid;grid-template-columns:1.9fr 1fr 1.15fr 1fr;gap:34px 40px;align-items:start}
@media (max-width:900px){.ft-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ft-cols{grid-template-columns:1fr}}
@media (max-width:760px){.ft-contact{flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:11px!important;padding-right:64px!important}}
@media (max-width:760px){.feat-media{order:2}}
/* The width has to live on the class, not in an inline style attribute: an inline style
   outranks a media query, which is why the same rule is dead in the design export. */
.faq-h2{max-width:28ch}
@media (min-width:760px) and (max-width:900px){.faq-h2{max-width:none}}
.hero-pair{margin-top:clamp(26px,4vw,44px);display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2.2vw,26px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.hero-cta{justify-content:flex-start}
.hero-grid .hero-pair{margin-top:0}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;justify-items:center}.hero-copy{align-items:center;text-align:center}.hero-cta{justify-content:center}.hero-grid .hero-pair{margin-top:clamp(26px,4vw,44px)}}
@media (max-width:760px){.hero-pair .phone-dark{display:none}}
.phone{width:242px;height:523px}
.phone-in{transform:scale(0.62)}
@media (max-width:430px){.phone{width:206px;height:445px}.phone-in{transform:scale(0.528)}}
@media (max-width:760px){
  .m-tabbar{display:grid}
  .m-more.is-open{display:block}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  h1,h2,h3,p,div,span,li{text-wrap:wrap}
}

/* Theme switch icon */
.on-light,.on-dark{display:inline-flex}
html[data-theme="dark"] .on-light{display:none}
html:not([data-theme="dark"]) .on-dark{display:none}
/* Interactive states, ported from the design mockup */
/* 🔴 MỰC LÚC DI CHUỘT ĐỌC THẺ, KHÔNG GÕ CỨNG TRẮNG (sửa 28/09/2026). `--onBrand` là trắng ở nền
   sáng nhưng là `#1D1A2E` ở nền tối, vì nền tối đổi màu nhấn sang sắc nhạt. Gõ cứng `#FFFFFF` thì
   nền sáng vẫn đẹp nên không ai thấy, còn nền tối tụt xuống 2,75 trên 1 (cần 4,5). Sau khi sửa:
   6,16 ở nền tối và 8,00 ở nền sáng. Bản vẽ cũng đang gõ cứng chỗ này, đã ghi đơn sửa sang cửa saas. */
/* 🔴 MÀU ĐỨNG ĐI BẰNG BIẾN RIÊNG CỦA KHỐI, `!important` ĐÃ GỠ (tờ `mycrm-landing-page/21` mục 1a).
   Trước 28/09/2026 mỗi khối khai `color` và `background` gắn thẳng trong thẻ, mà kiểu gắn thẳng
   luôn thắng luật trong tệp, nên mọi hiệu ứng rê chuột đụng tới hai thuộc tính ấy đều CHẾT: đo 18
   khối trên trang chủ thì 16 khối rê vào không đổi gì. Vá tạm bằng tám chỗ `!important`.
   Nay 24 khối mang `data-hv` khai màu đứng bằng `--c` (chữ) và `--b` (nền), hai luật ngay dưới đọc
   hai biến ấy. Hai luật ấy đứng TRƯỚC các luật `:hover` và cùng độ đặc hiệu, nên luật rê chuột
   thắng mà không cần `!important`. 🪤 Đổi thứ tự hai khối luật này là hiệu ứng rê chuột chết lại. */
[data-hv][style*="--c:"]{color:var(--c)}
[data-hv][style*="--b:"]{background:var(--b)}
[data-hv="1"]:hover{color:var(--text)}
[data-hv="2"]:hover{background:var(--brandPressed);color:var(--onBrand)}
[data-hv="3"]:hover{color:var(--brandPressed)}
[data-hv="4"]:hover{background:var(--brandPressed);color:var(--onBrand)}
[data-hv="5"]:hover{background:var(--brandPressed);color:var(--onBrand)}
[data-hv="6"]:hover{opacity:0.86}
[data-hv="7"]:hover{background:var(--line)}
[data-hv="9"]:hover{background:#0052CC}
[data-hv="10"]:hover{color:var(--onSolidMuted)}
[data-ac="1"]:active{color:var(--brandPressed)}
[data-fc="1"]:focus{border-bottom:1.5px solid var(--brand)}


/*
 * Thanh đầu trang của bộ trang Tính năng.
 *
 * 🔴 Khổ hẹp GIẤU dải menu, đúng như bản vẽ (khối `sc-if value="rong"`): để cả dải lẫn nút ở 390
 * thì hàng rộng 396 trên khung 390, trang trôi ngang. Nút Đặt lịch demo ở lại vì nó là việc chính.
 */
@media (max-width: 720px) {
  .ft-nav { display: none !important; }
  .ft-cta-top { margin-left: auto; }
}

/* Cột so sánh gập về một cột ở khổ hẹp, khỏi ép chữ xuống hai ba chữ một dòng. */
@media (max-width: 720px) {
  .ft-compare-row { grid-template-columns: minmax(0, 1fr) !important; }
}

/*
 * Hàng dẫn sang mục lục /features: ở khổ điện thoại nó là ô CUỐI của lưới các mảng, đứng một mình
 * cuối trang nên phải dày tay hơn hàng thường - chuẩn landing của nhà đòi tối thiểu 72px dưới 640.
 */
@media (max-width: 640px) {
  .index-link { min-height: 72px !important; }
}