/* Web Sao Kim Studio (thietkeweb) — trang chủ theo mockup (đợt 9). Chàm #272da5 + xanh dương #0073ce. Tiền tố sk- */
:root { --c1: #0073ce; --c1d: #005fae; --c2: #272da5; --ink: #1a1f3d; --mu: #5b6275; --ft: #23299b; --line: #e3e8f1; --hf: "Be Vietnam Pro", Inter, sans-serif; --bf: Inter, sans-serif; --r: 10px; --rb: 6px; }
#header #logo a { display: block; width: 252px; height: 40px; background: url("icons/logo.png") left center / contain no-repeat; font-size: 0 !important; color: transparent !important; }
#header .header-nav-main > li { margin: 0 16px; }
#header .header-nav-main > li > a { font-size: 15px; font-weight: 500; color: #1a1f3d; padding: 0; }
#header .header-nav-main > li > a:hover { color: var(--c1); }
#header .header-button-1 { margin-left: 24px !important; }
#header .header-button-1 .button { background: var(--c1) !important; border-color: var(--c1) !important; color: #fff !important; min-height: 46px; line-height: 46px; padding: 0 26px; border-radius: 6px !important; font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.sk-sec h2, .sk-h2 { font-size: 36px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; margin: 0; color: var(--c2); }
.sk-sec .b9-hd p, .sk-sub { color: var(--mu); font-size: 16.5px; margin: 8px 0 0; }
/* hero */
.sk-hero-sec { padding: 0 !important; }
.sk-hero-row > .col { padding: 0 !important; }
.sk-hero { position: relative; min-height: 495px; overflow: hidden; }
.sk-hero-img { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; background: #e9edf3; }
.sk-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; display: block; }
.sk-hero-p { position: relative; z-index: 1; width: 51%; min-height: 495px; background: #272da5; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); display: flex; align-items: center; }
.sk-hero-in { width: 100%; max-width: 620px; margin-left: max(20px, calc((100vw - 1270px) / 2)); padding: 40px 40px 40px 0; }
.sk-hero h1 { color: #fff; font-size: 57px; line-height: 1.2; max-width: 600px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
.sk-hero-s { color: rgba(255,255,255,.9); font-size: 17px; line-height: 1.6; margin-bottom: 30px; }
.sk-btns { display: flex; gap: 18px; flex-wrap: wrap; }
.sk-btns a { min-height: 52px; min-width: 186px; font-size: 16px; }
/* số liệu */
.sk-num-sec { padding: 22px 0 !important; }
.sk-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-num > div { text-align: center; border-left: 1px solid #e3e8f1; padding: 6px 0; }
.sk-num > div:first-child { border-left: 0; }
.sk-num b { display: block; font-family: var(--hf); font-size: 36px; font-weight: 700; color: var(--c2); line-height: 1.15; }
.sk-num span { font-size: 16px; color: var(--mu); }
/* dịch vụ */
.sk-svc-sec { padding: 38px 0 40px !important; }
.sk-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sk-svc a { display: flex; gap: 20px; background: #fff; border: 1px solid #e3e8f1; border-radius: 10px; padding: 26px 24px; color: inherit; }
.sk-svc a:hover { border-color: var(--c1); }
.sk-svc img { width: 66px; height: 66px; flex: none; }
.sk-svc b { display: block; font-size: 19px; font-weight: 700; color: var(--c2); margin-bottom: 8px; font-family: var(--hf); }
.sk-svc span { display: block; font-size: 15px; line-height: 1.55; color: var(--mu); }
/* loại web */
.sk-type-sec { padding: 46px 0 44px !important; }
.sk-type { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 26px; }
.sk-type > div { border: 1px solid #e3e8f1; border-radius: 10px; overflow: hidden; background: #fff; }
.sk-type img { width: 100%; aspect-ratio: 293 / 218; object-fit: cover; display: block; }
.sk-type b { display: block; font-size: 18px; font-weight: 700; color: var(--c2); padding: 18px 20px 6px; font-family: var(--hf); }
.sk-type span { display: block; font-size: 15px; line-height: 1.55; color: var(--mu); padding: 0 20px 20px; }
/* kho */
.sk-kho-sec { padding: 46px 0 50px !important; }
.sk-chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 28px; }
.sk-chips button { margin: 0; min-height: 40px; padding: 0 22px; border-radius: 22px; border: 1px solid #dfe5ef; background: #fff; color: #2b3150; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.sk-chips button.on { background: var(--c1); border-color: var(--c1); color: #fff; }
.sk-kho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sk-tpl { background: #fff; border-radius: 10px; padding: 0 0 22px; box-shadow: 0 6px 20px rgba(30, 40, 90, .07); overflow: hidden; }
.sk-tpl-f { display: block; background: #f1f3f7; padding: 26px 18px 0; position: relative; }
.sk-dots { position: absolute; top: 9px; left: 14px; display: flex; gap: 5px; }
.sk-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; } .sk-dots i + i { background: #febc2e; } .sk-dots i + i + i { background: #28c840; }
.sk-tpl-f img { width: 100%; aspect-ratio: 384 / 240; object-fit: cover; object-position: 50% 0; display: block; box-shadow: 0 0 0 1px #e3e7ee; }
.sk-tpl h3 { font-size: 21px; font-weight: 700; margin: 18px 22px 14px; width: auto; }
.sk-tpl h3 a { color: var(--c2); }
.sk-demo { margin-left: 22px; min-height: 42px !important; padding: 0 22px !important; font-size: 14.5px !important; }
/* bảng giá */
.sk-price-sec { padding: 44px 0 30px !important; }
.sk-price { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 30px; align-items: stretch; }
.sk-price > div { border: 1px solid #e0e6f0; border-radius: 10px; padding: 28px 24px 26px; display: flex; flex-direction: column; background: #fff; }
.sk-pn { text-align: center; font-weight: 700; font-size: 18px; color: var(--c2); font-family: var(--hf); }
.sk-pp { text-align: center; font-size: 34px; font-weight: 800; color: var(--c1); font-family: var(--hf); margin-top: 12px; line-height: 1.1; }
.sk-pu { text-align: center; color: var(--mu); font-size: 14px; margin-bottom: 20px; }
.sk-price ul { list-style: none; margin: 0 0 24px; padding: 0; }
.sk-price li { display: flex; gap: 10px; font-size: 14.5px; color: #333a4f; margin-bottom: 11px; align-items: flex-start; }
.sk-price li .b9-ic { color: var(--c1); width: 18px; height: 18px; margin-top: 2px; }
.sk-price > div > a { margin-top: auto; width: 100%; }
.sk-price .sk-hot { border: 2px solid var(--c2); padding-top: 0; overflow: hidden; }
.sk-hot .sk-pn { background: var(--c2); color: #fff; margin: 0 -24px 0; padding: 14px 0; }
/* quy trình */
.sk-step-sec { padding: 30px 0 30px !important; }
.sk-step { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 28px; position: relative; }
.sk-step::before { content: ""; position: absolute; left: 10%; right: 10%; top: 26px; height: 2px; background: #b9cdea; }
.sk-step > div { text-align: center; position: relative; padding: 0 10px; }
.sk-step i { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--c1); background: #fff; color: var(--c1); font-style: normal; font-weight: 700; font-size: 19px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.sk-step b { display: block; font-size: 18px; color: var(--c2); font-family: var(--hf); }
.sk-step span { display: block; font-size: 14.5px; color: var(--mu); margin-top: 4px; line-height: 1.5; }
/* FAQ + hướng dẫn */
.sk-faq-sec { padding: 40px 0 50px !important; }
.sk-faq { margin-top: 22px; border: 1px solid #e3e8f1; border-radius: 10px; overflow: hidden; }
.sk-faq details { border-bottom: 1px solid #e3e8f1; padding: 0 22px; }
.sk-faq details:last-child { border-bottom: 0; }
.sk-faq summary { list-style: none; cursor: pointer; padding: 19px 28px 19px 0; font-weight: 600; font-size: 15.5px; color: #1f2540; position: relative; }
.sk-faq summary::-webkit-details-marker { display: none; }
.sk-faq summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: #1f2540; }
.sk-faq details[open] summary { color: var(--c1); } .sk-faq details[open] summary::after { content: "–"; }
.sk-faq details > div { color: var(--mu); font-size: 15px; padding: 0 0 18px; }
.sk-faq-l .col-inner { padding-right: 20px; }
.sk-gd-r .b9-hd { margin-bottom: 18px; }
.sk-gd .b9-po { flex-direction: row; border: 0; border-bottom: 1px solid #e8ecf3; border-radius: 0; height: auto; padding: 12px 0; gap: 18px; align-items: center; }
.sk-gd .b9-po-img { width: 132px; flex: none; aspect-ratio: 132 / 72; border-radius: 6px; }
.sk-gd .b9-po-b { padding: 0; min-width: 0; }
.sk-gd .b9-po-t { font-size: 16px; margin: 0; }
.sk-gd .b9-po-e, .sk-gd .b9-more { display: none; }
#footer .b9-ft { --ft: #23299b; --ftlogo: 38px; }
@media (min-width: 850px) and (max-width: 1199px) { .sk-hero h1 { font-size: 38px; } .sk-hero-p { width: 58%; } .sk-price { gap: 12px; } .sk-price > div { padding-left: 14px; padding-right: 14px; } .sk-hot .sk-pn { margin: 0 -14px; } .sk-pp { font-size: 26px; } .sk-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-kho { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 849px) {
  #header #logo a { width: 200px; height: 34px; background-position: center; }
  .sk-sec h2, .sk-h2 { font-size: 27px; }
  .sk-hero { min-height: 0; padding-top: 250px; }
  .sk-hero-img { width: 100%; height: 250px; bottom: auto; }
  .sk-hero-p { width: 100%; min-height: 0; clip-path: none; }
  .sk-hero-in { margin: 0; padding: 26px 16px 30px; }
  .sk-hero h1 { font-size: 30px; }
  .sk-btns a { flex: 1; min-width: 0; }
  .sk-num b { font-size: 26px; } .sk-num span { font-size: 13px; }
  .sk-svc, .sk-kho, .sk-price { grid-template-columns: minmax(0, 1fr); }
  .sk-type { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sk-type b { font-size: 15.5px; padding: 12px 12px 4px; } .sk-type span { font-size: 13.5px; padding: 0 12px 14px; }
  .sk-step { grid-template-columns: minmax(0, 1fr); gap: 16px; } .sk-step::before { display: none; }
  .sk-step > div { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; text-align: left; } .sk-step i { grid-row: span 2; margin: 0; }
  .sk-faq-l .col-inner { padding-right: 0; }
}
/* _midwidth: header Flatsome ở 850-1399px (laptop nhỏ/tablet ngang) — menu dựng theo mockup 1440 tràn phải; dùng chung mọi site */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 6px !important; margin-right: 6px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 14px !important; }
  #header .header-search-form { max-width: 300px !important; width: 300px !important; margin-left: 20px !important; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  #logo { width: auto !important; max-width: 210px !important; } #logo a { font-size: 21px !important; }
  #header .header-main .flex-right .header-button-1, #header .header-main .flex-right li.html, #header .header-search-form, #top-bar .flex-right { display: none !important; }
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 3px !important; margin-right: 3px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 13px !important; }
  #header .flex-col { min-width: 0; } #header .header-inner, #header .header-bottom .container { overflow: hidden; }
}
.col-inner a[href^="mailto"], .col-inner a[href^="tel"] { overflow-wrap: anywhere; }