span {
  font-weight: inherit;
}
.blue {
  color: var(--primary);
}
.orange {
  color: var(--secondary);
}
span.icon {
  line-height: 0;
  vertical-align: bottom;
}
svg {
  width: 24px;
  height: 24px;
  vertical-align: bottom;
  stroke: #000;
}
svg.spec {
  stroke: none;
  fill: #000;
}
strong {
  font-weight: bold;
}
button:focus {
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5);
  outline: none;
}
button:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.55;
  color: #000;
}
p,
a,
button {
  line-height: 1.75;
  color: #000;
}
span {
  line-height: 1.5;
  color: #000;
}
.btn-t1,
.btn-t2,
.btn-t3 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 36px;
  border-radius: 10px;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  transition: background-color 200ms;
}
.btn-t1 .txt,
.btn-t2 .txt,
.btn-t3 .txt {
  font-size: 14px;
  color: #fff;
  margin-bottom: -3px;
  transition: color 200ms;
}
.btn-t1 svg,
.btn-t2 svg {
  stroke: #fff;
  transition: stroke 200ms;
  margin-right: 4px;
}
.btn-t1 svg.spec {
  stroke: none;
  fill: #fff;
  transition: fill 200ms;
}
.btn-t2 {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-t3 {
  background-color: transparent;
}
.btn-t3 .txt {
  color: var(--primary);
}
.btn-t3 svg {
  stroke: var(--primary);
  transition: stroke 200ms;
  margin-right: 4px;
}
.btn-t3 svg.spec {
  stroke: none;
  fill: var(--primary);
  transition: fill 200ms;
}
#root > .container {
  max-width: 1186px;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  gap: 56px;
}
.main-content {
  flex-grow: 1;
}
.main-content .vet-summary {
  margin-top: 32px;
}
.sum-content {
  width: 366px;
  flex-shrink: 0;
}
.sum-content video {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}
.sum-content .vet-summary {
  padding: 24px 16px;
  border-radius: 8px;
  box-shadow: 2px 10px 20px 0 #0000000A;
  transition: transform 500ms 300ms;
}
.vet-summary .video {
  display: block;
  width: 100%;
  margin: 0 auto 16px;
  transition: width 300ms, margin 300ms, display 300ms;
  transition-behavior: allow-discrete;
  @starting-style {
    width: 0;
  }
}
.vet-summary .statics {
  display: flex;
  justify-content: space-between;
}
.vet-summary .static {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.vet-summary .static .figure {
  width: 100%;
  height: 32px;
  border-radius: 4px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background-color: #D3DAE0;
}
.vet-summary .static .figure svg {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  fill: #CF8000;
  stroke: #CF8000;
}
.vet-summary .static .txt {
  font-size: 14px;
  color: var(--blck);
  text-align: center;
}
.vet-summary .static:nth-child(1) .figure {
  background-color: #E5EFFF;
  color: var(--primary);
}
.vet-summary .static:nth-child(2) .figure {
  background-color: #FFE6B1;
  color: #CF8000;
}
.vet-summary .specialties {
  padding: 12px 16px;
  margin: 1rem 0;
  background-color: #F3F7FC;
  border-radius: 16px;
}
.vet-summary .specialties h2 {
  font-size: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E2E2E2;
}
.vet-summary .specialties ul {
  margin-top: 8px;
  list-style-type: none;
}
.vet-summary .specialties ul li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}
.vet-summary .specialties li svg {
  stroke: #ED6234;
}
.vet-summary .specialties li .txt {
  font-size: 14px;
  color: #494952;
}
.vet-summary .specialties ul li:last-child {
  margin-bottom: 0;
}
.vet-summary .cta .txt {
  font-size: 16px;
  font-weight: bold;
}
.main-content {
  padding: 24px 0;
}
.profile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.profile .pic {
  position: relative;
}
.profile .pic img {
  width: 120px;
  height: 120px;
  border: 1px solid var(--primary);
  border-radius: 50%;
}
.profile .details {
  display: flex;
  flex-direction: column;
}
.profile h1 {
  font-size: 18px;
  color: var(--blck);
  margin-bottom: 4px;
}
.profile .profession {
  font-size: 14px;
  color: var(--blck);
}
.profile .tags {
  display: flex;
  margin-top: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
.tag {
  padding: 4px 12px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 100vmax;
}
.tag.rtc {
  color: #004FB7;
  background-color: #D1DDFE;
}
.tag.osv {
  color: #4700FF;
  background-color: #EDE6FF;
}
.profile .pic .online-status {
  position: absolute;
  left: 12px;
  bottom: 8px;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.profile .pic .online-status[data-status="online"] {
  background-color: #69FF1F;
}
.profile .pic .online-status[data-status="offline"] {
  background-color: #D3DAE0;
}
.vet-description {
  line-height: 1.75;
  height: 2lh;
  overflow: hidden;
  margin-top: 24px;
  transition: height 500ms;
}
.vet-description.expanded {
  height: auto;
  height: calc-size(auto, size);
}
.vet-description p {
  font-size: 16px;
  margin-bottom: 24px;
  color: var(--blck);
}
.vet-description h2 {
  font-size: 16px;
  color: var(--blck);
  margin-bottom: 8px;
}
.vet-description ul {
  margin-bottom: 24px;
}
.vet-description ul li {
  list-style-position: inside;
  margin-bottom: 8px;
  color: var(--blck);
}
.vet-description ul li:last-child {
  margin: initial;
}
.vet-description ul li::marker {
  color: var(--primary);
}
.vet-description span.orange {
  font-weight: 500;
}
.read-more-btn {
  font-size: 14px;
  color: var(--primary);
  margin-top: 20px;
}
.main-content .specialties {
  margin: 32px 0;
}
.discount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px dashed #A1FFFA;
  background-color: #ECFFFE;
  padding: 8px;
  margin-top: 1rem;
}
.discount > p {
  font-size: 14px;
  font-weight: 500;
  color: var(--blck);
}
.discount .wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.discount .wrapper .label {
  font-size: 14px;
  color: var(--blck);
}
.discount button {
  display: flex;
  align-self: center;
  gap: 8px;
}
.discount button svg {
  stroke: var(--primary);
  width: 20px;
  height: 20px;
}
.discount .code {
  font-size: 14px;
  font-weight: bold;
  color: var(--primary);
}
.onpage-navigation {
  margin-top: 40px;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 10;
}
.onpage-navigation ul {
  display: flex;
  list-style-type: none;
}
.onpage-navigation ul li {
  width: calc(100% / 4);
  position: relative;
}
.onpage-navigation ul li.current::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background-color: var(--primary);
}
.onpage-navigation ul li a {
  display: inline-block;
  width: 100%;
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid #D1D5DB;
  font-size: 14px;
  color: var(--blck);
}
.onpage-navigation ul li.current a {
  color: var(--primary);
}
.professions {
  margin-top: 32px;
}
.sec-t1 header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sec-t1 header svg {
  stroke: var(--primary);
}
.sec-t1 header h2 {
  font-size: 20px;
}
.professions ul {
  display: flex;
  gap: 12px;
  overflow-x: scroll;
  margin-top: 24px;
  width: 0;
  min-width: 100%;
  padding-left: 2px;
}
.professions ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 56px;
  width: 164px;
  border-radius: 16px;
  border: 1px solid #D1D5DB;
  overflow: hidden;
  position: relative;
  user-select: none;
  padding-right: 16px;
}
.professions ul li svg {
  stroke: initial;
}
.professions ul li .label {
  font-size: 14px;
  color: var(--blck);
}
.professions ul li::after {
  content: '';
  border-radius: 48% 52% 9% 91% / 46% 41% 59% 54%;
  background-color: #FFF2ED;
  width: 98px;
  height: 78px;
  position: absolute;
  top: -20;
  right: -42px;
  z-index: -1;
}
.professions ul li[data-type="dog"]::after {
  background-color: #FFF2ED;
}
.professions ul li[data-type="cat"]::after {
  background-color: #E8E1FF;
}
.professions ul li[data-type="bird"]::after {
  background-color: #FFF7CC;
}
.professions ul li[data-type="rodent"]::after {
  background-color: #F1FFE5;
}
.professions ul li[data-type="fish"]::after {
  background-color: #E1F0FF;
}
.professions ul li[data-type="reptile"]::after {
  background-color: #ECFFFC;
}
.custom-scroller-indicator-js {
  width: 70px;
  height: 7px;
  background-color: #D9D9D9;
  border-radius: 10px;
  margin: 24px auto 0;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.custom-scroller-indicator-js .scroll-thumb {
  width: 25%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 10px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: grab;
}
.custom-scroller-indicator-js .scroll-thumb.dragging {
  cursor: grabbing;
}
.plans-sec {
  margin-top: 48px;
}
.plans-sec header svg {
  stroke: initial;
  fill: var(--primary);
}
.plans-sec .plans {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  list-style-type: none;
}
.plans-sec .plans .plan {
  flex-basis: 50%;
}
.plans-sec .plan article {
  position: relative;
  padding: 32px 16px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 16px;
  overflow: hidden;
}
.plans-sec .call-plan article {
  background-color: #EDF4FF;
  border: 2px solid var(--primary);
}
.plans-sec .plan h3 {
  font-size: 18px;
  color: var(--blck);
  text-align: center;
}
.plans-sec .plan img {
  display: block;
  margin: 1rem auto;
  width: 120px;
  height: auto;
}
.plans-sec .plan .price {
  font-weight: bold;
  font-size: 16px;
  color: var(--primary);
  text-align: center;
  margin: 1rem 0;
}
.plans-sec .plan .fac-title {
  padding-top: 16px;
  text-align: center;
  color: var(--primary);
  font-size: 16px;
  border-top: 1px solid #D1D5DB;
}
.plans-sec .plan ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 240px;
  margin: 1rem auto;
}
.plans-sec .plan ul li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--blck);
}
.plans-sec .plan ul li svg {
  width: 24px;
  height: 24px;
  stroke: var(--primary);
}
.plans-sec .plan .cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background-color: #0056D6;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
}
.plans-sec .plan article .cate-tag {
  position: absolute;
  top: 10px;
  right: -36px;
  padding: 10px 32px;
  background-color: #FF8B65;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  transform: rotate(45deg);
}
.plans-sec .chat-plan .price {
  color: var(--secondary);
}
.plans-sec .chat-plan .fac-title {
  color: var(--secondary);
}
.plans-sec .chat-plan ul li svg {
  stroke: var(--secondary);
}
.plans-sec .chat-plan .cta {
  background-color: var(--secondary);
}
.osv-sec {
  margin-top: 32px;
}
.osv-sec > .container {
  position: relative;
  border: 1px solid #D1D5DB;
  overflow: hidden;
  border-radius: 8px;
  padding: 12px;
}
.osv-sec header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #D1D5DB;
  margin-bottom: 12px;
}
.osv-sec header .pic img {
  width: 64px;
  height: auto;
}
.osv-sec header .info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.osv-sec header .info h3 {
  font-weight: 500;
  font-size: 16px;
}
.osv-sec header .info p {
  font-size: 13px;
  color: var(--blck);
  max-width: 90%;
}
.osv-sec .cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}
.osv-sec .cta-row p {
  font-size: 13px;
  color: var(--blck);
}
.osv-sec .cta-row .cta {
  display: flex;
  align-items: center;
  gap: 4px;
}
.osv-sec .cta-row .cta .txt {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
}
.osv-sec .cta-row .cta svg {
  stroke: var(--primary);
}
.osv-sec .city-tag {
  position: absolute;
  top: 6px;
  left: -34px;
  transform: rotate(-45deg);
  background-color: #7765FF;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  padding: 10px 30px;
  user-select: none;
  pointer-events: none;
}
.schedule {
  margin-top: 48px;
}
.schedule .table-wrapper {
  border-radius: 16px;
  border: 1px solid #D1D5DB;
  overflow: hidden;
  margin-top: 24px;
  width: 0;
  min-width: 100%;
}
.schedule table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.schedule table tr {
  height: 44px;
  border-bottom: 1px solid #d1d1d1;
  border-top: 1px solid #d1d1d1;
}
.schedule table thead tr {
  border-top: initial;
}
.schedule table tbody tr:last-child {
  border-bottom: initial;
}
.schedule table thead tr {
  height: 64px;
  background-color: #F4F7FA;
}
.schedule table thead tr th {
  padding-block: 10px;
}
.schedule table .day-col {
  padding-right: 16px;
}
.schedule table tbody .day-col {
  font-size: 13px;
}
.schedule table tbody td {
  padding: 7px 0;
}
.schedule table .time-col.time-start {
  width: 90px;
  padding-left: 16px;
}
.schedule table .time-col.time-start div {
  border-right: 1px solid #D1D5DB;
}
.schedule table tbody .time-start div {
  height: 30px;
  justify-content: center;
  align-items: center;
}
.schedule table :where(th, .time-start) div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-weight: 600;
  font-size: 13px;
  color: var(--blck);
}
.schedule table thead th div svg {
  width: 20px;
  height: 20px;
}
.schedule table thead th.time-col div {
  align-items: center;
}
.schedule table thead th.time-col div svg {
  width: 18px;
  height: 18px;
}
.schedule table td:not(.day-col) {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--blck);
}
.schedule table .time-col {
  width: 74px;
}
.schedule table tbody tr:nth-child(even) {
  background-color: #F4F7FA;
}
.reviews {
  margin-top: 48px;
}
.reviews header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews header h2 .dot {
  width: 4px;
  height: 4px;
  background-color: var(--blck);
  border-radius: 4px;
}
.reviews header h2 svg {
  fill: var(--primary);
  stroke: var(--primary);
  margin-top: -6px;
}
.reviews ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 24px;
  list-style-type: none;
}
.reviews ul li {
  position: relative;
  padding: 24px 16px;
  border-radius: 16px;
  border: 1px solid #D1D5DB;
  overflow: hidden;
}
.reviews ul li .description {
  font-size: 14px;
  color: var(--blck);
}
.reviews ul li .rate {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 16px 0;
}
.reviews ul li .rate svg {
  width: 20px;
  height: 20px;
}
.reviews ul li .rate .fstar {
  fill: #EBA825;
  stroke: #EBA825;
}
.reviews ul li .rate .hstar {
  stroke: #EBA825;
}
.reviews ul li .info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reviews ul li .info .pic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background-color: #32C8C8;
  border-radius: 100vmax;
  font-size: 13px;
  font-weight: bold;
  color: #Fff;
}
.reviews ul li .info .pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 100vmax;
}
.reviews ul li .info .details .top {
  display: flex;
  align-self: center;
  gap: 4px;
}
.reviews ul li .info .details .top .sepline {
  width: 1px;
  height: 24px;
  background-color: #D1D5DB;
}
.reviews ul li .info .details .name {
  font-size: 14px;
  font-weight: bold;
  color: var(--blck);
}
.reviews ul li .info .details .used {
  font-size: 14px;
  color: var(--secondary);
}
.reviews ul li .info .details time {
  font-size: 12px;
  line-height: 1.5;
  color: #6E7A86;
}
.reviews ul li::before {
  content: '';
  position: absolute;
  border-radius: 67% 33% 56% 44% / 34% 56% 44% 66%;
  background-color: #FFF2EE;
  width: 210px;
  height: 160px;
  top: -46px;
  left: -90px;
  z-index: -1;
}
.reviews ul li[data-type="call"]::before {
  background-color: #EDF4FF;
}
.reviews ul li[data-type="osv"]::before {
  background-color: #F0EAFF;
}
.reviews ul li[data-type="call"] .used {
  color: var(--primary) !important;
}
.reviews ul li[data-type="osv"] .used {
  color: #4700FF !important;
}
.reviews .cta {
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 4px;
  color: var(--primary);
  margin-top: 24px;
}
.reviews .cta svg {
  stroke: var(--primary);
}
.control-dots,
.control-dots-nojs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.control-dots .dot,
.control-dots-nojs .dot {
  width: 8px;
  height: 8px;
  border-radius: 100vmax;
  background-color: #d9d9d9;
  cursor: pointer;
  transition: 200ms;
}
.control-dots .dot.current,
.control-dots-nojs .dot.current {
  width: 24px;
  background-color: var(--primary);
}
.control-dots-nojs .dot {
  cursor: auto;
}
.why-us {
  margin-top: 48px;
}
.why-us ul {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style-type: none;
}
.why-us ul li {
  position: relative;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #D1D5DB;
  overflow: hidden;
}
.why-us ul svg {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  stroke: initial;
}
.why-us ul li h3 {
  font-size: 14px;
  color: #4200FF;
}
.why-us ul li::before {
  content: '';
  position: absolute;
  width: 210px;
  height: 160px;
  border-radius: 52% 48% 26% 74% / 34% 56% 44% 66%;
  top: -24px;
  right: -130px;
  background-color: #E9E2FF;
  z-index: -1;
}
.why-us ul li:nth-child(2)::before {
  background-color: #FFF1ED;
}
.why-us ul li:nth-child(3)::before {
  background-color: #E3EEFF;
}
.why-us ul li:nth-child(4)::before {
  background-color: #F2FFE7;
}
.why-us ul li:nth-child(2) h3 {
  color: var(--secondary);
}
.why-us ul li:nth-child(3) h3 {
  color: var(--primary);
}
.why-us ul li:nth-child(4) h3 {
  color: #099E40;
}
.faq {
  margin-top: 48px;
}
.faq .faq-items {
  list-style-type: none;
  margin-top: 24px;
}
.faq .faq-items .faq-item {
  padding: 14px 15px;
  margin-bottom: 1rem;
  border-radius: 10px;
  background-color: #e1eaff;
}
.faq .faq-items .faq-item:last-child {
  margin-bottom: initial;
}
.faq .faq-item .faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: right;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}
.faq .faq-item .faq-question strong {
  color: var(--blck);
  font-weight: 600;
}
.faq .faq-item .faq-question[aria-expanded="true"] .angle-down {
  transform: rotate(180deg);
}
.faq .faq-item .angle-down {
  flex-shrink: 0;
  height: 22px;
  width: 22px;
  stroke: initial;
  transition: transform 200ms ease;
}
.faq .faq-item .faq-answer {
  font-size: 14px;
  margin-top: 14px;
  display: none;
}
.faq .faq-item .faq-answer :where(span, p) {
  font-size: inherit;
  color: var(--blck);
}
.faq .faq-item.active .faq-question strong {
  color: var(--primary);
}
.faq .faq-item.active .faq-answer {
  display: block;
}
.grid-t1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.comment-sec {
margin-top: 48px;
}
.comment-sec .grid-t1 {
  max-width: 500px;
  margin-top: 24px;
}
.inp-t3 .holder {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  height: 56px;
  padding-inline: 8px;
  background-color: #F2F7FF;
}
.inp-t3 .holder.focus {
  outline: 1px solid var(--primary);
}
.inp-t3 .holder input {
  background: none;
  border: none;
  outline: none;
  width: 0;
  flex-grow: 1;
  font-size: 14px;
  line-height: 26px;
  color: #000;
}
.inp-t3 .holder svg {
  width: 20px;
  height: 20px;
  stroke: #6E7A86;
}
.inp-t3 .holder span {
  position: absolute;
  font-size: 14px;
  line-height: 26px;
  color: #6E7A86;
  user-select: none;
  pointer-events: none;
}
.inp-t3 .holder .transparent {
  display: block;
  top: -1px;
  right: 9px;
  color: transparent;
  background-color: #F2F7FF;
  font-size: 13px;
  overflow: hidden;
  height: 6px;
  color: transparent;
  max-width: 0;
  transition: max-width 200ms linear;
}
.inp-t3 .holder input:focus ~ .transparent,
.inp-t3 .holder input:valid ~ .transparent,
.inp-t3.invalid .holder .transparent  {
  max-width: 100px;
}
.inp-t3 .holder .placeholder {
  right: 36px;
  top: 15px;
  transition: all 250ms, color 0ms;
}
.inp-t3 .holder input:focus ~ .placeholder,
.inp-t3 .holder input:valid ~ .placeholder,
.inp-t3.invalid .holder .placeholder {
  top: -13px;
  right: 9px;
  font-size: 12px;
  transform: translateX(-4.5%);
}
.comment-sec .comment-top {
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment-sec .comment-top .terms {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-sec .comment-top .terms input {
  width: 18px;
  height: 18px;
}
.comment-sec .comment-top .terms label {
  font-size: 12px;
  color: #000;
  user-select: none;
}
.comment-sec .comment-top > label {
  font-size: 16px;
  color: var(--blck);
}
.comment-sec .comment-text {
  display: block;
  width: 100%;
  border: 1px solid #D1D5DB;
  background-color: #fff;
  resize: none;
  padding: 8px;
  border-radius: 16px 16px 0 0;
  font-size: 13px;
  color: var(--blck);
  outline: none;
  border-bottom: none;
}
.comment-sec .comment-bottom {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #E5EFFF;
  border: 1px solid #D1D5DB;
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding-inline: 16px;
}
.comment-sec .comment-bottom .counter {
  font-size: 12px;
  color: #98989E;
}
.comment-sec .submit-wrapper {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-sec .submit-wrapper button {
  padding: 10px 16px;
}
.comment-sec .submit-wrapper button .txt {
  font-size: 16px;
  font-weight: 600;
}
.comment-sec .submit-wrapper .note {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-sec .submit-wrapper .note svg {
  stroke: #5C9DFF;
}
.comment-sec .submit-wrapper .note p {
  font-size: 13px;
  color: #414A53;
}
.comment-sec .user-comments {
  margin-top: 48px;
}
.comment-sec .user-comments h3 {
  font-size: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #D1D5DB;
  text-align: center;
}
.comment-sec .list {
  margin-top: 24px;
}
.comment {
  position: relative;
}
.comment:not(:first-child) {
  margin-top: 24px;
}
.comment .rate svg {
  width: 20px;
  height: 20px;
}
.comment .rate .fstar {
  fill: #EBA825;
  stroke: #EBA825;
}
.comment .rate .hstar {
  stroke: #EBA825;
}
.comment .info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment .info .pic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background-color: #32C8C8;
  border-radius: 100vmax;
  font-size: 13px;
  font-weight: bold;
  color: #Fff;
}
.comment .info .pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 100vmax;
}
.comment .info .details .top {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comment .info .details .top .sepline {
  width: 1px;
  height: 24px;
  background-color: #D1D5DB;
}
.comment .info .details .name {
  font-size: 14px;
  font-weight: bold;
  color: var(--blck);
}
.comment .info .details .used {
  font-size: 14px;
  color: var(--secondary);
}
.comment time {
  font-size: 12px;
  line-height: 1.5;
  color: #6E7A86;
}
.comment .text {
  margin: 4px 0;
  font-size: 14px;
  color: #000;
}
.comment .actions {
  display: flex;
  align-items: center;
  margin-top: 12px;
}
.comment .actions .like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comment .actions .like-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #6E7A86;
}
.comment .actions .like-btn[data-status="liked"] svg {
  fill: #FF0000;
  stroke: #FF0000;
}
.comment .actions .like-btn span {
  font-size: 14px;
  color: #6E7A86;
}
.comment .actions .replay-btn {
  padding: 4px;
  margin-right: 12px;
  margin-top: -8px;
}
.comment .actions .replay-btn svg {
  width: 20px;
  height: 20px;
  stroke: #6E7A86;
}
.comment .replays {
  margin-right: 50px;
}
.replays .comment:last-child::after {
  content: '';
  width: 3px;
  height: calc(100% - 6px);
  background-color: #fff;
  position: absolute;
  right: -32px;
  bottom: 0;
  z-index: 10;
}
.comment.replay {
  margin-top: 24px;
}
.comment .blue-check {
  stroke: initial;
  width: 20px;
  height: 20px;
}
.comment.replay .info .pic {
  width: 32px;
  height: 32px;
}
.comment.replay::before {
  content: url();
  background-image: url("../icons/curve.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 23px;
  height: 23px;
  position: absolute;
  top: -4px;
  right: -31px;
  z-index: 20;
}
/* .comment.replay::before {
  content: '';
  width: 22px;
  height: 1px;
  background-color: #E2E2E2;
  position: absolute;
  top: 15px;
  right: -31px;
} */
.comment[data-status="replayed"]::after {
  content: '';
  position: absolute;
  width: 1px;
  height: calc(100% - 46px);
  top: 46px;
  right: 19px;
  background-color: #E2E2E2;
}
.pagination {
  margin-top: 32px;
}
.pagination ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pagination ul a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  box-shadow: 2px 10px 20px 0 #595c6018;
}
.pagination ul a svg {
  width: 16px;
  height: 16px;
}
.pagination ul .current a {
  background-color: var(--primary) !important;
  color: #fff !important;
}
.pagination ul li:hover a {
  background-color: #E5EFFF;
}
.pagination ul li:hover a svg {
  stroke: var(--primary);
}
.comment-sec .reply-form {
  margin-top: 32px;
}
.comment-sec .reply-form .title {
  font-size: 18px;
  font-weight: bold;
  color: var(--blck);
}
.show-replys-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 20px;
}
.show-replys-btn .txt {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
}
.show-replys-btn svg {
  width: 20px;
  height: 20px;
  stroke: none;
  fill: var(--primary);
}
.comment[data-expanded="true"] > .container > .actions .show-replys-btn svg {
  rotate: 180deg;
}
#root > .container > .master {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 72px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #D1D5DB;
  z-index: 40;
  padding: 0 20px;
  box-shadow: 0 -1px 2px 0 #0000001F;
}
#master-mb-cta {
  height: 40px;
  flex-basis: 100%;
  border-radius: 4px;
}
#master-mb-cta .txt {
  font-size: 14px;
  font-weight: bold;
}
.inp-t3 .error-txt {
  color: #ff0000;
  font-size: 12px;
  margin-top: 4px;
  display: none;
}
.inp-t3.invalid .holder {
  outline: 1px solid #ff0000;
}
.inp-t3.invalid .holder .placeholder {
  color: #ff0000;
}
.inp-t3.invalid .holder svg {
  stroke: #ff0000;
}
.inp-t3.invalid .error-txt {
  display: inline-block;
}
@media (min-width: 768px) {
  .mb-only {
    display: none !important;
  }
  .comment .text {
    margin: 8px 48px 8px 16px;
  }
  .comment .text + time {
    margin-right: 48px;
  }
  .comment .actions {
    margin-right: 48px;
  }
}
@media (min-width: 1027px) {
  .vet-summary.active {
    transform: translateY(5%);
  }
  .vet-summary.active .video {
    width: 0;
    margin-bottom: 0;
    display: none;
  }
  .sum-content .vet-summary {
    position: sticky;
    top: 0;
  }
}
@media (max-width: 1026px) {
  .plans-sec .plans {
    flex-direction: column;
  }
  .plans-sec .plans .plan {
    flex-basis: initial;
  }
  .why-us ul {
    grid-template-columns: repeat(2, 1fr);
  }
  #root > .container {
    flex-direction: column-reverse;
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
  .sum-content {
    width: initial;
  }
  .sum-content .vet-summary {
    padding: initial;
    padding-top: 16px;
  }
  .profile .pic img {
    width: 72px;
    height: 72px;
  }
  .profile .pic .online-status {
    width: 14px;
    height: 14px;
    left: 8px;
    bottom: 4px;
  }
  .vet-description h2, .vet-description ul li, .vet-description span.orange, .faq .faq-item .faq-question {
    font-size: 14px;
  }
  .vet-description ul {
    margin-bottom: 1rem;
  }
  .discount {
    flex-direction: column;
    align-items: initial;
    gap: 8px;
  }
  .discount .wrapper {
    justify-content: space-between;
  }
  .onpage-navigation ul {
    overflow-x: auto;
  }
  .onpage-navigation ul li {
    width: initial;
    flex-shrink: 0;
  }
  .main-content {
    padding: initial;
    padding-bottom: 100px;
  }
  .osv-sec .city-tag {
    font-size: 12px;
    padding: 6px 30px;
  }
  .osv-sec .cta-row {
    flex-direction: column;
  }
  .osv-sec .cta-row .cta {
    align-self: flex-end;
  }
  .reviews ul {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }
  .reviews ul li {
    scroll-snap-align: start;
    min-width: 90%;
  }
  .comment-sec .grid-t1 {
    grid-template-columns: repeat(1, 1fr);
  }
  .comment-sec .submit-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .comment .replays {
    margin-right: 26px;
  }
  .comment > .container {
    position: relative;
    z-index: 21;
    background-color: #fff;
  }
  .comment[data-status="replayed"]::after {
    right: 6px;
  }
  .comment.replay::before {
    width: 23px;
    height: 23px;
    right: -20px;
  }
  .comment .info .details .name {
    font-size: 13px;
  }
  .vet-summary .video {
    margin: 0;
  }
  .replays .comment:last-child::after {
    right: -21px;
  }
  .vet-description {
    height: 3lh;
  }
  .sec-t1 header h2 {
    font-size: 19px;
  }
  .comment-sec :not(.replays) .replays {
    display: none;
  }
  .comment-sec .comment[data-expanded="true"] > .replays {
    display: block;
  }
}