Style : resposive chart

src/_components/boxChart/boxChart.scss

@@ -49,14 +49,11 @@
     pointer-events: none;
   }
   .chart-container {
-    max-width: 360px;
+    // max-width: 360px;
     overflow-x: scroll;
     height: 100%;
-  }
-  
-  @media (max-width: 1600px) {
-    .chart-container {
-      max-width: 260px;
+    @media (max-width: 1750px) {
+      max-width: 300px;
     }
   }
 }

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

@@ -42,6 +42,9 @@
         justify-content: space-around;
         margin: 1.2rem 0;
         gap: 32px;
+        @media (max-width: 1650px) {
+          flex-direction: column;
+        }
         .criteria-manage-search-input {
           height: 46px;
           border-radius: 40px;

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

@@ -3,13 +3,14 @@ import Header from "../../../_components/Header";
 import { renderIconHome } from "../../../_components/renderIcon";
 import RateStar from "../../../_components/RateStar";
 import { defaultMonthYearSemester, getListMonthBySemester, LIST_SCHOOL_YEAR, LIST_SEMESTER } from "../../../_constants/common";
-import { configConstants } from "../../../_constants";
+import { configConstants, PATH } from "../../../_constants";
 import RootSelect from "../../../_components/RootSelect";
 import PrimaryButton from "../../../_components/Button/PrimaryButton";
 import { useSelector } from "react-redux";
 import './outstandingTeacher.style.scss'
-import { apiCaller } from "../../../_helpers";
+import { apiCaller, history } from "../../../_helpers";
 import { useParams } from "react-router-dom";
+import { replacePathParams } from "../../../_helpers/utils";
 
 export default function OutstandingTeacher() {
 
@@ -55,11 +56,24 @@ export default function OutstandingTeacher() {
     getData()
   }, [])
 
+  const handleClickTeacherItem = (item) => {
+    const teacherId = item?.teacher_id;
+    const teacherName = encodeURIComponent(item?.teacher_name);
+    const detailPath = replacePathParams(PATH.home.detailTeacher, { teacherId });
+    
+    history.push({
+      pathname: detailPath,
+      search: `?teacher_name=${teacherName}`, 
+      state: { isBack: true },
+    });
+  }
+
   return (
     <div className="flex-1">
       <Header
         icon={renderIconHome({ color: "#4D4D4D" })}
         title={"Top 10 giáo viên tiêu biểu - " + authentication.user.province}
+        isBack={true}
       />
       <div className="container-page-header container-page-sidebar">
         <div className="outstanding-teacher-container bg-outstanding-img">
@@ -87,8 +101,8 @@ export default function OutstandingTeacher() {
                   Áp dụng
                 </PrimaryButton>
               </div>
-              {!!firstTeacher && <div className="outstanding-teacher-best-container">
-                <div className="outstanding-teacher-best-avatar-content">
+              {!!firstTeacher && <div className="outstanding-teacher-best-container" >
+                <div className="outstanding-teacher-best-avatar-content" onClick={() => handleClickTeacherItem(firstTeacher)}>
                   <div className="outstanding-teacher-best-avatar-box">
                     <img className="outstanding-teacher-best-crown" src="/assets/imgs/crown_warning.png" />
                     <img className="outstanding-teacher-best-avatar" src={configConstants.BASE_URL + firstTeacher?.avatar} />

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

@@ -40,6 +40,7 @@
         align-items: center;
         justify-content: center;
         max-height: 290px;
+        cursor: pointer;
 
         .outstanding-teacher-best-avatar-box {
           height: 90%;