/* TIENLIST Premium UI layer */
:root{
  --tl-navy:#0b2346;
  --tl-navy-2:#12345f;
  --tl-blue:#2f6df6;
  --tl-blue-soft:#eef4ff;
  --tl-teal:#16c7b7;
  --tl-bg:#f4f7fb;
  --tl-card:#fff;
  --tl-text:#16243a;
  --tl-muted:#71809a;
  --tl-border:#e4eaf2;
  --tl-shadow:0 14px 40px rgba(23,43,77,.07);
  --tl-shadow-lg:0 30px 90px rgba(12,31,64,.22);
  --tl-radius:18px;
}
html{scroll-behavior:smooth}
body.lc-tienlist-app{background:var(--tl-bg)!important;color:var(--tl-text)}
body.lc-tienlist-app:before{content:"";position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--tl-blue),var(--tl-teal));z-index:30000;transition:width .3s ease,opacity .25s ease;opacity:0;pointer-events:none}
body.lc-tienlist-app.tl-loading:before{width:72%;opacity:1}
body.lc-tienlist-app.tl-loaded:before{width:100%;opacity:0}

/* Header / brand */
.lc-site-header{background:linear-gradient(90deg,#0b2346 0%,#102c54 100%)!important;border:0!important;box-shadow:0 8px 28px rgba(10,32,67,.16)!important}
.lc-header-inner{min-height:76px!important}
.lc-brand-image-only{min-width:175px!important;max-width:225px!important}
.lc-brand-image-only .lc-brand-logo-wrap{background:transparent!important;border:0!important;padding:0!important;max-width:210px!important;height:48px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important}
.lc-brand-image-only .lc-brand-logo-wrap img{max-width:205px!important;max-height:44px!important;width:auto!important;height:auto!important;object-fit:contain!important;filter:none!important}
.lc-nav-link{font-weight:650!important;letter-spacing:-.01em!important}
.lc-nav-link.active,.lc-nav-link:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
.lc-balance-pill{border-color:rgba(38,213,191,.24)!important;background:rgba(20,194,176,.1)!important;color:#bffcf2!important}
.lc-account-btn{border-color:rgba(255,255,255,.11)!important;background:rgba(255,255,255,.06)!important}
.lc-account-btn:hover{background:rgba(255,255,255,.1)!important}
.lc-account-menu,.lc-small-menu,.lc-mega-menu,.lc-manage-menu{border:1px solid var(--tl-border)!important;border-radius:16px!important;box-shadow:0 18px 55px rgba(17,38,76,.16)!important;overflow:hidden!important}
.lc-account-menu .dropdown-item,.lc-small-menu .dropdown-item,.lc-manage-menu .dropdown-item{padding:.72rem 1rem!important;font-weight:560!important}
.lc-account-menu .dropdown-item:hover,.lc-small-menu .dropdown-item:hover,.lc-manage-menu .dropdown-item:hover{background:#f4f7fc!important;color:var(--tl-navy)!important}
.lc-account-menu-head{background:linear-gradient(135deg,#f5f8fd,#eef4ff)!important;border-bottom:1px solid var(--tl-border)!important}

/* Global page rhythm */
.lc-site-main{background:var(--tl-bg)!important;padding-top:30px!important}
.lc-content-wrap{max-width:1320px!important}
.page-title-box{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin-bottom:20px!important}
.page-title-box h4,.page-title-box .mb-sm-0{font-size:1.48rem!important;line-height:1.2!important;font-weight:820!important;color:var(--tl-text)!important;letter-spacing:-.03em!important;text-transform:none!important}
.page-title-box .text-muted{font-size:.86rem!important;line-height:1.55!important}
.card{border:1px solid var(--tl-border)!important;border-radius:var(--tl-radius)!important;box-shadow:var(--tl-shadow)!important;background:#fff!important}
.card-header{border-bottom:1px solid var(--tl-border)!important;background:#fff!important;border-radius:var(--tl-radius) var(--tl-radius) 0 0!important}
.btn{font-weight:650!important;letter-spacing:-.01em!important}
.btn-primary{background:var(--tl-blue)!important;border-color:var(--tl-blue)!important;box-shadow:0 8px 18px rgba(47,109,246,.16)!important}
.btn-primary:hover{background:#235ee0!important;border-color:#235ee0!important;transform:translateY(-1px)}
.form-control,.form-select{border-color:#dbe3ee!important;border-radius:12px!important;min-height:45px!important;background:#fff!important}
.form-control:focus,.form-select:focus{border-color:#84a9ff!important;box-shadow:0 0 0 .22rem rgba(47,109,246,.1)!important}

/* Compact professional alert modal */
.lc-modal-root{z-index:30000!important;padding:16px!important;align-items:center!important}
.lc-modal-backdrop{background:rgba(8,25,52,.56)!important;backdrop-filter:blur(5px)!important}
.lc-modal-card{width:min(var(--lc-modal-width,460px),calc(100vw - 28px))!important;max-width:460px!important;border:1px solid rgba(255,255,255,.5)!important;border-radius:20px!important;background:#fff!important;box-shadow:var(--tl-shadow-lg)!important;overflow:hidden!important}
.lc-modal-close{top:14px!important;right:14px!important;width:34px!important;height:34px!important;border:1px solid #e6ebf2!important;border-radius:10px!important;background:#f7f9fc!important;color:#71809a!important;font-size:18px!important}
.lc-modal-head{padding:28px 28px 6px!important;text-align:center!important}
.lc-modal-icon{width:58px!important;height:58px!important;border-radius:16px!important;margin:0 auto 14px!important;border:0!important;box-shadow:none!important;font-size:25px!important}
.lc-modal-icon.error{background:#fff2ed!important;color:#ff7847!important}
.lc-modal-icon.success{background:#eafbf6!important;color:#12af87!important}
.lc-modal-icon.warning{background:#fff7e8!important;color:#f2a735!important}
.lc-modal-icon.info,.lc-modal-icon.question{background:#eef5ff!important;color:var(--tl-blue)!important}
.lc-modal-title{font-size:1.22rem!important;line-height:1.3!important;font-weight:800!important;color:var(--tl-text)!important;letter-spacing:-.02em!important}
.lc-modal-body{padding:5px 28px 0!important;text-align:center!important;color:var(--tl-muted)!important;font-size:.92rem!important;line-height:1.62!important}
.lc-modal-body input,.lc-modal-body select,.lc-modal-body textarea{min-height:44px!important;margin-top:14px!important;border:1px solid #dbe3ee!important;border-radius:12px!important;font-size:.92rem!important}
.lc-modal-validation{margin:12px 28px 0!important;border-radius:11px!important;font-size:.82rem!important}
.lc-modal-actions{padding:20px 28px 26px!important;gap:10px!important}
.lc-modal-actions.single{grid-template-columns:1fr!important}
.lc-modal-btn{min-height:44px!important;border-radius:12px!important;font-size:.92rem!important;font-weight:720!important}
.lc-modal-confirm{background:var(--tl-blue)!important;border-color:var(--tl-blue)!important;box-shadow:none!important}
.lc-modal-confirm.danger{background:#ef5b5b!important;border-color:#ef5b5b!important}
.lc-modal-confirm.success{background:#12b886!important;border-color:#12b886!important}
.lc-modal-cancel{background:#f4f7fb!important;border-color:#e5eaf2!important;color:#40506a!important}

/* System announcement modal */
.lc-home-notice-modal .modal-dialog{max-width:520px!important}
.lc-home-notice-modal .modal-content{border:1px solid rgba(255,255,255,.55)!important;border-radius:22px!important;box-shadow:var(--tl-shadow-lg)!important;overflow:hidden!important}
.lc-home-notice-modal .modal-header{padding:14px 16px 0!important}
.lc-home-notice-modal .modal-body{padding:2px 28px 28px!important}
.lc-home-notice-modal .avatar-lg{width:58px!important;height:58px!important}
.lc-home-notice-modal .avatar-title{border-radius:16px!important;background:#eef5ff!important;color:var(--tl-blue)!important;font-size:22px!important}
.lc-home-notice-modal h4{font-size:1.25rem!important;line-height:1.35!important;font-weight:820!important;color:var(--tl-text)!important}
.lc-home-notice-modal .lc-rich-content{font-size:.91rem!important;color:var(--tl-muted)!important;line-height:1.7!important}
.lc-home-notice-modal .btn{min-height:43px!important;border-radius:12px!important}
.modal-backdrop.show{opacity:.54!important;backdrop-filter:blur(4px)}

/* Checkout / website creation */
.service-checkout-section{padding-top:4px!important}
.service-checkout-section>.row:first-child{margin-bottom:4px!important}
.service-checkout-section .page-title-box{display:flex!important;align-items:center!important;justify-content:space-between!important;border-radius:0!important;background:transparent!important}
.checkout-summary-card,.purchase-shell-card{border-radius:18px!important;overflow:hidden!important}
.checkout-summary-card{box-shadow:0 16px 42px rgba(30,52,90,.07)!important}
.checkout-summary-card .card-header{padding:1.15rem 1.2rem!important}
.summary-list{border:1px solid #e7ecf3!important;background:#f8fafd!important;border-radius:14px!important}
.summary-list>div{padding:.78rem 0!important}
.summary-list .summary-total strong{font-size:1.25rem!important;color:var(--tl-blue)!important}
.duration-grid .btn{border-radius:11px!important;border-color:#dce4ef!important;background:#f8fafd!important;color:#43516a!important}
.duration-grid .btn.active,.duration-grid .btn.btn-primary{background:var(--tl-blue)!important;border-color:var(--tl-blue)!important;color:#fff!important}
.lc-paymethod-box{border-radius:14px!important;border-color:#e1e7f0!important}
.lc-paymethod-option{padding:.9rem 1rem!important}
.lc-paymethod-option.is-selected{background:#f4f7ff!important}
.lc-paymethod-option.is-selected .lc-paymethod-radio{border-color:var(--tl-blue)!important}
.lc-paymethod-option.is-selected .lc-paymethod-radio:after{background:var(--tl-blue)!important}
.website-template-card{border-radius:16px!important;overflow:hidden!important}
.website-template-card .template-thumb{border-radius:12px!important}
.website-template-card:hover{transform:translateY(-3px)!important;border-color:#bfd0fb!important;box-shadow:0 18px 42px rgba(34,74,143,.09)!important}

/* Blog premium */
.tl-blog-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr);gap:22px;margin-bottom:24px}
.tl-blog-featured{position:relative;min-height:380px;border-radius:22px;overflow:hidden;background:#13284b;box-shadow:var(--tl-shadow);text-decoration:none!important}
.tl-blog-featured img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.tl-blog-featured:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,20,44,.08) 25%,rgba(5,20,44,.9) 100%)}
.tl-blog-featured:hover img{transform:scale(1.025)}
.tl-blog-featured-content{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:28px;color:#fff}
.tl-blog-featured-content .badge{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.tl-blog-featured-content h2{font-size:1.8rem;line-height:1.25;font-weight:820;margin:12px 0 8px;letter-spacing:-.03em}
.tl-blog-featured-content p{max-width:700px;color:rgba(255,255,255,.75);font-size:.9rem;margin:0}
.tl-blog-side{display:grid;gap:14px}
.tl-blog-side-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:13px;align-items:center;background:#fff;border:1px solid var(--tl-border);border-radius:16px;padding:10px;text-decoration:none!important;color:inherit;box-shadow:0 7px 22px rgba(29,50,87,.035);transition:.18s}
.tl-blog-side-card:hover{transform:translateY(-2px);border-color:#c4d4f8;box-shadow:0 14px 30px rgba(29,50,87,.075)}
.tl-blog-side-card img,.tl-blog-side-placeholder{width:112px;height:82px;border-radius:11px;object-fit:cover;background:#eef3fa;display:grid;place-items:center;color:#91a0b8}
.tl-blog-side-card h6{font-size:.9rem;line-height:1.42;margin:4px 0 6px;font-weight:760;color:var(--tl-text)}
.tl-blog-toolbar{background:#fff;border:1px solid var(--tl-border);border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(29,50,87,.035);margin-bottom:22px}
.tl-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tl-blog-card{height:100%;overflow:hidden;transition:.2s ease!important}
.tl-blog-card:hover{transform:translateY(-4px);border-color:#c8d7f8!important;box-shadow:0 18px 42px rgba(29,50,87,.09)!important}
.tl-blog-thumb{display:block;aspect-ratio:16/9;background:#eef3fa;overflow:hidden}
.tl-blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.tl-blog-card:hover .tl-blog-thumb img{transform:scale(1.025)}
.tl-blog-card .card-body{padding:18px!important}
.tl-blog-card h3{font-size:1.03rem;line-height:1.48;font-weight:780;letter-spacing:-.015em;min-height:3.05rem}
.tl-blog-card h3 a{color:var(--tl-text)!important;text-decoration:none!important}
.tl-blog-card .tl-blog-excerpt{font-size:.84rem;line-height:1.62;color:var(--tl-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.05rem}
.tl-blog-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #edf1f6;margin-top:15px;padding-top:14px;font-size:.75rem;color:#8a97ab}
.tl-blog-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.tl-article{overflow:hidden}
.tl-article-cover{aspect-ratio:16/7.5;overflow:hidden;background:#eef3fa}
.tl-article-cover img{width:100%;height:100%;object-fit:cover}
.tl-article-head{padding:30px 34px 18px!important}
.tl-article-head h1{font-size:2rem;line-height:1.28;font-weight:840;letter-spacing:-.035em;color:var(--tl-text);margin:12px 0}
.tl-article-body{padding:4px 34px 34px!important}
.tl-article-body .blog-content{font-size:1rem!important;line-height:1.9!important;color:#3f4e65!important}
.tl-article-body .blog-content h2{font-size:1.55rem!important}.tl-article-body .blog-content h3{font-size:1.3rem!important}
.tl-blog-sidebar{position:sticky;top:100px;display:grid;gap:18px}
.tl-sidebar-list a{display:grid;grid-template-columns:74px 1fr;gap:11px;padding:12px 0;border-bottom:1px solid #edf1f6;text-decoration:none;color:inherit}.tl-sidebar-list a:last-child{border-bottom:0}
.tl-sidebar-list img,.tl-sidebar-list .placeholder{width:74px;height:58px;object-fit:cover;border-radius:9px;background:#edf2f8;display:grid;place-items:center;color:#91a0b8}
.tl-sidebar-list h6{font-size:.82rem;line-height:1.45;margin:0 0 4px;color:var(--tl-text)}

/* Performance-friendly rendering */
.card,.tl-blog-card,.np-service-card,.website-template-card{content-visibility:auto;contain-intrinsic-size:1px 300px}
img{image-rendering:auto}

@media(max-width:1199.98px){
 .lc-brand-image-only{min-width:140px!important}.lc-brand-image-only .lc-brand-logo-wrap{max-width:165px!important}.lc-brand-image-only .lc-brand-logo-wrap img{max-width:160px!important}
 .tl-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-blog-detail-layout{grid-template-columns:minmax(0,1fr) 290px}.tl-blog-hero{grid-template-columns:1fr}.tl-blog-side{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:991.98px){.tl-blog-detail-layout{grid-template-columns:1fr}.tl-blog-sidebar{position:static}.tl-article-head,.tl-article-body{padding-left:24px!important;padding-right:24px!important}}
@media(max-width:767.98px){
 .lc-header-inner{min-height:68px!important}.lc-brand-image-only{min-width:0!important;max-width:145px!important}.lc-brand-image-only .lc-brand-logo-wrap{height:40px!important;max-width:140px!important}.lc-brand-image-only .lc-brand-logo-wrap img{max-width:136px!important;max-height:38px!important}
 .lc-site-main{padding-top:18px!important}.page-title-box h4,.page-title-box .mb-sm-0{font-size:1.25rem!important}
 .lc-modal-card{max-width:calc(100vw - 16px)!important;border-radius:18px!important}.lc-modal-head{padding:24px 20px 5px!important}.lc-modal-body{padding:4px 20px 0!important}.lc-modal-actions{padding:18px 20px 22px!important}.lc-modal-title{font-size:1.12rem!important}
 .lc-home-notice-modal .modal-dialog{margin:8px!important}.lc-home-notice-modal .modal-body{padding:0 20px 22px!important}
 .tl-blog-featured{min-height:310px}.tl-blog-featured-content{padding:20px}.tl-blog-featured-content h2{font-size:1.35rem}.tl-blog-side{grid-template-columns:1fr}.tl-blog-grid{grid-template-columns:1fr}.tl-blog-side-card{grid-template-columns:96px 1fr}.tl-blog-side-card img,.tl-blog-side-placeholder{width:96px;height:72px}
 .tl-article-head,.tl-article-body{padding-left:18px!important;padding-right:18px!important}.tl-article-head h1{font-size:1.55rem}.tl-article-cover{aspect-ratio:16/9}
 .service-checkout-section .page-title-box{display:block!important}.checkout-summary-card{position:static!important}.duration-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}