/* text */
.tx-ct{font-size:16px;font-weight:300;line-height:1.4;}
.tx-ft{font-size:12px;font-weight:300;line-height:1.2;}
.tx-center{text-align:center !important;}
.tx-left{text-align:left !important;}
.tx-right{text-align:right !important;}
.upercase{text-transform:uppercase;}
.indent{text-indent:5vw}
.tx-i{font-style: italic;}

.tx-black{color:#000}
.tx-white{color:#fff}

/* tx */
.tx-ct1{font-size:var(--font-ct1);}
.tx-ct2{font-size:var(--font-ct2);}
.tx-ct3{font-size:var(--font-ct3);}
.tx-a{font-size:var(--font-a);}
.topic-ss{font-size:var(--font-ss);}
.topic-sm{font-size:var(--font-sm);}
.topic-m{font-size:var(--font-m);}
.topic-l{font-size:var(--font-l);}
.topic-xl{font-size:var(--font-xl);}
.topic-x{font-size:var(--font-x);}
.topic-xx{font-size:var(--font-xx);}
.topic-xxx{font-size:var(--font-xxx);}
.topic-xxxx{font-size:var(--font-xxxx);}


/* button */
.btn-1{width: max-content;padding: 6px 2rem;color:var(--white1);background:var(--tem2);border-radius: 3rem;font-size: 1.6em;line-height: 1;font-weight:400;display: flex;justify-items: center;justify-content: center;margin: auto;}
.btn-1:hover{color:var(--white1);background:var(--tem1);}

.btn-2{width: max-content;padding: 6px 2rem;color:var(--white1);background:var(--red1);font-size: 1.6em;line-height: 1;font-weight:400;display: flex;justify-items: center;justify-content: center;margin: auto;}
.btn-2:hover{color:var(--white1);background:var(--tem2);}

.btn-3{width: max-content;padding: 6px 1rem;color:var(--black1);background:transparent;border:3px solid #000;font-size: 1.2em;line-height: 1;font-weight:400;display: flex;justify-items: center;justify-content: center;margin: auto;}
.btn-3:hover{color:var(--white1);background:var(--red1);border:3px solid var(--red1);}




/* section*/
.maxcol{max-width:var(--maxcol);margin: auto;}
.main-content{width:100%;max-width:100%;display:grid;align-content: start;}

.sec-1{width:100%;display:grid;background:white;}
.sec-1-in{width:100%;display:grid;padding:2rem;margin:0 auto;grid-template-columns:1fr;grid-gap:8px;}
.main-topic{width:100%;display:grid;}
.main-topic h1{font-size:20px;font-size:clamp(18px, 1.4vw, 36px);font-weight:600;line-height:1.2;color:var(--tem2);}
.breadcrumb-box{width:100%;display:grid;}

.sec-2{width:100%;display:grid;}
.content-article{width:100%;display:grid;padding:2rem;margin:0 auto;grid-template-columns:1fr;grid-gap:1rem;}
.article-area{width:100%;display:grid;padding:0;margin:0 auto;grid-template-columns:1fr;grid-gap:8px;}
.sec2-tx{width:100%;display:grid;padding:0 1rem;}







/* card list */
.card-list{width:100%;display:grid;grid-template-columns:1fr auto;padding:1rem;overflow:hidden;border-radius:12px;background:white;border: 1px solid #f2f2f3;grid-gap: 2rem;align-items:center;transition: all 0.3s;}
.card-list:hover{box-shadow: 0 3px 16px rgb(0 0 0 / 5%);}
.cl-left{width:100%;display:grid;padding-right:2rem;grid-gap: 4px;}
.cl-left:after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;border-right:1px solid var(--tem6);}

.cl-verified{width:100%;display:flex;color:var(--tem1);font-size:14px;}
	.check {display: inline-block;width: 18px;height: 18px;border: none;position: relative;}
	.check:after {content: '';position: absolute;left: 2px; top: 1px;width: 7px; height: 13px;border-right: 3px solid #26bac9;border-bottom: 3px solid #26bac9;transform: rotate(45deg);}
.cl-topic{width:100%;display:grid;color:var(--tem2);font-size:20px;font-weight:600;}
.cl-address{width:100%;display:grid;color:var(--tem2);font-size:16px;}
.cl-tx{width:100%;display:grid;color:var(--tem4);font-size:14px;padding:1rem;}

.cl-ft{width:100%;display:flex;flex-wrap:wrap;gap:1rem;}
.cl-open{display:flex;color:var(--tem1);font-size:14px;font-weight:600;align-items:center;gap:2px;}
.cl-service{display:flex;color:var(--tem2);font-size:14px;font-weight:600;align-items:center;gap:2px;}


.cl-right{width:100%;max-width:calc(100px + 10vw);display:grid;grid-template-columns:1fr;grid-template-areas:"cl-logo" "cl-call" "cl-link";justify-items:center;align-items:center;grid-gap:6px;}
.logo-business{grid-area:cl-logo;width:100%;display:grid;}
.logo-business img {opacity: 0;transition: opacity .8s ease-in-out;display: block;width: 100%;height: auto;}
.logo-business img.loaded {opacity: 1;}

.cl-call{grid-area:cl-call;}
.cl-link{grid-area:cl-link;}
.cl-call,.cl-link{width:100%;display:grid;overflow:hidden;}

.cl-btn1{width:100%;display:grid;color:var(--tem2);background:var(--tem5);font-size:18px;font-weight:600;line-height:1;padding:8px;border-radius:24px;justify-content:center;}
.cl-btn2{width:100%;display:grid;color:var(--white1);background:var(--tem1);font-size:18px;font-weight:600;line-height:1;padding:8px;border-radius:24px;justify-content:center;}
.cl-btn3{width:100%;display:grid;color:var(--white1);background:var(--tem3);font-size:18px;font-weight:600;line-height:1;padding:8px;border-radius:24px;justify-content:center;}

.cl-btn1:hover{color:var(--white1);background:var(--tem2);}
.cl-btn2:hover{color:var(--white1);background:var(--tem3);}
.cl-btn3:hover{color:var(--tem2);background:var(--tem6);}



/* profile-area */
.profile-area{width:100%;display:grid;padding:0;margin:0 auto;grid-template-columns:auto 1fr;grid-gap:1rem;align-items: start;}

.pro-left{width:calc(100px + 15vw);max-width:320px;display:grid;grid-template-columns:1fr;grid-template-areas:"cl-logo" "cl-call" "cl-link";border-radius:12px;background:white;padding:2rem;justify-items:center;align-items:center;grid-gap:6px;position:sticky;top:6px;}
.pro-right{width:100%;display:grid;border-radius:12px;background:white;padding:2rem;align-items: start;grid-gap: 8px;}

.business-map{width:100%;display:grid;padding:1rem 0;margin:0 auto;grid-template-columns:1fr auto;grid-gap:1rem;align-items: start;}
.bu-map-left{width:100%;display:grid;border-radius:12px;background:white;align-items: start;grid-gap: 8px;}
.bu-map-right{width:100%;max-width:calc(200px + 10vw);display:grid;border-radius:12px;background:white;padding:2rem;justify-items:center;align-items:center;grid-gap:8px;}

.googlemap{width:100%;display:flex;background:black;}
.map-link{width:100%;display:grid;overflow:hidden;}



/* head */
.main-head{z-index:997;width:100%;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr;}
.head-r1{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;padding:0;margin:auto;grid-gap:1rem;background:var(--white1);grid-template-areas:"hr-logo hr-search hr-btn hr-mobile";}

.hr1-logo{grid-area:hr-logo;display:flex;justify-content:flex-start;padding:4px 16px;}
	.h-name{display:flex;justify-content:flex-start;padding:0;margin:0;align-items:center;}
	.h-name .h-logo{margin:auto;font-size:20px;font-size:clamp(18px, 2vw, 26px);font-weight:600;line-height:1;color:var(--tem2);}
	.h-name .h-logo b{color:var(--tem1);font-weight:600;}
	.h-logo{width:100%;display:flex;max-width:260px;max-height: 90px;}
	.h-logo img{display:flex;object-position: center;object-fit: scale-down;}
.hr1-search{grid-area:hr-search;display:flex;padding: 8px;}
.hr1-btn{grid-area:hr-btn;display:grid;justify-content:center;padding: 8px;}
	.top-btn{display:grid;align-items: center;color:var(--tem1);background:white;padding:.5rem 2rem;border-radius:8px;text-decoration: none;font-size:18px;text-align: center;border:1px solid var(--tem1);transition: all 0.3s;}
	.top-btn:hover{color:white;background:var(--tem1);}
.hr1-mobile-menu{grid-area:hr-mobile;display:grid;padding:4px 16px;display:none;}

.head-r2{z-index:10;width:100%;display:flex;padding:0;margin:auto;gap:8px;background:var(--tem1);box-shadow: 0 3px 6px rgb(0 0 0 / 16%);}
.h-top-menu{width:100%;display:flex;flex-wrap: wrap;justify-content:center;align-items:center;}
.h-link:link,.h-link:visited{display:grid;padding:16px 8px 10px;font-size:16px;font-weight:600;line-height:1;color:var(--white1);grid-gap:12px;border-bottom:3px solid var(--tem1);}
.h-link:hover{border-bottom:3px solid #fff;}


/* Mobile menu */
.burger-btn {
  background: none;
  border: none;
  padding: 0.1em;
  cursor: pointer;
  display: flex;
  align-items: center;
  z-index: 12;
  position: relative;
}

.icon-hamburger rect {
  fill: #202530;
  transition: all 0.4s cubic-bezier(.68,-0.55,.27,1.55);
}

.icon-close {
  display: none;
}
.icon-close line {
  stroke: var(--tem1);
  transition: all 0.4s cubic-bezier(.68,-0.55,.27,1.55);
}
.burger-btn:hover .icon-hamburger rect{fill: var(--tem1);}
.burger-btn.open .icon-hamburger { display: none; }
.burger-btn.open .icon-close { display: block; }

.menu-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(20, 24, 36, 0.30);
  display: none;
  transition: background 0.25s;
  z-index: 11;
}

.menu-overlay.active {
  display: block;
  animation: fadeInBg 0.15s;
}

@keyframes fadeInBg {
  from { background: rgba(20, 24, 36, 0.0);}
  to   { background: rgba(20, 24, 36, 0.30);}
}

.side-menu {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 85vw;
  max-width: 340px;
  background: #fff;
  box-shadow: -2px 0 18px rgba(60,60,70,0.07);
  padding: 2.5em 1.2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(.68,-0.55,.27,1.55);
}

.menu-overlay.active .side-menu {
  transform: translateX(0);
}

.side-menu a {
  color: #1c2331;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 500;
  padding: 0.5em;
  border-radius: 0.8em;
  transition: background 0.2s, color 0.2s;
}

.side-menu a:hover,
.side-menu a:focus {
  background: var(--tem7);
  color: var(--tem1);
}

/* Hide menu on larger screens for demo */
@media (min-width: 900px) {
  .burger-btn, .menu-overlay { display: none !important; }
  header .brand { margin-left: 0; }
}

/* For smoother touch on mobile */
.menu-overlay,
.side-menu {
  -webkit-tap-highlight-color: transparent;
}



/* search */
.search-container {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  padding: 4px;
  width: 100%;overflow:hidden;border:1px solid #fff;
}

.search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.1rem;
  padding: 8px 16px;
  flex: 1;border-radius: 12px;
}
.search-input:focus{background:var(--tem6);}
.search-btn {
  border: none;
  background: var(--tem3);
  color: #fff;
  font-size: 1.2em;
  padding: 0.5em 1em;
  margin-left: 0.5em;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(82, 106, 240, 0.08);
  display: flex;
  align-items: center;
}

.search-btn svg {
  display: block;
}

.search-btn:active,
.search-btn:focus {
  background: #3146d6;
}

@media (max-width: 500px) {
  .search-container {
    padding: 0.15em 0.6em 0.15em 1em;
    max-width: 100vw;
  }
  .search-input {
    font-size: 1em;
    padding: 0.6em 0.2em;
  }
}


/* breadcrumb */
.breadcrumb {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  font-size: 1.07em;
}

.breadcrumb a {
  color: var(--tem1);
  text-decoration: none;
  background:#f7f9ff;
  transition: color 0.2s;
  padding: 0.25em 0.4em;
  border-radius: 0.4em;
}
.breadcrumb a:hover {
  background: #eef2ff;
  color: #3146d6;
}

.breadcrumb .arrow {
  margin: 0 0.4em;
  color: var(--tem5);
  flex-shrink: 0;
  vertical-align: middle;
}

.breadcrumb [aria-current="page"], .breadcrumb span[aria-current="page"] {
  color: white;font-size:.85em;
  font-weight: 600;
  background:var(--tem3);
  padding: 0.25em 0.4em;
  border-radius: 0.4em;
}
@media (max-width: 500px) {
  .breadcrumb li, .breadcrumb a, .breadcrumb [aria-current="page"] {
    font-size: 0.97em;
  }
  .breadcrumb .arrow {
    width: 13px;
    height: 13px;
  }
}

.pagination-area{width:100%;display:grid;padding:1rem;}
.pagination {
  display: flex;
  align-items: center;
  gap: 0.18em;
  background:transparent;justify-content:center;
  border-radius: 2em;
  padding: 0.38em 1.3em;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  height: 2.1em;
  margin: 0 0.09em;
  padding: 0 0.2em;
  font-size: 1.12em;
  font-weight: 500;
  color: #26bac9;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  outline: none;
  user-select: none;
}
.page-btn:hover,
.page-btn:focus {
  background: #e9fafd;
  color: #1795a4;
  box-shadow: 0 0 0 2px #26bac930;
}
.page-btn.active,
.page-btn[aria-current="page"] {
  background: #26bac9;
  color: #fff;
  font-weight: 700;
  pointer-events: none;
  box-shadow: 0 2px 10px 0 #26bac920;
}
.page-btn.prev,
.page-btn.next {
  background: #e9fafd;
  color: #26bac9;
  border-radius: 50%;
  font-weight: 600;
}
.page-btn.prev:disabled,
.page-btn.next:disabled {
  opacity: 0.45;
  cursor: default;
}

.page-ellipsis {
  color: #a9bec2;
  font-size: 1.2em;
  margin: 0 0.11em;
  user-select: none;
}

@media (max-width: 480px) {
  .pagination {
    font-size: 0.96em;
    padding: 0.28em 0.5em;
  }
  .page-btn {
    min-width: 1.7em;
    height: 1.7em;
    font-size: 1em;
  }
}


/* Gallery area */
.gallery {
  width: 100%; max-width: 900px;
  box-sizing: border-box;
  padding: 16px;
  background: #fff;
  border-radius: 1.2em;
  box-shadow: 0 3px 18px 0 rgba(38,186,201,0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ใช้กับ gallery ที่จัด layout หลาย row ได้เลย */
.gallery-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.gallery img {
  display: block;
  flex: 1 1 calc(50% - 6px); /* 2 columns with gap */
  min-width: 200px;
  max-width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 0.6em;
  box-shadow: 0 2px 8px #26bac92a;
  transition: box-shadow 0.2s, opacity 0.7s cubic-bezier(.38,.81,.57,.99), transform 0.3s;
  opacity: 0;
  /* รูปไม่โชว์จนกว่าจะโหลดเสร็จ */
}
.gallery img.loaded {
  opacity: 1;
}
.gallery img:hover {
  box-shadow: 0 6px 18px #26bac94a;
  transform: translateY(-4px);
}

@media (max-width: 700px) {
  .gallery { max-width: 98vw; padding: 7px; gap: 7px; }
  .gallery-row { gap: 7px; }
  .gallery img {
    flex: 1 1 100%;
    min-width: unset;
    height: 220px;
    border-radius: 0.34em;
    box-shadow: 0 2px 7px #26bac926;
  }
}


/* FAQ */
.faq-area{width:100%;display:grid;padding:2rem;}
.faq-section {
  background: #fff;
  margin: 2.4em 0;
  border-radius: 1.3em;
  box-shadow: 0 4px 22px #26bac926;
  width: 100%;
  padding: 2em 1.5em;
}
.faq-title {
  color: #26bac9;
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin:0 auto 1rem !important;
  text-align: left;
}

.faq-list { width: 100%; }
.faq-item + .faq-item { margin-top: 1em; }

.faq-question {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: #e7f9fb;
  color: #1c2331;
  font-weight: 600;
  font-size: 1.06em;
  padding: 1em 1.1em;
  border: none;
  border-radius: 0.9em;
  cursor: pointer;
  transition: background 0.16s;
  outline: none;
  box-shadow: 0 1px 4px #26bac913;
}
.faq-question:hover,
.faq-question:focus {
  background: #26bac930;
}

.faq-icon {
  margin-left: 1.2em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform 0.28s cubic-bezier(.5,1.8,.5,1);
}

.faq-item.open .faq-icon {
  transform: rotate(45deg); /* เปลี่ยน + เป็น x */
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  padding: 0 0.5em;
  transition: max-height 0.38s cubic-bezier(.46,1.48,.54,.93), opacity 0.32s;
  opacity: 0;
}
.faq-item.open .faq-answer {
  max-height: 120px; /* หรือใส่ auto+animation JS ถ้าคำตอบยาว */
  opacity: 1;
  padding-top: 0.7em;
}
.faq-answer > div {
  color: #273141;
  font-size: 1em;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

@media (max-width: 500px) {
  .faq-section { padding: 1em 0.6em; }
  .faq-title { font-size: 1.07em; }
}



/* menu mobile*/
.mobile-menu{display:grid;align-items: center;justify-content: end;}
.side-box{z-index:998;position:fixed;right:-200%;top:0;width:100%;max-width:220px;height:100vh;padding:40px 0;overflow-x:auto;box-sizing:border-box;text-align:center;align-items:center;align-content:center;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;opacity: 0;background:#f0f3f3;}
#toggle{position:fixed;appearance:none;cursor:pointer;left:-1000px;top:0;}
#toggle + label{z-index:9999;display:grid;cursor:pointer;padding:0;margin:0;-webkit-font-smoothing:antialiased;color:var(--tem1);width:40px;height:40px;background:transparent;border-radius:50%;cursor:pointer;justify-content:center;align-items:center;}
#toggle + label:hover{color:var(--tem3) !important;}
#toggle + label:after{content:"☰";padding:3px;line-height:1em;font-size:2em;text-align:center;}
.container{transition:margin 0.5s cubic-bezier(0.17, 0.04, 0.03, 0.94);padding:0 1%;}
#toggle:checked ~ .side-box{right:0;opacity:1;}
#toggle:checked ~ .container{margin-left:0px;}
#toggle:checked + label{background:none;}
#toggle:checked + label:after{content:"X";}

.menu-side{display:grid;}
.sub-list{display:grid;padding:0;}
.li-menu-ss{display:grid;}
.li-menu-ss a{display:grid;font-size:18px;font-weight:400;padding:8px;color:var(--tem2);}
.li-menu-ss:hover{background:white;}

/* footer */
.area-ft{width:100%;display:block;margin:auto;padding:1rem;text-align:center;}
.tx-ft{font-size: 16px;font-weight: 300;line-height: 1.4;color:#000;}
.copyright{width:100%;display:grid;padding:1rem 5vw;color:black;}
.copyright span{font-size:14px;font-size:clamp(12px, .8vw, 14px);}



/* to top */
.scroll-top-btn{z-index: 999;position: fixed;bottom: 20px;right: 20px;background-color:rgb(100 100 100 / 30%);color: white;border: none;border-radius: 50%;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 24px;cursor: pointer;opacity: 0;pointer-events: none;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;}
.scroll-top-btn:hover{background-color:var(--tem5);color:black;}
.scroll-top-btn.show{opacity: 1;pointer-events: auto;visibility: visible;}



/* Add form profile */
.profile-form {
  background: #fff;
  border-radius: 1.3em;
  box-shadow: 0 4px 22px #26bac926;
  padding: 2.5em 2.1em 1.5em 2.1em;
  max-width: 1080px;
  width: 100%;display:grid;grid-gap:1rem;
}
.profile-form h2 {
  color: var(--tem2);
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 1.1em;
  letter-spacing: 0.03em;
}
.profile-form label {
  display: grid;grid-gap:4px;  
  font-weight: 500;
  color: #1b2631;
}
.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
input[type="text"], input[type="url"], input[type="time"], textarea {
  font-size: 1em;
  border: 1px solid #d2e6e8;
  border-radius: 0.6em;
  padding: 0.7em 0.95em;
  background: #f7fcfc;
  transition: border 0.2s;
  color: #1c2331;
  width: 100%;
  box-sizing: border-box;
}
input:focus, textarea:focus { border-color: #26bac9; outline: none; }
textarea { min-height: 90px; resize: vertical; }

.input-upload {
  display: flex;flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.upload-btn {
  background: #26bac9;
  color: #fff;
  border: none;
  padding: 0.68em 1.7em;
  font-size: 1em;
  border-radius: 0.6em;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.16s, color 0.16s;
  box-shadow: 0 2px 8px #26bac921;
}
.upload-btn:hover { background: #1795a4; color: #fff; }

.word-count {
  text-align: right;
  font-size: 0.93em;
  color: #1c2331a8;
  margin-top: 0.25em;
}
.img-preview-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 24px;
}

.img-wrap {
  position: relative;
  display: inline-block;
}
.img-wrap img {
  width: 90px; height: 90px;
  border-radius: 0.45em;
  object-fit: cover;
  border: 1.5px solid #d3e8e7;
  box-shadow: 0 1px 7px #26bac920;
  background: #f7fcfc;
}

.remove-img-btn {
  position: absolute;
  top: -8px; right: -8px;
  background: #26bac9;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px; height: 20px;
  font-size: 1em;
  line-height: 17px;
  cursor: pointer;
  box-shadow: 0 1px 3px #0001;
  z-index: 2;
  padding: 0;
}
.remove-img-btn:hover { background: #1795a4; }
.btn-row {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 2.1em;
}
.reset-btn, .submit-btn {
  border: none;
  font-size: 1.1em;
  border-radius: 0.65em;
  padding: 0.75em 1.6em;
  font-weight: 700;
  cursor: pointer;
  background: #e8fafb;
  color: #1c2331;
  transition: background 0.15s, color 0.15s;
}
.submit-btn {
  background: #26bac9;
  color: #fff;
}
.submit-btn:hover { background: #1795a4; }
.reset-btn:hover { background: #cdf3f7; }

@media (max-width: 600px) {
  .profile-form { padding: 1.2em 0.7em; }
  .btn-row { flex-direction: column; gap: 10px; }
}

/* responsive */
@media only screen and (max-width:1200px){

}

@media (max-width:1080px){

}

@media (max-width:899px){
.head-r1{grid-template-columns:1fr auto auto;grid-template-areas:"hr-logo hr-btn hr-mobile""hr-search hr-search hr-search";}
.hr1-mobile-menu{display:grid;}
.search-container,.search-btn{border-radius:0;}
.hr1-search{padding:0px;}
.business-map{grid-template-columns:1fr;}
}

@media (max-width:740px){
.card-list{grid-template-columns:1fr;grid-gap: 16px;}
.cl-right{max-width:100%;grid-template-columns:1fr 1fr;grid-template-areas:"cl-logo cl-logo" "cl-call cl-link";align-items:center;justify-content:center;}
.logo-business{max-width:240px;}
.profile-area{grid-template-columns:1fr;}
.pro-left{z-index: 20;position: sticky;top: 0;width:100%;max-width:100%;padding:8px 16px;grid-template-columns:160px auto auto;
    grid-template-areas:"cl-logo cl-call cl-link";}
.cl-btn1,.cl-btn2,.cl-btn3{font-size:14px;}
.bu-map-right{max-width:100%;}
.input-row{flex-wrap:wrap;gap:0;justify-content: center;}
}

@media (max-width:520px){
.cl-right{max-width:100%;grid-template-columns:1fr;grid-template-areas:"cl-logo" "cl-call" "cl-link";align-items:center;justify-content:center;}
.pro-left{grid-template-columns:auto auto;grid-template-areas:"cl-logo cl-logo ""cl-call cl-link";}
}

@media (max-width:340px){

}