html {
    scroll-behavior: smooth;
    scroll-padding-top: 75px;
}

:root {
    --primary-color: #141ed2;
    --secondary-color: #cf2e2e;
    --thirdary-color: #fecc00;
    --text-dark: #222;
    --font-size: 18px;
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-dark);
    font-size: var(--font-size);
    line-height: 1.5;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5;
}

p:last-child {
    margin-bottom: 0;
}

/* --- Top Bar & Navbar --- */
.top-bar {
    background-color: white;
    font-size: var(--font-size);
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    background-color: var(--primary-color);
}

.text-color {
    color: var(--primary-color)
}

.navbar-brand {
    font-weight: 900;
    color: #fff;
    font-size: 24px;
}

.nav-link {
    font-weight: 600;
    color: var(--text-dark) !important;
    text-transform: uppercase;
    font-size: var(--font-size);
}

.nav-link:hover {
    color: var(--primary-color) !important;
}


.nav-item {
    padding: 0px 15px;
}

.nav-item.dropdown .dropdown-item {
    font-size: 18px;
    text-transform: uppercase;
    padding: 10px 15px;
}

.navbar .nav-item .dropdown-menu {
    border: 0
}

@media all and (min-width: 992px) {

    .navbar .nav-item .dropdown-menu {
        display: none;
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
        margin-top: 0;
        width: 230px;
    }
}

a {
    text-decoration: none;
}

.section-title {
    color: var(--primary-color);
    font-weight: 800;
    margin-bottom: 40px;
    font-size: 32px;
}

.section-title span {
    color: var(--secondary-color);
}

.process-section {
    background-color: var(--secondary-color);
}

.process-item {
    padding: 15px;
    border: 2px solid var(--thirdary-color);
    color: #fff;
}

.process-item i {
    font-size: 50px;
    color: var(--thirdary-color);
}

.process-count {
    font-size: 45px;
    font-weight: 700;

}

.item-box {
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    border-radius: 10px;
}

.item-box:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.05);
}

.item-box .item-img {
    position: relative;
    width: 100%;
    padding-top: 75%;
}

.item-box .item-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}

.item-content {
    padding: 15px 15px;
}

.item-content .item-title {
    font-weight: 700;
    font-size: 22px;
    color: var(--primary-color);
}

.cta {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cta .section-title {
    font-size: 50px;
}

@media all and (max-width: 768px) {
    .cta .section-title {
        font-size: 30px;
    }
}

.background-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #20212478;
}

.review-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    height: 100%;
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.review-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.05);
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.reviewer-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.reviewer-name {
    font-weight: 600;
    color: #202124;
    margin-bottom: 2px;
    font-size: 18px;
}

.reviewer-meta {
    font-size: 14px;
    color: #70757a;
    margin-bottom: 0;
}

.google-logo-small {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.star-rating i {
    color: #fbbc04;
    font-size: 14px;
    margin-right: 1px;
}

.review-time {
    font-size: 13px;
    color: #70757a;
    margin-left: 10px;
}

.review-text {
    color: #3c4043;
    font-size: 18px;
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 0;
}

.accordion-button:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: rgba(0, 0, 0, .03);
    border-top: 1px solid var(--primary-color) !important;
    font-weight: 700;
}

.accordion-button {
    border-top: 1px solid #ddd;
    background-color: #f7f7f7;
    font-size: var(--font-size);
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: 0;
}

.collapsing {

    transition: height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* --- Footer --- */
.footer {
    background-color: #f8f9fa;
    padding: 50px 0 20px;
    border-top: 3px solid var(--primary-color);
}
.footer a{
    color: var(--text-dark);
}
.footer-bottom {
    background-color: #fff1ed;
    padding: 15px 0;
    text-align: center;
    font-size: var(--font-size);
}
.placesupport-item {
    padding: 15px;
    text-align: center;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    height: 100%;
    background-color: #fff;
}

.placesupport-item i {
    font-size: 40px;
    color: var(--secondary-color);
    display: block;
    line-height: 40px;
}

.placesupport-item h5 {
    text-transform: uppercase;
    font-size: 20px;
    color: var(--primary-color);
}

/* Tại sao chọn thợ sửa khóa Quang Thuận */
.why-us{
    background:#fff;
}

.why-us .section-desc{
    max-width:750px;
    margin:15px auto 0;
    color:#666;
    line-height:1.8;
    font-size:16px;
}

.why-card{

    background:#fff;

    border-radius:16px;

    padding:35px 28px;

    text-align:center;

    border:1px solid #ececec;

    transition:.35s;

    height:100%;

    box-shadow:0 8px 30px rgba(0,0,0,.05);

}

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.why-icon{

    width:78px;

    height:78px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#009688,#00bcd4);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

}

.why-icon i{

    font-size:34px;

    color:#fff;

}

.why-card h3{

    font-size:22px;

    font-weight:700;

    margin-bottom:15px;

    color:#1f2937;

}

.why-card p{

    color:#666;

    line-height:1.8;

    margin:0;

}

@media(max-width:767px){

.why-card{

padding:28px 20px;

}

.why-card h3{

font-size:20px;

}

}

/* css Hero */
.hero-lock{

    background:linear-gradient(135deg,#f6fbff,#ffffff);

    overflow:hidden;

}

.hero-content h1{

    font-size:50px;

    line-height:1.25;

    font-weight:800;

    color:#16304d;

    margin:18px 0;

}

.hero-content h1 span{

    display:block;

    color:#009688;

    margin-top:8px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#e9faf7;

    color:#009688;

    border-radius:40px;

    padding:8px 18px;

    font-weight:600;

}

.hero-desc{

    color:#555;

    line-height:1.9;

    font-size:17px;

    margin-bottom:30px;

}

.hero-feature{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-bottom:35px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:500;

}

.feature-item i{

    color:#14b86d;

    font-size:20px;

}

.hero-contact{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn-call{

    background:#009688;

    color:#fff;

    padding:15px 34px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-call:hover{

    background:#00796b;

    color:#fff;

}

.btn-zalo{

    background:#fff;

    border:2px solid #0A68FF;

    color:#0A68FF;

    padding:13px 30px;

    border-radius:10px;

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.btn-zalo:hover{

    background:#0A68FF;

    color:#fff;

}

.btn-zalo img{

    width:24px;

}

.hero-phone{

    margin-top:30px;

    font-size:18px;

    color:#666;

}

.hero-phone strong{

    display:block;

    color:#e53935;

    font-size:34px;

    margin-top:5px;

}

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.experience-box{

    position:absolute;

    bottom:25px;

    left:-20px;

    width:170px;

    height:170px;

    background:#009688;

    color:#fff;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 15px 40px rgba(0,0,0,.18);

    text-align:center;

}

.experience-box span{

    font-size:48px;

    font-weight:800;

    line-height:1;

}

@media(max-width:991px){

.hero-content{

text-align:center;

}

.hero-feature{

grid-template-columns:1fr;

}

.hero-contact{

justify-content:center;

}

.experience-box{

display:none;

}

.hero-content h1{

font-size:36px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:30px;

}

.hero-desc{

font-size:15px;

}

.btn-call,

.btn-zalo{

width:100%;

justify-content:center;

}

}

/* css quy trình sửa khóa chuyên nghiệp */
.process-lock{

background:#f8fbfd;

}

.process-lock .section-desc{

max-width:820px;

margin:auto;

color:#666;

line-height:1.8;

font-size:16px;

}

.timeline{

position:relative;

margin-top:50px;

}

.timeline:before{

content:"";

position:absolute;

left:35px;

top:0;

bottom:0;

width:4px;

background:linear-gradient(#00a884,#00bcd4);

border-radius:10px;

}

.timeline-item{

display:flex;

margin-bottom:40px;

position:relative;

}

.timeline-icon{

width:74px;

height:74px;

min-width:74px;

border-radius:50%;

background:linear-gradient(135deg,#00a884,#00bcd4);

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:30px;

box-shadow:0 10px 25px rgba(0,0,0,.12);

position:relative;

z-index:2;

}

.timeline-content{

background:#fff;

margin-left:30px;

padding:28px;

border-radius:16px;

box-shadow:0 8px 35px rgba(0,0,0,.06);

border:1px solid #edf2f7;

transition:.3s;

width:100%;

}

.timeline-content:hover{

transform:translateY(-5px);

box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.timeline-content h3{

font-size:14px;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

color:#00a884;

margin-bottom:8px;

}

.timeline-content h4{

font-size:24px;

font-weight:700;

color:#222;

margin-bottom:15px;

}

.timeline-content p{

margin:0;

line-height:1.8;

color:#666;

font-size:16px;

}

@media(max-width:768px){

.timeline:before{

left:22px;

}

.timeline-icon{

width:46px;

height:46px;

min-width:46px;

font-size:20px;

}

.timeline-content{

margin-left:18px;

padding:20px;

}

.timeline-content h4{

font-size:20px;

}

}

/* css hỗ trợ nhiều thương hiệu */
.brand-lock{

background:#ffffff;

}

.brand-lock .section-desc{

max-width:850px;

margin:auto;

font-size:16px;

line-height:1.8;

color:#666;

}

.brand-card{

height:100%;

background:#fff;

border:1px solid #ececec;

border-radius:18px;

padding:28px 22px;

text-align:center;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.brand-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 45px rgba(0,0,0,.12);

border-color:#009688;

}

.brand-card i{

font-size:42px;

color:#009688;

margin-bottom:18px;

display:block;

}

.brand-card h3{

font-size:22px;

font-weight:700;

margin-bottom:10px;

color:#1d2939;

}

.brand-card p{

font-size:15px;

line-height:1.7;

margin:0;

color:#666;

}

@media(max-width:768px){

.brand-card{

padding:22px 16px;

}

.brand-card h3{

font-size:18px;

}

.brand-card p{

font-size:14px;

}

.brand-card i{

font-size:34px;

}

}

/*CTA */
.cta-pro{

padding:90px 0;

background:#f7fbfd;

}

.cta-wrapper{

background:linear-gradient(135deg,#0f766e,#009688);

border-radius:30px;

padding:70px;

overflow:hidden;

position:relative;

box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.cta-wrapper:before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:350px;

height:350px;

border-radius:50%;

background:rgba(255,255,255,.06);

}

.cta-wrapper:after{

content:"";

position:absolute;

left:-100px;

bottom:-100px;

width:250px;

height:250px;

border-radius:50%;

background:rgba(255,255,255,.05);

}

.cta-tag{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 18px;

background:rgba(255,255,255,.18);

border-radius:50px;

color:#fff;

font-weight:600;

margin-bottom:25px;

}

.cta-wrapper h2{

font-size:46px;

font-weight:800;

line-height:1.25;

color:#fff;

margin-bottom:20px;

}

.cta-wrapper p{

font-size:18px;

line-height:1.9;

color:#e8f5f3;

margin-bottom:35px;

}

.cta-benefit{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.cta-benefit div{

display:flex;

align-items:center;

gap:10px;

color:#fff;

font-weight:600;

}

.cta-benefit i{

color:#ffd54f;

font-size:20px;

}

.cta-box{

background:#fff;

padding:40px;

border-radius:20px;

text-align:center;

box-shadow:0 20px 40px rgba(0,0,0,.18);

position:relative;

z-index:2;

}

.cta-hotline-text{

font-size:16px;

color:#777;

}

.cta-phone{

font-size:42px;

font-weight:800;

color:#e53935;

margin:12px 0 30px;

line-height:1;

}

.btn-call-big{

display:block;

background:#e53935;

color:#fff;

padding:16px;

border-radius:10px;

font-weight:700;

text-decoration:none;

margin-bottom:16px;

transition:.3s;

}

.btn-call-big:hover{

background:#c62828;

color:#fff;

transform:translateY(-2px);

}

.btn-zalo-big{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

border:2px solid #0A68FF;

color:#0A68FF;

padding:15px;

border-radius:10px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-zalo-big:hover{

background:#0A68FF;

color:#fff;

}

.btn-zalo-big img{

width:24px;

height:24px;

}

.cta-note{

margin-top:22px;

font-size:14px;

color:#777;

line-height:1.7;

}

@media(max-width:991px){

.cta-wrapper{

padding:45px 30px;

text-align:center;

}

.cta-wrapper h2{

font-size:34px;

}

.cta-benefit{

grid-template-columns:1fr;

margin-bottom:40px;

}

.cta-box{

margin-top:35px;

}

}

@media(max-width:576px){

.cta-wrapper h2{

font-size:28px;

}

.cta-phone{

font-size:34px;

}

}

/* css cam kết */
.commit-section{

background:#ffffff;

}

.commit-section .section-desc{

max-width:820px;

margin:auto;

color:#666;

font-size:16px;

line-height:1.8;

}

.commit-card{

height:100%;

background:#fff;

padding:35px 30px;

border-radius:18px;

border:1px solid #edf2f7;

transition:.35s;

text-align:center;

box-shadow:0 8px 30px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

}

.commit-card:before{

content:"";

position:absolute;

left:0;

top:0;

height:5px;

width:100%;

background:linear-gradient(90deg,#009688,#00BCD4);

transform:scaleX(0);

transition:.35s;

}

.commit-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.commit-card:hover:before{

transform:scaleX(1);

}

.commit-icon{

width:82px;

height:82px;

margin:auto;

border-radius:50%;

background:linear-gradient(135deg,#009688,#00BCD4);

display:flex;

justify-content:center;

align-items:center;

margin-bottom:22px;

}

.commit-icon i{

font-size:36px;

color:#fff;

}

.commit-card h3{

font-size:22px;

font-weight:700;

margin-bottom:15px;

color:#1f2937;

line-height:1.4;

}

.commit-card p{

font-size:15px;

color:#666;

line-height:1.8;

margin:0;

}

@media(max-width:768px){

.commit-card{

padding:28px 20px;

}

.commit-card h3{

font-size:19px;

}

.commit-icon{

width:68px;

height:68px;

}

.commit-icon i{

font-size:28px;

}

}

/* css giá tham khảo */
.pricing-section{

background:#f8fbfd;

}

.pricing-wrapper{

max-width:900px;

margin:auto;

}

.pricing-table{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.pricing-head{

background:linear-gradient(135deg,#009688,#00BCD4);

color:#fff;

font-size:18px;

font-weight:700;

}

.pricing-row{

display:grid;

grid-template-columns:2fr 1fr;

align-items:center;

padding:20px 30px;

border-bottom:1px solid #eef2f5;

transition:.25s;

}

.pricing-row:last-child{

border:none;

}

.pricing-row:hover{

background:#f6fffd;

}

.pricing-row div:first-child{

display:flex;

align-items:center;

gap:12px;

font-weight:600;

color:#333;

}

.pricing-row i{

font-size:20px;

color:#009688;

}

.pricing-row span{

font-weight:700;

color:#e53935;

font-size:18px;

}

.pricing-note{

margin-top:25px;

padding:22px 25px;

border-left:5px solid #ff9800;

background:#fff8e8;

border-radius:12px;

font-size:15px;

line-height:1.8;

color:#555;

}

.pricing-note i{

color:#ff9800;

margin-right:10px;

}

@media(max-width:768px){

.pricing-row{

grid-template-columns:1fr;

gap:8px;

padding:18px;

}

.pricing-head{

display:none;

}

.pricing-row span{

display:inline-block;

margin-left:32px;

}

}

/* css top bar */
.top-bar{

    background:#1d2fd6;

    padding:10px 15px;

}

.top-badges{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.top-badge{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 15px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

    white-space:nowrap;

}

.top-badge i{

    font-size:15px;

}

.top-badge:hover{

    background:rgba(255,255,255,.22);

    color:#fff;

}

.top-badge.hotline{

    background:#ff9800;

    color:#fff;

    font-weight:700;

}

.top-badge.hotline:hover{

    background:#fb8c00;

}

@media(max-width:768px){

.top-bar{

padding:12px;

}

.top-badges{

flex-direction:column;

align-items:stretch;

gap:8px;

}

.top-badge{

justify-content:center;

width:100%;

font-size:14px;

padding:10px;

}

}