feat: implement doctor schedule module, add detail fields to doctor profile, and integrate new appointment API client

This commit is contained in:
2026-07-23 19:34:02 +07:00
parent 107e191e93
commit 6d84979f03
111 changed files with 5138 additions and 288 deletions
@@ -0,0 +1,583 @@
<!DOCTYPE html>
<html lang="vi" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{themes/__${activeTheme}__/layout(forceFullWidth=true, bodyClass='doctor-detail-page')}">
<head>
<th:block layout:fragment="head">
<title th:text="${doctor.title + ' ' + doctor.name + ' | UMC'}">Chi tiết Bác sĩ</title>
<style>
.doctor-detail-page {
background-color: #f6f6f6;
}
.section-doctor-shadow {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.doctor-avatar-container {
width: 250px;
height: 250px;
background: linear-gradient(to top left, #f0faff, #e0f2fe);
}
@media (max-width: 1024px) {
.doctor-avatar-container {
width: 200px;
height: 200px;
}
}
@media (max-width: 768px) {
.doctor-avatar-container {
width: 150px;
height: 150px;
}
}
</style>
<link rel="stylesheet" th:href="@{/css/umc_doctor.css}" />
<link rel="stylesheet" th:href="@{/css/umc_doctor_2.css}" />
<link rel="stylesheet" th:href="@{/css/umc_doctor_3.css}" />
</th:block>
</head>
<body>
<div layout:fragment="content">
<main class="">
<section class="xl:py-8 md:py-6 py-4 bg-gray-50">
<div class="container">
<div class="section-doctor-shadow rounded-lg">
<div class="grid grid-cols-12 xl:gap-x-6 md:gap-x-4">
<div class="lg:col-span-6 col-span-full bg-[#fbfbfb] xl:py-6 md:py-3 py-3 xl:pl-6 md:pl-3 max-lg:pr-3 max-md:pr-0 rounded-lg">
<div>
<div class="max-md:border-b max-md:border-gray-100 max-md:pb-3">
<div class="flex md:items-center xl:space-x-3 md:space-x-2 space-x-2 xl:pb-6 md:pb-4 max-md:mb-3 md:border-b md:border-gray-100">
<div class="xl:size-[170px] md:size-[160px] size-[120px] aspect-[1/1] relative rounded-lg border border-primary-400 overflow-hidden flex-shrink-0 relative bg-gradient-to-tl from-primary-75 to-primary-100">
<img th:src="${doctor.avatarUrl != null and !doctor.avatarUrl.isEmpty() ? doctor.avatarUrl : '/images/default-avatar.png'}" style="width: 100%; height: 100%; object-fit: contain;" alt="Avatar Bác sĩ" />
</div>
<div class="space-y-[5px]">
<p class="title-5 text-primary-500 mb-0 max-md:!text-[12.8px]">
<span th:text="${doctor.title}">Học hàm/Học vị</span>
</p>
<h1 class="heading-3 text-[#1E293B] mb-1 max-md:!text-[18px]">
<span th:text="${doctor.name}">Tên Bác sĩ</span>
</h1>
<p class="body-3 text-gray-900 max-md:!text-[12px]">
<span th:text="${specialtyName}">Chuyên khoa</span>
</p>
<div class="max-md:hidden">
<div class="flex items-center space-x-2 body-3 max-md:!text-[12px] text-gray-900 flex-wrap mb-[5px]">
<div class="flex items-center space-x-1">
<div>Đánh giá
<!-- -->:
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-0">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-0">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-0)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-0)"></path>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-1">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-1">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-1)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-1)"></path>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-2">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-2">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-2)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-2)"></path>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-3">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-3">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-3)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-3)"></path>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-4">
<stop offset="50%" stop-color="#facc15"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="100%" stop-color="#d1d5db"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-4">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="50%" y="0" width="50%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-4)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-4)"></path>
</svg>
<span class="text-primary-600 font-semibold ml-2">4.5
<!-- -->/5
</span>
</div>
</div>
<div class="text-primary-600 lg:hover:underline lg:hover:text-primary-400 lg:duration-150 cursor-pointer underline-offset-2">(
<!-- -->1
<!-- -->
<!-- -->đánh giá
<!-- -->)
</div>
</div>
<button type="button" class="btn space-x-2 text-center label-3 w-[286px] !py-2 disabled:opacity-50 disabled:cursor-not-allowed text-white hover:opacity-90 transition-opacity" style="background-color: var(--color-brand);" th:data-url="${doctor.bookingUrl != null and !doctor.bookingUrl.isEmpty() ? doctor.bookingUrl : '#'}" onclick="window.location.href=this.getAttribute('data-url')">
<div>Đặt lịch khám</div>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_83_297)">
<path d="M0 16.26C0 17.3 0.366667 18.18 1.1 18.9C1.83333 19.62 2.72 19.9867 3.76 20H16.26C17.2867 20 18.1667 19.6333 18.9 18.9C19.6333 18.1667 20 17.2867 20 16.26V3.76C20 2.94667 19.7667 2.22 19.3 1.58C18.8333 0.94 18.2333 0.493333 17.5 0.24V1.88C17.5 2.4 17.32 2.84667 16.96 3.22C16.6 3.59333 16.1533 3.77333 15.62 3.76C15.0867 3.74667 14.6467 3.56667 14.3 3.22C13.9533 2.87333 13.7733 2.42667 13.76 1.88V0H6.26V1.88C6.26 2.4 6.07333 2.84667 5.7 3.22C5.32667 3.59333 4.88667 3.77333 4.38 3.76C3.87333 3.74667 3.42667 3.56667 3.04 3.22C2.65333 2.87333 2.47333 2.42667 2.5 1.88V0.24C1.76667 0.506667 1.16667 0.953333 0.7 1.58C0.233333 2.20667 0 2.93333 0 3.76L0 16.26ZM2.5 16.26V6.26H17.5V16.26C17.5 16.6067 17.38 16.9 17.14 17.14C16.9 17.38 16.6067 17.5 16.26 17.5H3.76C3.41333 17.5 3.11333 17.38 2.86 17.14C2.60667 16.9 2.48667 16.6067 2.5 16.26ZM3.76 1.88C3.76 2.05333 3.82 2.2 3.94 2.32C4.06 2.44 4.20667 2.5 4.38 2.5C4.55333 2.5 4.7 2.44 4.82 2.32C4.94 2.2 5 2.05333 5 1.88V0H3.76V1.88ZM5 15H7.5V12.5H5V15ZM5 11.26H7.5V8.76H5V11.26ZM8.76 15H11.26V12.5H8.76V15ZM8.76 11.26H11.26V8.76H8.76V11.26ZM12.5 15H15V12.5H12.5V15ZM12.5 11.26H15V8.76H12.5V11.26ZM15 1.88C15 2.05333 15.06 2.2 15.18 2.32C15.3 2.44 15.4467 2.5 15.62 2.5C15.7933 2.5 15.94 2.44 16.06 2.32C16.18 2.2 16.2467 2.05333 16.26 1.88V0H15V1.88Z" fill="white"></path>
</g>
<defs>
<clipPath id="clip0_83_297">
<rect width="20" height="20" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
</div>
<div class="md:hidden">
<div class="flex items-center mb-2 space-x-2 body-3 max-md:!text-[12px] text-gray-900 flex-wrap">
<div class="flex items-center space-x-1">
<div>Đánh giá
<!-- -->:
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-0">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-0">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-0)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-0)"></path>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-1">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-1">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-1)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-1)"></path>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-2">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-2">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-2)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-2)"></path>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-3">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-3">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-3)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-3)"></path>
</svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-banner-4.5-4">
<stop offset="50%" stop-color="#facc15"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="100%" stop-color="#d1d5db"></stop>
</linearGradient>
<mask id="star-mask-star-banner-4.5-4">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="50%" y="0" width="50%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-banner-4.5-4)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-banner-4.5-4)"></path>
</svg>
<span class="text-primary-600 font-semibold ml-2">4.5
<!-- -->/5
</span>
</div>
</div>
<div class="text-primary-600 lg:hover:underline lg:hover:text-primary-400 lg:duration-150 cursor-pointer underline-offset-2">(
<!-- -->1
<!-- -->
<!-- -->đánh giá
<!-- -->)
</div>
</div>
<button type="button" class="btn space-x-2 text-center label-3 w-full !py-2 disabled:opacity-50 disabled:cursor-not-allowed text-white hover:opacity-90 transition-opacity" style="background-color: var(--color-brand);" th:data-url="${doctor.bookingUrl != null and !doctor.bookingUrl.isEmpty() ? doctor.bookingUrl : '#'}" onclick="window.location.href=this.getAttribute('data-url')">
<div>Đặt lịch khám</div>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_83_297)">
<path d="M0 16.26C0 17.3 0.366667 18.18 1.1 18.9C1.83333 19.62 2.72 19.9867 3.76 20H16.26C17.2867 20 18.1667 19.6333 18.9 18.9C19.6333 18.1667 20 17.2867 20 16.26V3.76C20 2.94667 19.7667 2.22 19.3 1.58C18.8333 0.94 18.2333 0.493333 17.5 0.24V1.88C17.5 2.4 17.32 2.84667 16.96 3.22C16.6 3.59333 16.1533 3.77333 15.62 3.76C15.0867 3.74667 14.6467 3.56667 14.3 3.22C13.9533 2.87333 13.7733 2.42667 13.76 1.88V0H6.26V1.88C6.26 2.4 6.07333 2.84667 5.7 3.22C5.32667 3.59333 4.88667 3.77333 4.38 3.76C3.87333 3.74667 3.42667 3.56667 3.04 3.22C2.65333 2.87333 2.47333 2.42667 2.5 1.88V0.24C1.76667 0.506667 1.16667 0.953333 0.7 1.58C0.233333 2.20667 0 2.93333 0 3.76L0 16.26ZM2.5 16.26V6.26H17.5V16.26C17.5 16.6067 17.38 16.9 17.14 17.14C16.9 17.38 16.6067 17.5 16.26 17.5H3.76C3.41333 17.5 3.11333 17.38 2.86 17.14C2.60667 16.9 2.48667 16.6067 2.5 16.26ZM3.76 1.88C3.76 2.05333 3.82 2.2 3.94 2.32C4.06 2.44 4.20667 2.5 4.38 2.5C4.55333 2.5 4.7 2.44 4.82 2.32C4.94 2.2 5 2.05333 5 1.88V0H3.76V1.88ZM5 15H7.5V12.5H5V15ZM5 11.26H7.5V8.76H5V11.26ZM8.76 15H11.26V12.5H8.76V15ZM8.76 11.26H11.26V8.76H8.76V11.26ZM12.5 15H15V12.5H12.5V15ZM12.5 11.26H15V8.76H12.5V11.26ZM15 1.88C15 2.05333 15.06 2.2 15.18 2.32C15.3 2.44 15.4467 2.5 15.62 2.5C15.7933 2.5 15.94 2.44 16.06 2.32C16.18 2.2 16.2467 2.05333 16.26 1.88V0H15V1.88Z" fill="white"></path>
</g>
<defs>
<clipPath id="clip0_83_297">
<rect width="20" height="20" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
<div class="mt-4">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-primary-600 xl:p-3 p-2">
<div class="title-3 text-white">Lịch khám</div>
</div>
<div class="xl:m-3 m-2">
<div th:if="${scheduleDays != null and !scheduleDays.isEmpty()}">
<div class="flex gap-1 mb-1">
<span class="w-1 h-1 bg-primary-600 rounded-full md:mt-[11px] mt-2.5 flex-shrink-0"></span>
<div class="text-primary-600">
<span class="uppercase max-md:!text-[16px] heading-5" th:text="${specialtyName != null and !specialtyName.isEmpty() ? specialtyName : 'Chung'}"></span>
</div>
</div>
<ul class="list-none space-y-1">
<li th:each="day : ${scheduleDays}" class="text-gray-900 flex items-center justify-between space-x-2 relative pl-3 before:content-[''] before:w-1 before:h-1 before:bg-primary-600 before:rounded-full before:absolute md:before:top-[12px] before:top-3 before:left-1">
<div>
<span class="body-3 max-md:!text-[14px]" th:text="'Sáng thứ ' + ${day.dayOfWeek} + (${day.date != null} ? ' (' + ${day.date} + ')' : '')"></span>
</div>
</li>
</ul>
</div>
<div th:if="${scheduleDays == null or scheduleDays.isEmpty()}">
<p class="text-gray-500 italic">Chưa có lịch khám</p>
</div>
</div>
</div>
</div>
<div class="mt-4 scroll-mt-[132px]" style="display: none;">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-primary-600 xl:p-3 p-2">
<div class="flex md:items-center md:justify-between md:space-x-2 max-md:flex-col max-md:items-start max-md:space-y-2">
<div class="title-3 text-white">Cảm nhận của người bệnh</div>
<div class="flex items-center max-md:flex-1 gap-2 text-white body-2">
<div class="flex items-center gap-2">
<div class="flex gap-0.5">
<svg class="md:w-4 w-3 md:h-4 h-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-4.5-0">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-4.5-0">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-4.5-0)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-4.5-0)"></path>
</svg>
<svg class="md:w-4 w-3 md:h-4 h-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-4.5-1">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-4.5-1">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-4.5-1)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-4.5-1)"></path>
</svg>
<svg class="md:w-4 w-3 md:h-4 h-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-4.5-2">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-4.5-2">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-4.5-2)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-4.5-2)"></path>
</svg>
<svg class="md:w-4 w-3 md:h-4 h-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-4.5-3">
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
<stop offset="100%" stop-color="#facc15"></stop>
</linearGradient>
<mask id="star-mask-star-4.5-3">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="100%" y="0" width="0%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-4.5-3)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-4.5-3)"></path>
</svg>
<svg class="md:w-4 w-3 md:h-4 h-3" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="star-gradient-star-4.5-4">
<stop offset="50%" stop-color="#facc15"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="100%" stop-color="#d1d5db"></stop>
</linearGradient>
<mask id="star-mask-star-4.5-4">
<rect x="0" y="0" width="24" height="24" fill="white"></rect>
<rect x="50%" y="0" width="50%" height="24" fill="black"></rect>
</mask>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#star-gradient-star-4.5-4)" stroke="#d1d5db" stroke-width="1"></path>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="none" stroke="#facc15" stroke-width="1" mask="url(#star-mask-star-4.5-4)"></path>
</svg>
</div>
<span class="font-semibold">4.5
<!-- -->/5
</span>
</div>
<div>(
<!-- -->1
<!-- -->
<!-- -->đánh giá
<!-- -->)
</div>
</div>
</div>
</div>
<div class="xl:m-3 m-2">
<div class="mb-4 xl:p-4 md:p-3 p-2 bg-gray-50 rounded-lg">
<h4 class="title-1 text-primary-600 xl:mb-2 md:mb-1.5 mb-1">Viết đánh giá của bạn</h4>
<div class="space-y-3">
<div class="flex items-center space-x-2">
<span class="label-3 text-gray-900">Đánh giá
<!-- -->:
</span>
<div class="flex space-x-1">
<div class="relative cursor-pointer">
<svg class="md:w-5 w-4 md:h-5 h-4 transition-all duration-150" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="interactive-star-gradient-1">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
<linearGradient id="interactive-star-stroke-1">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#interactive-star-gradient-1)" stroke="url(#interactive-star-stroke-1)" stroke-width="1"></path>
</svg>
<div class="absolute inset-0 cursor-pointer"></div>
<div class="absolute inset-0 cursor-pointer"></div>
</div>
<div class="relative cursor-pointer">
<svg class="md:w-5 w-4 md:h-5 h-4 transition-all duration-150" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="interactive-star-gradient-2">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
<linearGradient id="interactive-star-stroke-2">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#interactive-star-gradient-2)" stroke="url(#interactive-star-stroke-2)" stroke-width="1"></path>
</svg>
<div class="absolute inset-0 cursor-pointer"></div>
<div class="absolute inset-0 cursor-pointer"></div>
</div>
<div class="relative cursor-pointer">
<svg class="md:w-5 w-4 md:h-5 h-4 transition-all duration-150" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="interactive-star-gradient-3">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
<linearGradient id="interactive-star-stroke-3">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#interactive-star-gradient-3)" stroke="url(#interactive-star-stroke-3)" stroke-width="1"></path>
</svg>
<div class="absolute inset-0 cursor-pointer"></div>
<div class="absolute inset-0 cursor-pointer"></div>
</div>
<div class="relative cursor-pointer">
<svg class="md:w-5 w-4 md:h-5 h-4 transition-all duration-150" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="interactive-star-gradient-4">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
<linearGradient id="interactive-star-stroke-4">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#interactive-star-gradient-4)" stroke="url(#interactive-star-stroke-4)" stroke-width="1"></path>
</svg>
<div class="absolute inset-0 cursor-pointer"></div>
<div class="absolute inset-0 cursor-pointer"></div>
</div>
<div class="relative cursor-pointer">
<svg class="md:w-5 w-4 md:h-5 h-4 transition-all duration-150" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="interactive-star-gradient-5">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
<linearGradient id="interactive-star-stroke-5">
<stop offset="50%" stop-color="#d1d5db"></stop>
<stop offset="50%" stop-color="#d1d5db"></stop>
</linearGradient>
</defs>
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="url(#interactive-star-gradient-5)" stroke="url(#interactive-star-stroke-5)" stroke-width="1"></path>
</svg>
<div class="absolute inset-0 cursor-pointer"></div>
<div class="absolute inset-0 cursor-pointer"></div>
</div>
</div>
<span class="body-3 text-gray-900">Chọn sao đánh giá</span>
</div>
<div>
<textarea placeholder="Chia sẻ trải nghiệm khám bệnh của bạn..." class="w-full xl:p-3 p-2 border body-3 border-gray-300 rounded-lg focus:outline-none focus:border-primary-600 resize-none" rows="3"></textarea>
</div>
<div class="flex justify-end">
<button class="btn btn-light label-2" disabled="">Gửi đánh giá</button>
</div>
</div>
</div>
<div class="space-y-2">
<h4 class="title-1 text-primary-600">Đánh giá từ người bệnh</h4>
<div class="text-center py-8">
<div class="mb-4">
<svg class="w-16 h-16 mx-auto text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
</div>
<p class="body-2 text-gray-600">Chưa có đánh giá</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="xl:p-6 lg:p-4 max-lg:py-3 max-lg:px-4 max-md:px-3 bg-white lg:col-span-6 col-span-full rounded-lg overflow-hidden space-y-4">
<div class="space-y-4"></div>
<div class="space-y-4">
<div class="jam-accordion active" th:if="${doctor.education != null and !doctor.education.isEmpty()}">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-primary-600 xl:p-3 p-2 flex justify-between items-center cursor-pointer jam-accordion-title" tabindex="0" aria-expanded="true" aria-controls="education-content">
<div class="title-3 text-white">Quá trình đào tạo</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-4 h-4 text-white duration-150 -rotate-180">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
<div class="jam-accordion-content">
<div class="prose doctor-info-prose transition-all duration-200 !text-[14px] xl:m-3 m-2" th:utext="${doctor.education}"></div>
</div>
</div>
</div>
</div>
<div class="jam-accordion active" th:if="${doctor.workExperience != null and !doctor.workExperience.isEmpty()}">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-primary-600 xl:p-3 p-2 flex justify-between items-center cursor-pointer jam-accordion-title" tabindex="0" aria-expanded="true" aria-controls="experience-content">
<div class="title-3 text-white">Quá trình công tác</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-4 h-4 text-white duration-150 -rotate-180">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
<div class="jam-accordion-content">
<div class="prose doctor-info-prose transition-all duration-200 !text-[14px] space-y-2 xl:m-3 m-2" th:utext="${doctor.workExperience}"></div>
</div>
</div>
</div>
</div>
</div>
<div class="jam-accordion active" th:if="${doctor.achievements != null and !doctor.achievements.isEmpty()}">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="bg-primary-600 xl:p-3 p-2 flex justify-between items-center cursor-pointer jam-accordion-title" tabindex="0" aria-expanded="true" aria-controls="association-content">
<div class="title-3 text-white">Hiệp hội chuyên môn &amp; Thành tựu</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-4 h-4 text-white duration-150 -rotate-180">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
<div class="jam-accordion-content">
<div class="prose doctor-info-prose transition-all duration-200 !text-[14px] xl:m-3 m-2" th:utext="${doctor.achievements}"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>undefined </div>undefined </section>undefined
<!--$-->undefined
<!--/$-->undefined
<!--$-->undefined
<!--/$-->undefined </main>undefined</div>undefined
</body>undefined
</html>