public/assets/css/all.css

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

src/_components/Header/index.js

@@ -9,37 +9,30 @@ 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
-  const handleFullName = () => {
+    if(manager){
-    if (manager || isManager) {
+      fullName = 'Giám đốc ' + hasFullName
-      return `${isSGD ? 'Giám đốc' : 'Trưởng phòng'} ${hasFullName}`;
+    }else{
+      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', cursor:'pointer' }}>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
-                <div 
+              <button className="header-back-button" onClick={()=>{
-                  style={{marginRight: 8, paddingBottom: 4}} 
+                history.goBack()
-                  onClick={()=>{ history.goBack() }}>
+              }}>
-                  {renderIconButtonLeft(24, 24, "#FFA500")}
+                <div style={{marginRight: 8, paddingBottom: 4}}>{renderIconButtonLeft()}</div>
-                </div>
+              </button>
             </div>
         )}
         {icon}

src/_components/boxChart/BoxDoughnutBarChart.js

@@ -131,7 +131,6 @@ 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: 233px;
+    max-width: 260px;
   }
 
   .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, color = '#fff') => {
+export const renderIconButtonLeft = (width = 24, height = 24) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -154,7 +154,7 @@ export const renderIconButtonLeft = (width = 24, height = 24, color = '#fff') =>
       viewBox="0 0 24 24"
       preserveAspectRatio="xMidYMid meet"
     >
-      <g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" transform="rotate(180 12 12)">
+      <g fill="none" stroke="#fff" 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}&organization_id=${authentication.user.organization_id}`;
+        const endPoint = `/api_teacher/get_teacher_info?search=${searchText}`;
         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">
+                  <div className="flex flex-m gap-16" style={{height: '23%'}}>
                   <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.6;
+    flex: 0.7;
     height: calc(100vh - var(--height-header));
     padding: 2rem;
 
@@ -18,7 +18,7 @@
   }
 
   .education-department-home-list-container {
-    flex: 0.4;
+    flex: 0.3;
     height: calc(100vh - var(--height-header));
     overflow: hidden;
     padding: 2rem 0;
@@ -35,30 +35,24 @@
     //     height: 34px;
     //   }
     // }
-    .education-department-home-header {
+    .education-department-home-header{
       width: 100%;
       padding: 0 32px;
-
+      .detail-education-department-list-header{
-      .detail-education-department-list-header {
+        justify-content: space-around;
-        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
+                    Không còn giáo viên nào để hiển thị
                   </p>
                 )}
                 {listTeacher.map((item, index) => {

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

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