Refactor : icon back và header, thêm responsive cho màn thống kê

public/assets/css/all.css

@@ -50,14 +50,17 @@
   font-family: "AvertaStdCY-Black";
   src: url(../fonts/AvertaStdCY-Black_1.otf);
 }
+
 @font-face {
   font-family: "AvertaStdCY-ExtraBold";
   src: url(../fonts/AvertaStdCY-Extrabold_1.otf);
 }
+
 @font-face {
   font-family: "AvertaStdCY-ExtraBoldItalic";
   src: url(../fonts/AvertaStdCY-ExtraboldItalic_1.otf);
 }
+
 @font-face {
   font-family: "AvertaStdCY-Bold";
   src: url(../fonts/AvertaStdCY-Bold_1.otf);
@@ -72,6 +75,7 @@
   font-family: "AvertaStdCY";
   src: url(../fonts/AvertaStdCY-Regular_3.otf);
 }
+
 @font-face {
   font-family: "AvertaStdCY-Italic";
   src: url(../fonts/AvertaStdCY-RegularItalic_1.otf);
@@ -97,7 +101,7 @@ html {
   font-size: 62.5%;
 }
 
-@media screen and (max-height: 800px) { 
+@media screen and (max-height: 800px) {
   :root {
     --height-header: 42px;
     --width-sidebar: 68px;
@@ -193,6 +197,7 @@ video {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+
 html,
 body {
   /* height: 100%; */
@@ -324,7 +329,7 @@ a:hover {
   background: #fff;
 }
 
-body > iframe[style*="2147483647"] {
+body>iframe[style*="2147483647"] {
   display: none;
 }
 
@@ -866,19 +871,19 @@ a:hover {
   transform: translateY(-50%) translateY(0px);
 }
 
-.slider-custom .uk-dotnav > * > * {
+.slider-custom .uk-dotnav>*>* {
   width: 14px;
   height: 14px;
   border: 1px solid #00bbb6;
 }
 
-.slider-custom .uk-dotnav > .uk-active > * {
+.slider-custom .uk-dotnav>.uk-active>* {
   background-color: #00bbb6;
   border-color: transparent;
 }
 
-.slider-custom .uk-dotnav > * > :focus,
+.slider-custom .uk-dotnav>*> :focus,
-.slider-custom .uk-dotnav > * > :hover {
+.slider-custom .uk-dotnav>*> :hover {
   background-color: #00bbb6;
 }
 
@@ -1105,7 +1110,7 @@ a:hover {
   background-position: bottom;
 }
 
-.bg-auth-img{
+.bg-auth-img {
   width: 100%;
   height: 100vh;
   background-image: url("./../imgs/bg/bg_auth.png");
@@ -1117,7 +1122,7 @@ a:hover {
   background-size: cover;
 }
 
-.bg-main-img{
+.bg-main-img {
   width: 100%;
   height: 100%;
   background-image: url("./../imgs/bg/bg_main.png");
@@ -1241,19 +1246,19 @@ a:hover {
   left: calc(100% - 30px);
 }
 
-.slider-custom-2 .uk-dotnav > * > * {
+.slider-custom-2 .uk-dotnav>*>* {
   width: 14px;
   height: 14px;
   border: 1px solid #00bbb6;
 }
 
-.slider-custom-2 .uk-dotnav > .uk-active > * {
+.slider-custom-2 .uk-dotnav>.uk-active>* {
   background-color: #00bbb6;
   border-color: transparent;
 }
 
-.slider-custom-2 .uk-dotnav > * > :focus,
+.slider-custom-2 .uk-dotnav>*> :focus,
-.slider-custom-2 .uk-dotnav > * > :hover {
+.slider-custom-2 .uk-dotnav>*> :hover {
   background-color: #00bbb6;
 }
 
@@ -1412,6 +1417,7 @@ a:hover {
   overflow: hidden;
   height: 80px;
 }
+
 .personal.plan-item {
   border-left: 20px solid #8dc63f;
 }
@@ -1697,7 +1703,7 @@ a:hover {
   padding-top: 40px;
 }
 
-.sunE-class-content .uk-grid > * {
+.sunE-class-content .uk-grid>* {
   padding-left: 20px;
   padding-bottom: 20px;
 }
@@ -2104,9 +2110,11 @@ a:hover {
   height: 100%;
   object-fit: cover;
 }
+
 .item-student-name-container {
   max-width: 65%;
 }
+
 .item-student-name {
   padding: 0 0 0 20px;
 }
@@ -2727,13 +2735,11 @@ a:hover {
   margin: -2px 10px 0 0;
 }
 
-.laplai p > input[type="radio"]:checked + *::before {
+.laplai p>input[type="radio"]:checked+*::before {
-  background: radial-gradient(
+  background: radial-gradient(#84c241 0%,
-    #84c241 0%,
+      #84c241 40%,
-    #84c241 40%,
+      transparent 50%,
-    transparent 50%,
+      transparent);
-    transparent
-  );
 }
 
 .apdung label {
@@ -3211,6 +3217,7 @@ a:hover {
 .box-select-file-full {
   flex: 1;
 }
+
 .box-select-file-full p {
   flex: 1;
   text-align: left;
@@ -3589,8 +3596,8 @@ a:hover {
   overflow: auto;
   padding: 0 25px 0 20px;
 
-  @media screen and (max-height: 800px){
+  @media screen and (max-height: 800px) {
-  max-height: calc(100vh - 130px);
+    max-height: calc(100vh - 130px);
 
   }
 }
@@ -3820,9 +3827,7 @@ a:hover {
   border-bottom: 1px solid #777777;
 }
 
-.giaotrinh.pad-t-0
+.giaotrinh.pad-t-0 .sunE-giaotrinh-resuft-filter .sunE-giaotrinh-item:last-child {
-  .sunE-giaotrinh-resuft-filter
-  .sunE-giaotrinh-item:last-child {
   border-bottom: none;
 }
 
@@ -4153,6 +4158,7 @@ a:hover {
 .sunE-right-container:has(.__text_empty) {
   overflow: initial;
 }
+
 .chambai.writing {
   margin: 0 0 15px;
 }
@@ -5132,15 +5138,13 @@ a:hover {
   color: #fff;
   font-size: 18px;
   font-family: "Myriadpro-Bold";
-  background-image: linear-gradient(
+  background-image: linear-gradient(45deg,
-    45deg,
+      #b0853a,
-    #b0853a,
+      #f8efa5,
-    #f8efa5,
+      #9d7033,
-    #9d7033,
+      #e7bf55,
-    #e7bf55,
+      #faf4ac,
-    #faf4ac,
+      #9d7033);
-    #9d7033
-  );
   text-align: center;
   border-radius: 15px;
   margin: 0 auto 5px;
@@ -5154,14 +5158,12 @@ a:hover {
   color: #fff;
   font-size: 18px;
   font-family: "Myriadpro-Bold";
-  background-image: linear-gradient(
+  background-image: linear-gradient(45deg,
-    45deg,
+      #c0c0c0,
-    #c0c0c0,
+      #ebeaea,
-    #ebeaea,
+      #b8b8b8,
-    #b8b8b8,
+      #6f6f6f,
-    #6f6f6f,
+      #ebeaea);
-    #ebeaea
-  );
   text-align: center;
   border-radius: 15px;
   margin: 0 auto 5px;
@@ -5175,14 +5177,12 @@ a:hover {
   color: #fff;
   font-size: 18px;
   font-family: "Myriadpro-Bold";
-  background-image: linear-gradient(
+  background-image: linear-gradient(40deg,
-    40deg,
+      #a3bee3,
-    #a3bee3,
+      #7da6d7,
-    #7da6d7,
+      #dde5f4,
-    #dde5f4,
+      #b5c9e7,
-    #b5c9e7,
+      #174d6b);
-    #174d6b
-  );
   text-align: center;
   border-radius: 15px;
   margin: 0 auto 5px;
@@ -5277,7 +5277,7 @@ a:hover {
   margin-bottom: 20px;
 }
 
-.vinhdanh-content .uk-grid > * {
+.vinhdanh-content .uk-grid>* {
   padding-left: 20px !important;
 }
 
@@ -5679,8 +5679,7 @@ a:hover {
   content: "";
   width: 17px;
   height: 10px;
-  background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat
+  background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat transparent;
-    transparent;
   position: absolute;
   top: 18px;
   right: 30px;
@@ -5976,6 +5975,7 @@ a:hover {
   justify-content: space-between;
   padding-left: 3rem;
 }
+
 .phieudiem .diemdanh-item .phieudiem-info p {
   font-family: "Myriadpro-Bold";
   font-size: 18px;
@@ -6158,7 +6158,7 @@ a:hover {
   box-sizing: border-box;
 }
 
-.btn-on-off.active .checkbox:checked + .knobs:before {
+.btn-on-off.active .checkbox:checked+.knobs:before {
   left: 24px;
   background-image: linear-gradient(to right, #fadb3a, #f5d030, #ebb318);
 }
@@ -6620,8 +6620,7 @@ a:hover {
   font-family: "Myriadpro-Bold";
 }
 
-.student-khht .sunE-calendar {
+.student-khht .sunE-calendar {}
-}
 
 .sunE-plan.khht-tkb,
 .sunE-plan.khht-cn {
@@ -7215,14 +7214,12 @@ p.text-center.f-18 {
 }
 
 .top-k-item.b .top-k-score {
-  background-image: linear-gradient(
+  background-image: linear-gradient(to right,
-    to right,
+      #b8b8b8,
-    #b8b8b8,
+      #cfcfcf,
-    #cfcfcf,
+      #ebeaea,
-    #ebeaea,
+      #c0c0c0,
-    #c0c0c0,
+      #ebeaea);
-    #ebeaea
-  );
 }
 
 .top-k-item p {
@@ -7691,6 +7688,7 @@ p.text-center.f-18 {
 .fix_text_cut_chart::after {
   background: none !important;
 }
+
 .box-s {
   padding: 0 5px 0 30px;
 }
@@ -8021,8 +8019,7 @@ p.text-center.f-18 {
   appearance: none;
   /* Remove default arrow */
   color: #fff;
-  background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px
+  background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px no-repeat #00ceab;
-    no-repeat #00ceab;
   /* Add custom arrow */
 }
 
@@ -8309,7 +8306,7 @@ p.text-center.f-18 {
   padding-top: 10px;
 }
 
-.unit-list .uk-grid > * {
+.unit-list .uk-grid>* {
   padding-left: 25px;
 }
 
@@ -8360,7 +8357,7 @@ p.text-center.f-18 {
   margin-top: -1px;
 }
 
-.chk-custom-gr input:checked + label:after {
+.chk-custom-gr input:checked+label:after {
   content: "";
   display: block;
   position: absolute;
@@ -8377,7 +8374,7 @@ p.text-center.f-18 {
   padding: 9px;
 }
 
-.wh20.chk-custom-gr input:checked + label:after {
+.wh20.chk-custom-gr input:checked+label:after {
   top: -3px;
   left: 6px;
   width: 6px;
@@ -8387,7 +8384,7 @@ p.text-center.f-18 {
   transform: rotate(36deg);
 }
 
-.wh20.chk-custom-gr-selected input:checked + label:after {
+.wh20.chk-custom-gr-selected input:checked+label:after {
   top: -6px;
   left: 8px;
 }
@@ -8479,21 +8476,13 @@ p.text-center.f-18 {
   border-radius: 50% !important;
 }
 
-.react-datepicker__time-container
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
-  .react-datepicker__time
-  .react-datepicker__time-box
-  ul.react-datepicker__time-list
-  li.react-datepicker__time-list-item--selected {
   background-image: linear-gradient(to right, #00e1a0, #00b9b7);
   color: white;
   font-weight: bold;
 }
 
-.react-datepicker__time-container
+.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
-  .react-datepicker__time
-  .react-datepicker__time-box
-  ul.react-datepicker__time-list
-  li.react-datepicker__time-list-item:hover {
   background-image: linear-gradient(to right, #00e1a0, #00b9b7);
 }
 
@@ -8523,16 +8512,20 @@ p.text-center.f-18 {
   color: #fff !important;
 }
 
-.react-datepicker__month .react-datepicker__month-text:hover, .react-datepicker__month .react-datepicker__quarter-text:hover {
+.react-datepicker__month .react-datepicker__month-text:hover,
+.react-datepicker__month .react-datepicker__quarter-text:hover {
   border-radius: 8px !important;
   border: none !important;
 }
 
-.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
+.react-datepicker__month .react-datepicker__month-text,
+.react-datepicker__month .react-datepicker__quarter-text {
   width: auto !important;
 }
 
-.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
   font-size: 1.6rem !important;
 }
 
@@ -8548,7 +8541,10 @@ p.text-center.f-18 {
   display: flex !important;
 }
 
-.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today {
+.react-datepicker__day--today,
+.react-datepicker__month-text--today,
+.react-datepicker__quarter-text--today,
+.react-datepicker__year-text--today {
   border-radius: 8px !important;
 }
 
@@ -8751,8 +8747,7 @@ ul.pagination li:hover a {
   content: "";
   width: 18px;
   height: 9px;
-  background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% /
+  background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% / 18px no-repeat transparent;
-    18px no-repeat transparent;
   position: absolute;
   top: 12px;
   right: 10px;
@@ -8762,8 +8757,7 @@ ul.pagination li:hover a {
   content: "";
   width: 18px;
   height: 9px;
-  background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% /
+  background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% / 18px no-repeat transparent;
-    18px no-repeat transparent;
   position: absolute;
   top: 12px;
   right: 10px;
@@ -8774,8 +8768,7 @@ ul.pagination li:hover a {
   content: "";
   width: 18px;
   height: 9px;
-  background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px
+  background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px no-repeat transparent;
-    no-repeat transparent;
   position: absolute;
   top: 12px;
   right: 10px;
@@ -8959,16 +8952,14 @@ ul.pagination li:hover a {
   content: "";
   width: 24px;
   height: 14px;
-  background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px
+  background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px no-repeat transparent;
-    no-repeat transparent;
   position: absolute;
   top: 19px;
   right: 8px;
 }
 
 .btn-ob .select-styled.active:after {
-  background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px
+  background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px no-repeat transparent;
-    no-repeat transparent;
 }
 
 .hoc-ky.btn-ob {
@@ -8994,6 +8985,7 @@ ul.pagination li:hover a {
 .he-so.btn-ob .select-options {
   z-index: 5;
 }
+
 .uk-modal {
   z-index: 99999;
 }
@@ -9034,7 +9026,7 @@ ul.pagination li:hover a {
   margin-top: -4px;
 }
 
-.medium-title .wh20.chk-custom-gr input:checked + label:after {
+.medium-title .wh20.chk-custom-gr input:checked+label:after {
   top: -10px;
 }
 
@@ -9163,14 +9155,14 @@ ul.pagination li:hover a {
   margin-right: 0;
 }
 
-.checbox-right .wh20.chk-custom-gr input:checked + label:after {
+.checbox-right .wh20.chk-custom-gr input:checked+label:after {
   left: auto;
   right: 5px;
   top: -6px;
 }
 
 /* Check box assigned */
-.wh20.check-assigned input:checked + label:after {
+.wh20.check-assigned input:checked+label:after {
   /* top: -5px; */
   top: -8px;
   left: 8px;
@@ -9180,7 +9172,7 @@ ul.pagination li:hover a {
 }
 
 /* Check box student */
-.wh20.check-select-student input:checked + label:after {
+.wh20.check-select-student input:checked+label:after {
   /* top: -5px; */
   top: -6px;
   left: 8px;
@@ -9190,7 +9182,7 @@ ul.pagination li:hover a {
 }
 
 /* Check box select all */
-.checbox-right .wh20.check-select-student input:checked + label:after {
+.checbox-right .wh20.check-select-student input:checked+label:after {
   left: auto;
   right: 2px;
   top: -8px;
@@ -9240,10 +9232,7 @@ ul.pagination li:hover a {
   border-top-left-radius: 35px;
 }
 
-.giaotrinh.unit.student
+.giaotrinh.unit.student .unit-list .unit-giaotrinh-content.active .unit-more-info {
-  .unit-list
-  .unit-giaotrinh-content.active
-  .unit-more-info {
   border-bottom: none;
 }
 
@@ -9456,7 +9445,7 @@ ul.pagination li:hover a {
   cursor: pointer;
 }
 
-.laplai p > input[type="radio"]:checked + *::before {
+.laplai p>input[type="radio"]:checked+*::before {
   border-color: #84c241;
 }
 
@@ -10443,10 +10432,7 @@ ul.pagination li:hover a {
   padding: 30px 20px 0;
 }
 
-.ldjas
+.ldjas .giaotrinh.teacher-giaobai .giaotrinh.filter .sunE-giaotrinh-resuft-filter {
-  .giaotrinh.teacher-giaobai
-  .giaotrinh.filter
-  .sunE-giaotrinh-resuft-filter {
   height: calc(100vh - 290px);
 }
 
@@ -11279,7 +11265,7 @@ strong {
 
 #keepReviewPersonal[type="checkbox"] {
   accent-color: #00a69c !important;
-  }
+}
 
 .container-page-header {
   height: calc(100vh - var(--height-header));

src/_components/Header/index.js

@@ -9,30 +9,37 @@ export default function Header({ icon, title, subtitles = [], manager = false, i
   const authentication = useSelector((state) => state.authentication);
   const { fullname, organization_name, role } = authentication?.user || {};
   const hasFullName = fullname || organization_name;
+  const isSGD = authentication?.user?.organization_name?.toLowerCase().includes('sở');
+  const organizationName = authentication?.user?.organization_name?.toLowerCase() || '';
+  const keywords = ['sở', 'phòng'];
   
+  const isManager = keywords.some(keyword => organizationName.includes(keyword));
   
-  const handleFullName = () =>{
+  
-    let fullName
+  
-    if(manager){
+  const handleFullName = () => {
-      fullName = 'Giám đốc ' + hasFullName
+    if (manager || isManager) {
-    }else{
+      return `${isSGD ? 'Giám đốc' : 'Trưởng phòng'} ${hasFullName}`;
-      fullName = role === "organization_admin"
-        ? `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}`
-        : fullname;
     }
-    return fullName
+    
+    if (role === "organization_admin") {
+      return `${organization_name ? 'Hiệu trưởng ' : ''}${hasFullName}`;
+    }
+    
+    return fullname;
   }
+
   
   return (
     <div className="header-container">
       <div className="header-left-side">
         {isBack && (
-          <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', cursor:'pointer' }}>
-              <button className="header-back-button" onClick={()=>{
+                <div 
-                history.goBack()
+                  style={{marginRight: 8, paddingBottom: 4}} 
-              }}>
+                  onClick={()=>{ history.goBack() }}>
-                <div style={{marginRight: 8, paddingBottom: 4}}>{renderIconButtonLeft()}</div>
+                  {renderIconButtonLeft(24, 24, "#FFA500")}
-              </button>
+                </div>
             </div>
         )}
         {icon}

src/_components/boxChart/BoxDoughnutBarChart.js

@@ -131,6 +131,7 @@ export default function BoxDoughnutBarChart({
             popperPlacement='top'
             typeErrText='underAbsolute'
             isMonthPicker
+            style={{padding:'0 10px'}}
           />
         </div>
         <Btn icon={renderIconButton()} isDisabled={isDisabledNext} onClick={handleClickNext} />

src/_components/boxChart/boxChart.scss

@@ -12,7 +12,7 @@
   }
 
   @media (max-width: 1599px) {
-    max-width: 260px;
+    max-width: 233px;
   }
 
   .box-chart-title {

src/_components/renderIcon/index.js

@@ -145,7 +145,7 @@ export const renderIconButton = (width = 24, height = 24) => {
   )
 }
 
-export const renderIconButtonLeft = (width = 24, height = 24) => {
+export const renderIconButtonLeft = (width = 24, height = 24, color = '#fff') => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -154,7 +154,7 @@ export const renderIconButtonLeft = (width = 24, height = 24) => {
       viewBox="0 0 24 24"
       preserveAspectRatio="xMidYMid meet"
     >
-      <g fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="rotate(180 12 12)">
+      <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="rotate(180 12 12)">
         <path strokeDasharray="20" strokeDashoffset="20" d="M3 12h17.5">
           <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="20;0" />
         </path>

src/_screens/home/detail-room-education/index.js

@@ -330,7 +330,7 @@ export default function DetailRoomEducation() {
     const getDataTeacher = async () => {
       try {
         setIsLoading(true);
-        const endPoint = `/api_teacher/get_teacher_info?search=${searchText}`;
+        const endPoint = `/api_teacher/get_teacher_info?search=${searchText}&organization_id=${authentication.user.organization_id}`;
         const res = await apiCaller(endPoint, "GET");
         setIsLoading(false);
         if (res?.status) {
@@ -372,7 +372,7 @@ export default function DetailRoomEducation() {
               <div className="d-flex flex-1 gap-16" style={{ flexDirection: 'column'}}>
                 {data ? 
                 (<>
-                  <div className="flex flex-m gap-16" style={{height: '23%'}}>
+                  <div className="flex flex-m gap-16">
                   <BoxDoughnutChart data={[data?.school_join, data?.total_school]} title={'Số trường đã tham gia'} />
                   <BoxDoughnutChart data={[data?.class_join, data?.total_class]} title={'Số lớp đã tham gia'} />
                   </div>

src/_screens/home/education-department/educationDepartmentHome.style.scss

@@ -5,7 +5,7 @@
   overflow: hidden;
 
   .education-department-statistic-container {
-    flex: 0.7;
+    flex: 0.6;
     height: calc(100vh - var(--height-header));
     padding: 2rem;
 
@@ -18,7 +18,7 @@
   }
 
   .education-department-home-list-container {
-    flex: 0.3;
+    flex: 0.4;
     height: calc(100vh - var(--height-header));
     overflow: hidden;
     padding: 2rem 0;
@@ -35,24 +35,30 @@
     //     height: 34px;
     //   }
     // }
-    .education-department-home-header{
+    .education-department-home-header {
       width: 100%;
       padding: 0 32px;
-      .detail-education-department-list-header{
+
-        justify-content: space-around;
+      .detail-education-department-list-header {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
         margin: 1.2rem 0;
-        gap: 32px;
+
         @media (max-width: 1650px) {
           flex-direction: column;
         }
+
         .criteria-manage-search-input {
           height: 46px;
           border-radius: 40px;
+
           @include screen_pc_sm {
             height: 36px;
           }
         }
-      
+
         .criteria-manage-item {
           min-width: fit-content;
           flex: 1;

src/_screens/home/outstanding-teacher/index.js

@@ -147,7 +147,7 @@ export default function OutstandingTeacher() {
               <div className="outstanding-teacher-list">
                 {!isLoading && !listTeacher?.length && (
                   <p style={{fontSize: '1.8rem', fontWeight: 700}}>
-                    Không còn giáo viên nào để hiển thị
+                    Không còn giáo viên nào
                   </p>
                 )}
                 {listTeacher.map((item, index) => {

src/_screens/home/outstanding-teacher/outstandingTeacher.style.scss

@@ -42,7 +42,16 @@
         max-height: 290px;
 
         .outstanding-teacher-best-avatar-box {
-          height: 90%;
+          height: 250px;
+
+          @media (max-width: 1650px) {
+            height: 210px;
+          }
+
+          @media (max-width: 1300px) {
+            height: 70px;
+          }
+
           aspect-ratio: 1;
           padding: 0.8rem;
           border-radius: 50%;