/* Chấm Công Pro landing template — scoped to the editable template only. */
.slb-front.slb-ccpro{--ccp-ink:#102f2a;--ccp-green:#138f64;--ccp-deep:#083d32;color:var(--ccp-ink);background:#fff;font-family:'Be Vietnam Pro',Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
.slb-front.slb-ccpro .slb-container{width:min(1140px,calc(100% - 48px))}
.slb-front.slb-ccpro .slb-row-section{padding:64px 0}
.slb-front.slb-ccpro .slb-row-section>.slb-container>.slb-multirow{align-items:center}
.slb-front.slb-ccpro .slb-heading h1{font-size:clamp(34px,4.7vw,60px);font-weight:850;letter-spacing:-.055em;line-height:1.14}
.slb-front.slb-ccpro .slb-heading h2{font-size:clamp(26px,3.4vw,39px);line-height:1.19;letter-spacing:-.038em}
.slb-front.slb-ccpro .slb-heading h3{font-size:22px}
.slb-front.slb-ccpro .slb-heading .slb-eyebrow{font-size:11px;letter-spacing:.17em;font-weight:850}
.slb-front.slb-ccpro .slb-heading{padding-top:22px}
.slb-front.slb-ccpro .slb-btn{border-radius:12px;background:#0b8058;color:#fff!important;font-weight:850;box-shadow:0 12px 27px rgba(16,109,75,.19);transition:transform .2s,background .2s;min-height:49px;padding:12px 23px}
.slb-front.slb-ccpro .slb-btn:hover{background:#0a694b}
.slb-front.slb-ccpro .slb-column-content>.slb-section{padding:7px 0}
.slb-front.slb-ccpro .slb-text p{font-size:16px;color:#586e68;line-height:1.8}
.slb-front.slb-ccpro>.slb-heading{max-width:850px;margin:auto;padding-top:76px;padding-bottom:8px}
.slb-front.slb-ccpro>.slb-text{max-width:940px;margin:auto;padding:5px 0 17px}
.slb-front.slb-ccpro>.slb-widget{max-width:1100px;margin:auto}
.slb-front.slb-ccpro .slb-row--nav{padding:10px 0;background:#fff;box-shadow:0 1px 0 rgba(9,45,31,.08)}
.slb-front.slb-ccpro .slb-row--nav .slb-heading{padding:5px 0}
.slb-front.slb-ccpro .slb-row--nav .slb-heading h3{font-size:19px;letter-spacing:-.03em;color:#0b5540}
.slb-front.slb-ccpro .slb-row--nav .slb-eyebrow{margin-bottom:3px;color:#718f81;font-size:9px}
.slb-front.slb-ccpro .slb-row--nav .slb-btn{margin-top:0;font-size:13px;min-height:42px;padding:9px 15px}
.slb-front.slb-ccpro .slb-row--hero{position:relative;isolation:isolate;padding:78px 0 72px;background:radial-gradient(circle at 80% 18%,rgba(92,210,153,.22),transparent 31%),radial-gradient(circle at -10% 90%,rgba(32,169,122,.28),transparent 40%),linear-gradient(124deg,#052e2c 0%,#07523f 65%,#0c7154 100%);overflow:hidden}
.slb-front.slb-ccpro .slb-row--hero:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.1;background-image:linear-gradient(90deg,transparent 98%,#effff2 100%);background-size:70px 70px}
.slb-front.slb-ccpro .slb-row--hero .slb-heading h1{color:#fff}
.slb-front.slb-ccpro .slb-row--hero .slb-heading .slb-eyebrow{color:#98f5c0}
.slb-front.slb-ccpro .slb-row--hero .slb-text p{color:#d4eee3;font-size:18px;max-width:640px}
.slb-front.slb-ccpro .slb-row--hero .slb-btn{background:#ffd16b!important;color:#134635!important;box-shadow:0 13px 30px rgba(1,29,20,.23)}
.slb-front.slb-ccpro .slb-row--hero .slb-btn:hover{background:#f5bb4e!important}
.slb-front.slb-ccpro .slb-row--hero .slb-icon-list{color:#d3eee3;font-size:14px;line-height:2.3}
.slb-front.slb-ccpro .slb-row--hero .slb-icon-list li:before{color:#ffdc76}
.slb-front.slb-ccpro .slb-row--hero .slb-phone-scene{margin-top:-8px}
.slb-front.slb-ccpro .slb-row--soft{background:#eef9f4;padding:78px 0}
.slb-front.slb-ccpro .slb-row--dark{background:radial-gradient(circle at 0% 0%,#156b53,#07372e 55%,#052e29);color:#fff;padding:78px 0}
.slb-front.slb-ccpro .slb-row--dark .slb-heading,.slb-front.slb-ccpro .slb-row--dark h2,.slb-front.slb-ccpro .slb-row--dark h3{color:#fff}
.slb-front.slb-ccpro .slb-row--dark .slb-eyebrow{color:#a3f0c2}
.slb-front.slb-ccpro .slb-row--dark .slb-text p,.slb-front.slb-ccpro .slb-row--dark .slb-list{color:#d4ebdf}
.slb-front.slb-ccpro .slb-row--dark .slb-formbox{background:#fff;color:#13372b;padding:28px;border-radius:20px;box-shadow:0 25px 65px #001b1680}
.slb-front.slb-ccpro .slb-row--dark .slb-formbox h2{color:#10452f;font-size:25px}
.slb-front.slb-ccpro .slb-row--dark .slb-alert{border:none;background:#e3f8ee;color:#22543a}
.slb-front.slb-ccpro .slb-row--pricing{background:#f9fcfa;padding-top:24px;padding-bottom:85px}
.slb-front.slb-ccpro .slb-row--footer{padding:36px 0;background:#072b27;color:#c8e5d7}
.slb-front.slb-ccpro .slb-row--footer .slb-heading h3{color:#fff}
.slb-front.slb-ccpro .slb-row--footer .slb-text p{font-size:13px;color:#bad8cd}
.slb-front.slb-ccpro .slb-row--footer .slb-eyebrow{color:#a3e7c2}
.slb-front.slb-ccpro .slb-iconbox{height:100%;min-height:198px;text-align:left;padding:27px;border:1px solid #e0eee6;border-radius:18px;box-shadow:0 12px 34px rgba(12,76,53,.055);background:#fff;transition:transform .2s,box-shadow .2s}
.slb-front.slb-ccpro .slb-iconbox:hover{transform:translateY(-4px);box-shadow:0 22px 42px rgba(12,76,53,.12)}
.slb-front.slb-ccpro .slb-icon-bubble{width:57px;height:57px;font-size:26px;margin-bottom:15px;border-radius:14px;background:#e6f8ee}
.slb-front.slb-ccpro .slb-iconbox h3{font-size:18px;color:#103a2d}
.slb-front.slb-ccpro .slb-iconbox p{font-size:14px;color:#64776c;line-height:1.7;margin-top:10px}
.slb-front.slb-ccpro .slb-pricing{height:100%;max-width:none;padding:30px 25px;border:1px solid #d8eae0;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(6,71,46,.07)}
.slb-front.slb-ccpro .slb-pricing h3{color:#174f39;font-size:19px;letter-spacing:.1em}
.slb-front.slb-ccpro .slb-price{font-size:32px;color:#0b865b;margin:17px 0}
.slb-front.slb-ccpro .slb-price small{display:block;margin-top:3px}
.slb-front.slb-ccpro .slb-row--pricing .slb-column-content:nth-child(2) .slb-pricing{border:2px solid #0f9968;box-shadow:0 24px 44px rgba(13,139,94,.13);transform:translateY(-7px)}
.slb-front.slb-ccpro .slb-pricing li{font-size:14px}
.slb-front.slb-ccpro .slb-faq{border-radius:14px;border:1px solid #e3eee7;margin:0 0 11px;box-shadow:0 4px 10px #102e2410}
.slb-front.slb-ccpro .slb-appscreen-widget>.slb-container{width:100%;max-width:none}
/* Preview phone: entirely local HTML/CSS, not a product screenshot. */
.slb-front .slb-phone-scene{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:560px;padding:12px 0 22px}
.slb-front .slb-phone-glow{position:absolute;z-index:0;width:360px;height:365px;border-radius:50%;background:radial-gradient(circle,#89d5a66d 0%,#8ac6a82a 48%,transparent 76%)}
.slb-front .slb-app-phone{position:relative;z-index:1;width:min(278px,100%);height:507px;padding:9px;border:4px solid #142a29;border-radius:39px;background:#0b1c1d;box-shadow:0 28px 55px #061b2040,5px 9px 0 #f1f8f485;transform:rotate(-3deg)}
.slb-front .slb-phone-notch{position:absolute;z-index:5;width:88px;height:18px;background:#142a29;border-radius:0 0 14px 14px;left:50%;transform:translateX(-50%);top:8px}
.slb-front .slb-app-screen{display:flex;flex-direction:column;height:100%;background:#f4f9f6;border-radius:27px;overflow:hidden;color:#143c2b;font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:12px}
.slb-front .slb-app-status{display:flex;justify-content:space-between;padding:10px 19px 0;font-size:10px;color:#164732}
.slb-front .slb-app-header{display:flex;align-items:center;gap:7px;padding:16px 13px 10px;font-size:12px;color:#194734}
.slb-front .slb-app-header>b{flex:1}
.slb-front .slb-app-mark{display:inline-flex;align-items:center;justify-content:center;height:22px;width:22px;border-radius:7px;background:#139866;color:#fff;font-weight:900}
.slb-front .slb-app-scroll{overflow:hidden;flex:1;padding:9px 13px 3px}
.slb-front .slb-app-greeting{font-size:10px;color:#748c7d;margin:2px 0 14px}
.slb-front .slb-app-greeting strong{display:block;font-size:15px;color:#123d2d;line-height:1.4;margin-top:3px}
.slb-front .slb-app-card{border-radius:15px;padding:16px;background:#fff;box-shadow:0 6px 18px #17433014;margin-bottom:13px}
.slb-front .slb-app-card.primary{background:linear-gradient(130deg,#117e5d,#1baf75);color:#fff}
.slb-front .slb-app-card span{display:block;font-size:9px;letter-spacing:.09em;opacity:.8;font-weight:700}
.slb-front .slb-app-card strong{display:block;font-size:19px;line-height:1.35;margin:9px 0 2px}
.slb-front .slb-app-card small{display:block;font-size:10px;opacity:.85}
.slb-front .slb-app-checkin{background:#fff;color:#087952;border-radius:8px;padding:10px 8px;text-align:center;font-size:10px;font-weight:850;margin-top:15px}
.slb-front .slb-app-card.light{background:#e4f7ed;color:#175f3e;box-shadow:none}
.slb-front .slb-app-card.light strong{font-size:12px}
.slb-front .slb-app-pills{display:flex;gap:9px;margin-bottom:13px}
.slb-front .slb-app-pills span{font-size:10px;background:#fff;border:1px solid #deece2;border-radius:8px;padding:7px 11px;color:#337257}
.slb-front .slb-app-minihead{color:#1d4535;font-weight:800;font-size:11px;margin:11px 0}
.slb-front .slb-app-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.slb-front .slb-app-shortcuts span{display:grid;justify-items:center;gap:3px;padding:10px 5px;border-radius:10px;background:#fff;font-size:19px}
.slb-front .slb-app-shortcuts small{font-size:9px;color:#447260}
.slb-front .slb-app-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:#fff;border-top:1px solid #e0eee3;padding:7px 3px 10px}
.slb-front .slb-app-bottom span{display:flex;flex-direction:column;align-items:center;line-height:1.2;font-size:17px;color:#268963}
.slb-front .slb-app-bottom small{font-size:8px;margin-top:3px;color:#557768}
.slb-front .slb-app-days{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:10px 0 15px}
.slb-front .slb-app-days span{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:9px;background:#fff;padding:9px 2px;color:#658677;font-size:10px}
.slb-front .slb-app-days b{font-size:15px;color:#264d3b}
.slb-front .slb-app-days .is-current{background:#169c6a;color:#fff}
.slb-front .slb-app-days .is-current b{color:#fff}
.slb-front .slb-app-shift{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e9f0e9;border-radius:12px;padding:10px;margin-bottom:8px}
.slb-front .slb-app-shift i{font-style:normal;font-size:20px}
.slb-front .slb-app-shift div{flex:1}
.slb-front .slb-app-shift strong{display:block;font-size:11px;color:#174b34}
.slb-front .slb-app-shift small{display:block;font-size:9px;color:#8aa093}
.slb-front .slb-app-shift em{font-size:9px;font-style:normal;color:#139b66;background:#e3f7ec;border-radius:6px;padding:4px 6px}
.slb-front .slb-appscreen-caption{position:relative;z-index:1;text-align:center;margin-top:18px;display:flex;flex-direction:column;gap:2px;font-size:12px;color:#5a7970}
.slb-front .slb-appscreen-caption strong{color:#2b5946;font-size:14px}
.slb-front .slb-row--hero .slb-appscreen-caption strong,.slb-front .slb-row--hero .slb-appscreen-caption span{color:#d4f4e3}
/* Inside the drag/drop builder, the row background remains visible. */
.slb-workspace .slb-front.slb-ccpro .slb-builder-row{border-radius:16px;padding:12px;overflow:hidden}
.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--hero{background:linear-gradient(120deg,#08352f,#0f6e50);color:#fff;padding:26px 14px}
.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--soft{background:#e9f8f0}
.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--dark{background:#093e33;color:#fff}
.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--footer{background:#0c322c;color:#fff}
.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--pricing{background:#f4faf6}
.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--hero .slb-heading h1,.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--dark .slb-heading h2{color:#fff}
.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--hero .slb-text p,.slb-workspace .slb-front.slb-ccpro .slb-builder-row.slb-row--dark .slb-text p{color:#d0e8dc}
@media(max-width:850px){
 .slb-front.slb-ccpro .slb-row-section{padding:48px 0}
 .slb-front.slb-ccpro .slb-row--nav{padding:8px 0}
 .slb-front.slb-ccpro .slb-row--hero{padding:50px 0}
 .slb-front.slb-ccpro .slb-row--pricing .slb-column-content:nth-child(2) .slb-pricing{transform:none}
 .slb-front.slb-ccpro .slb-app-phone{transform:rotate(-2deg)}
}
@media(max-width:760px){
 .slb-front.slb-ccpro .slb-container{width:min(100% - 32px,1140px)}
 .slb-front.slb-ccpro .slb-row--nav .slb-multirow{grid-template-columns:1fr 1fr!important;gap:8px!important}
 .slb-front.slb-ccpro .slb-row--nav .slb-heading h3{font-size:15px}
 .slb-front.slb-ccpro .slb-row--nav .slb-btn{font-size:11px;padding:8px 9px}
 .slb-front.slb-ccpro .slb-heading h1{font-size:36px}
 .slb-front.slb-ccpro .slb-row--hero .slb-text p{font-size:16px}
 .slb-front.slb-ccpro .slb-row--dark .slb-formbox{padding:20px}
 .slb-front.slb-ccpro .slb-phone-scene{min-height:510px}
 .slb-front.slb-ccpro .slb-app-phone{width:264px;height:482px}
 .slb-front.slb-ccpro>.slb-heading{padding-top:51px}
}
@media(prefers-reduced-motion:reduce){.slb-front.slb-ccpro .slb-iconbox,.slb-front.slb-ccpro .slb-btn{transition:none}}